ドットインストール HTML入門12～13

Formの基礎２

フォームを活用する基礎の続き。

選択形式のものを扱う。

<form action="survey.php" method="post">
    <p>
    Colors:
    <label><input type="radio" name="color" value="red">Red</label>
    <input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label>
    <input type="radio" name="color" value="green">Green
    Colors:
    <input type="checkbox" name="color" value="red">Red
    <input type="checkbox" name="color" value="blue">Blue
    <input type="checkbox" name="color" value="green">Green
    </p>

    <p><input type="submit" value="送信！"></p>
</form>

<input type="radio"><input type="checkbox">

複数の項目の中から選択するタイプのオブジェクトを作成する。

radioは選択項目が１つのラジオボタン、checkboxは複数選択が可能なチェックボックス。

name属性の値が同じものが同一のグループとして扱われる。

value属性の値はテキストボックスなどと異なり送信されるデータのみ、表示されるテキストはただの文字列としてタグの外に記述する。

checked属性の値にcheckedを入れることで最初から選択されている状態にすることができる。

<label>

フォームの部品と項目を一致させるのに用いるタグ。

例えば上記のラジオボタンやチェックボックスでは文字列はボタンとは別物として扱われる。

そのため文字部分をクリックしても選択されたことにはならない。

<label>で囲むことでこれらの部品と項目と１つにすることができる。

またfor属性の値でフォーム部品のidを指定することで内部の文字列と同一として扱うこともできる。

<form action="survey.php" method="post">
    <select name="color" size="5" multiple>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
    </select>
    <p><input type="submit" value="送信！"></p>
</form>

<select>

リストの中から選択する形のオブジェクトを作成する。

size属性の値が2以上であればスクロール式、そうでなければプルダウン式となる。

形式は異なるがラジオボックスやチェックボックスとの置き換えが可能。

multiple属性により複数選択が可能となる。

項目を内部の<option>タグにて指定する。

 

<option>

<select>タグの項目を示す。

タグで囲んだ部分が表示文字列、valueの値が送信する情報となる。

同一<select>内でグループを分けるのであれば<optgroup>タグで囲むこと。

ラジオボックスやチェックボックスと同様にchecked属性の値をcheckedとすることで最初から選択されている状態にすることができる。