最後にお問い合わせのぺージ(form.html)を作ります。
form.htmlを新規作成
お問い合わせページも、ヘッダーやフッターは他のページと同じです。 前回のcompany.htmlと同様に、他のファイルからコピーして作りましょう。
<head>内のtitleとdescriptionを変更。
</header>タグの下にある画像も変えます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>お問い合わせ｜エドべース株式会社</title>
<meta name="description" content="エドべース株式会社へのお問い合わせフォームです。">
</head>
<body>
<header>
<h1>エドベース株式会社</h1>
<nav>
<ul>
<li>ホーム</li>
<li>会社概要</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>
<img src="images/form.png" alt="エドベース株式会社-お問い合わせページトップ画像">
<main>
~ 以下略 ~
お問い合わせページは<main>タグの中に、問い合わせを行えるようにフォームがありますね。
また、<aside>で囲ったバナー部分がありません。
<aside> ~ </aside>までは削除しておきましょう。
フォームを作成する
HTMLだけで実際に動く（入力内容を送信する）フォームは作れません。 コーディングではフォームの外観を作る形になります。
フォームを作るためには<form>タグを使います。
更に、その中にパーツを作っていくことで、一つのフォームが出来上がります。
まずは、お名前の入力箇所だけを作ってみましょう。
<form>
名前：<input type="text" name="name">
</form>
それぞれのタグ・属性の意味は下記のとおりです。
<input>タグはtypeの値を変えることで、様々なパーツを作成できます。
よく使うものを紹介します。
| input typeの値 | 表示されるパーツ |
|---|---|
| text | 1行タイプのテキストボックス |
| password | 入力内容が見えないテキストボックス |
| radio | ラジオボタン |
| checkbox | チェックボックス |
| submit | フォームの実行・送信ボタン |
| reset | 入力した内容をリセットするボタン |
ラジオボタンを作る
お名前の下にある性別では、選択肢の中から１つを選んでもらいます。 この選択肢の表示はラジオボタンと言います。
ラジオボタンを作るときには、ユーザーが選べる選択肢を作る必要があります。
valueという新しい属性が出てきました。 valueは、そのパーツで何が選択されたを伝えるための属性です。 設定しておくことで、ユーザーがこのフォールの情報を送信したときに「seibetuのパートでは、manが選択されていましたよ」と教えてくれるのです。
<form>
名前 : <input type="text" name="name"><br>
性別 : <input type="radio" name="seibetu" value="man">男 <input type="radio" name="seibetu" value="woman">女 <br>
</form>
ちなみに、チェックボックスもほぼ同じ仕組みで作ることができます。「type=radio
」を「type=checkbox
」にするだけです。
【例】
ラジオボタンと異なり、チェックボックスは複数チェックを入れられます。
テキストエリアを作る
次は、お問い合わせしたいことを詳しく書いてもらう「内容」です。
名前の入力欄に似ていますが、１行よりも高さがあり、右下にマークのようなものがありますね。ここは<input>ではなく、<textarea>というタグを使って作ります。
<textarea>は複数行分の表示が可能。
かつ、ユーザーが見やすいようにサイズを変えることも可能です。
<textarea>タグは<input>タグとは異なり、終了タグが必要です。
今までのフォームパーツと同じくname属性を使って、どのパーツの入力内容か分かるようにします。
内容 : <textarea name="inq"></textarea>
送信ボタンを作る
送信ボタンは<input>タグでtype=submit
にすると、作ることができます。
<form>
名前 : <input type="text" name="name"><br>
性別 : <input type="radio" name="seibetu" value="man">男 <input type="radio" name="seibetu" value="woman">女 <br>
内容 : <textarea name="inq"></textarea><br>
<input type="submit">
</form>
ここまででフォーム部分は完成です！
フォーム補足～プルダウンメニュー～
今回のサイトにはありませんが、プルダウンメニューが使われているフォームもよく見かけますよね。
プルダウンメニューは下記のように書くと、作成することができます。
<select name="about">
<option value="edschool">オンラインスクール作成に関して</option>
<option value="qbase">オンラインテスト作成に関して</option>
<option value="others">その他</option>
</select>
<input> <select> <textarea>
フォームのパーツはほぼ、この３つのタグのどれかで作ることができますよ。
3つのページをリンクでつなぐ
ページを行き来できるように、ヘッダーにリンクを設定しましょう。
<header>
<h1>エドベース株式会社</h1>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="form.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
form.htmlが完成したら、他のページにも同じ様にリンクを設定してください。 3ページを行き来出来るようになったら完成です！
普段見ているWebサイトとだいぶ違う、と思った方。 CSS（スタイルシート）を設定することで、サイトの見た目は劇的に変わります。公開されているサイトと遜色ない形に仕上がりますよ。
今回作ったHTMLを使って、CSSの書き方入門講座にもチャレンジしてみて下さい！