フォームを作る
まずはじめに「フォームを作る」のページで確認しましょう。
01 formタグで囲む
作りたい入力欄全体を<form>～</form>で囲みます。
実際には以下のように送信させる為のphpなどのプログラミング言語が必要になり、使用するサーバーによって設定も違ってきます。
<form action="example.php" method="post" name="contact-form">
ここに入力フォームの部品が入ります。
</form>
action／データの送信先ページを指定
method／データの送信方法の指定。POSTかGETを指定する
name ／フォームの名前を決める
まずはフォームで囲いを作ります
HTML
<body>
<div class="container">
<form>
</form>
</div>
</body>
02 最初に見出しを入れる
h1タグを使って見出しタイトルを入れよう
今回はCSSは設定してありますので、form.cssでデザインを変更できます。
HTML
<form>
<h1>アンケートフォーム</h1>
03 テキストフィールド 名前の入力
<p>～</p>タグで段落をつけて作成していきます。<div>～</div>でもOKです。
labelタグを使うことで項目とフォームを連動させることができます。
placeholder="例：山田 はなこ"は薄いグレーの（例）表示部分です。必要ない場合はこの部分を消してください。
（label と placeholder を省略した場合 ↓）
名前<br><input id="name" type="text" name="name">
HTML
<h1>アンケートフォーム</h1>
<p>
<label for="name">名前</label><br>
<input id="name" type="text" name="name" placeholder="例：山田 はなこ">
</p>
04 テキストフィールド メールアドレスの入力
inputのtype属性をemailにすることでメールアドレスの入力欄をつくることができます。
「xx@xxxx.xx」という形式に当てはまらない場合エラー文を表示してくれます。
HTML
<p>
<label for="mail">メール</label><br>
<input id="mail" type="email" name="mail" placeholder="例：xx@xxxx.xx">
</p>
05 ラジオボタン
複数の選択肢から1つ選ばせることができるのがラジオボタンです。
ラジオボタンを表示するにはinputのtype属性をtype="radio"
HTML
<p>
<label for="blood">血液型（Blood-type）</label><br>
<input type="radio" name="blood" value="A">A
<input type="radio" name="blood" value="B">B
<input type="radio" name="blood" value="AB">AB
<input type="radio" name="blood" value="O">O
</p>
06 チェックボックス
複数の選択肢からいくつでも選択できるのがチェックボックスです。
チェックボックスを表示するにはinputのtype属性をtype="checkbox"とします。
HTML
<p>
<label for="food">好きな日本食</label><br>
<input type="checkbox" name="course" value="sushi">すし
<input type="checkbox" name="course" value="tenpura">天ぷら
<input type="checkbox" name="course" value="onigiri">おにぎり
<input type="checkbox" name="course" value="udon">うどん
</p>
07 セレクトボックス
ボタンをクリックするとプルダウンで選択肢が表示されるのがセレクトボックスです。
選択肢が３つ以上ある時に使います。
セレクトボックスをつくるには各選択肢をoptionで囲い、全体をselectで囲みます。
HTML
<p>
<label for="live">どこに住んでいますか</label><br>
<select name="live">
<option value="" selected>ここから選んでください</option>
<option value="maebashi">前橋市</option>
<option value="isesaki">伊勢崎市</option>
<option value="takasaki">高崎市</option>
<option value="other">その他</option>
</select>
</p>
08 テキストエリア
テキストエリアを表示するにはtextareaタグを使用します。
テキストフィールドと同じにようにid="free"で連動させています。
HTML
<p>
<label for="free">ご意見ご質問</label><br>
<textarea id="free" name="free" rows="1" cols="40" placeholder="自由に意見をお書きください"></textarea>
</p>
09 送信ボタン
リセットボタンの表示はinputのtype属性をtype="reset"
送信ボタンの表示はinputのtype属性をtype="submit"
HTML
<input type="reset" value="リセットする">
<input type="submit" value="送信する">