フォーム作成
《使用する主なパーツ》
-
ラベル…項目名
labelタグで記述
-
テキストボックス … １行の文章入力
inputタグのtype属性、text指定でボックス作成
placeholder属性でボックス内に薄い色で記入例を表示
-
セレクトボックス … プルダウンで複数の選択肢から１つ選択
selectとoptionタグで作成。
-
テキストエリア … 長い文章を入力するためのフォーム
textareaタグで作成。
-
ラジオボタン … 選択肢から１つだけクリックして選択
inputタグのtype属性、radio指定で作成。
name属性で値を統一。
-
チェックボックス … はいかいいえの２択で選択できるフォーム。
inputタグのtype属性にcheckboxを指定。
-
送信ボタン … フォームの入力内容を送信す
（送信ボタン）inputタグ type属性 submit指定
（ボタンの文字）value属性 任意の文字指定
（送信先）formタグ action属性 URL指定
-
リセットボタン … フォームの入力をやり直したいときに使う。
（リセットボタン）inputタグ type属性 reset指定
（ボタンの文字）value属性 任意の文字指定。※記述しなければ「リセット」と表示される。
<!DOCTYPE html>
<html>
<body>
<form>
<label>氏名</label>
<input type="text" placeholder="名前を入力してください">
<br>
<label>年代</label>
<select>
<option>10代以下</option>
<option>20代</option>
<option>30代</option>
<option>40代以上</option>
</select>
<br>
<label>お問い合わせ内容</label>
<textarea></textarea>
<br>
<label>男性</label><input type="radio" name="gender">
<label>女性</label><input type="radio" name="gender">
<label>その他</label><input type="radio" name="gender">
<br>
<label>利用規約に同意する</label>
<input type="checkbox">
<br>
<br>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
</body>
</html>
（まとめ）
| フォーム | タグ |
|---|---|
| テキストボックス | input type="text" |
| ラベル | label |
| セレクトボックス | selectとoption |
| テキストエリア | textarea |
| ラジオラベル | input type="radio" |
| チェックボックス | input type="checkbox" |
| 送信ボタン | input type="submit" |
| リセットボタン | input type="reset" |