フォームの作成方法-使用するパーツ2

前回の続きとして今回もフォームの作成時に使用するタグを紹介していきます。

<input type=”checkbox”>
<input type=”submit”>
<select>タグと<option>タグ

<input type=”checkbox”>

好きな食べ物:
<input type="checkbox" name="eat" value="カレー" > カレー
<input type="checkbox" name="eat" value="ラーメン" > ラーメン
<input type="checkbox" name="eat" value="ハンバーグ" > ハンバーグ
<input type="checkbox" name="eat" value="麻婆豆腐" checked> 麻婆豆腐

チェックボックスはラジオボタンと同じように複数の選択肢から選ぶことができるパーツですが、
ラジオボタンと違いチェックボックスは複数の項目を選択できます。
アンケート等で複数の回答が考えられる場合に使用しましょう。
主に使用すされる属性もラジオボタンと同じもとなります。

name

チェックボックスの名前を記載します

value

送信される選択肢の値を入力します

checked

最初から選択状態にする際に使用します

<input type=”submit”>

<input type="submit" value="送信">

フォームに入力した内容を送信するパーツです。ボタンに表示するテキストは好きに変更することが可能です。主に使用する属性は以下となります。

name

ボタンの名前を記載します

value

ボタンに表示されるテキストを記載します

<input type="image" src="test/test.png" alt="送信">

ボタンに画像を使用する場合はtype属性をimageにし、画像ファイルを指定しましょう。

src

ボタンに使用したい画像のファイルパス、ファイル名を記載します

alt

画像を説明する文章を記載します

<select>タグと<option>タグ

年齢
<select name="age">
<option value="10歳未満">10歳未満</option>
<option value="15歳">15歳</option>
<option value="20歳">20歳</option>
<option value="25歳">25歳</option>
<option value="秘密" selected>秘密</option>
</select>

セレクトボックスをクリックした際に選択肢が表示されるパーツです。選択する項目はそれぞれ
<option>タグで囲みましょう。
下記が<select>と<option>で主に使用される属性です。