1. 複数選択とリスト
HTMLフォームは、ユーザーとウェブページがやり取りできる多くの機能を提供してくれるよ。テキストフィールドやボタンだけじゃなくて、複数選択やリスト要素を使って、もっと柔軟で便利なインターフェイスを作ることができるんだ。今日はそれを学ぼう！
HTMLフォームでは、リストから選択できる要素を作成するいくつかの方法があるよ。一番よく使われるのは、<select>と<option>、それからチェックボックスとラジオボタンだね。
ドロップダウンリスト: <select>と<option>
<select>タグはドロップダウンリストを作成し、<option>はその中に項目を追加するために使うよ。ユーザーはリストから1つまたは複数の項目を選択できるんだ。
単一選択: デフォルトでは<select>は1つの項目だけ選べるよ。
HTML
<label for="country">国を選択してください:</label>
<select id="country" name="country">
<option value="ru">ロシア</option>
<option value="us">アメリカ</option>
<option value="de">ドイツ</option>
</select>
HTML
<label for="country">国を選択してください:</label>
<select id="country" name="country">
<option value="ru">ロシア</option>
<option value="us">アメリカ</option>
<option value="de">ドイツ</option>
</select>
複数選択: multiple属性を追加すると、Ctrlキー（Windows）またはCmdキー（Mac）を押しながらクリックすることで、複数の項目を選択できるんだ。
HTML
<label for="languages">言語を選択してください:</label>
<select id="languages" name="languages" multiple>
<option value="ru">ロシア語</option>
<option value="en">英語</option>
<option value="de">ドイツ語</option>
</select>
HTML
<label for="languages">言語を選択してください:</label>
<select id="languages" name="languages" multiple>
<option value="ru">ロシア語</option>
<option value="en">英語</option>
<option value="de">ドイツ語</option>
</select>
この場合、複数選択された要素のデータは値の配列としてサーバーに送信されるよ。
チェックボックス: <input type="checkbox">
チェックボックスは、リストから1つ以上の項目を選択するために使うんだ。それぞれのチェックボックスは<input type="checkbox">タグで作成される。
HTML
<label><input type="checkbox" name="interests" value="sports"> スポーツ</label>
<label><input type="checkbox" name="interests" value="music"> 音楽</label>
<label><input type="checkbox" name="interests" value="travel"> 旅行</label>
HTML
<label><input type="checkbox" name="interests" value="sports"> スポーツ</label>
<label><input type="checkbox" name="interests" value="music"> 音楽</label>
<label><input type="checkbox" name="interests" value="travel"> 旅行</label>
もしすべてのチェックボックスに同じname属性があると、フォーム送信時にそれぞれ選択されたチェックボックスの値が配列として送信されるよ。
GO TO FULL VERSION