チェックボックスを使ったリスト

チェックボックスを使った複数選択可能なリストは、ユーザーがリストの項目を複数選択できるようにする場合に最適です。HTMLでは、<input type="checkbox">タグを使用してチェックボックスを作成できます。以下の例を見てみましょう。

<form>
    <label><input type="checkbox" name="item" value="apple"> りんご</label><br>
    <label><input type="checkbox" name="item" value="banana"> バナナ</label><br>
    <label><input type="checkbox" name="item" value="cherry"> さくらんぼ</label><br>
    <input type="submit" value="送信">
</form>

このコードでは、<label>タグを使用してチェックボックスにラベルを付けています。また、<input type="checkbox">タグにnameとvalue属性を設定し、ユーザーがどの項目を選択したかをフォーム送信時に識別できるようにしています。

フォームを送信すると、選択された項目がサーバーに送信されます。

セレクトボックスを使ったリスト

セレクトボックス（ドロップダウンメニュー）を使った複数選択可能なリストも、複数の選択肢を提供する際に非常に便利です。<select>タグにmultiple属性を加えることで、複数項目を選択できるようになります。以下の例を見てみましょう。

<form>
    <label for="fruits">好きな果物を選んでください</label><br>
    <select name="fruits" id="fruits" multiple size="5">
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
        <option value="cherry">さくらんぼ</option>
        <option value="grape">ぶどう</option>
        <option value="orange">オレンジ</option>
    </select><br>
    <input type="submit" value="送信">
</form>

この例では、<select>タグにmultiple属性が追加されています。これにより、ユーザーはCtrlキーまたはShiftキーを押しながら、複数の果物を選択できるようになります。size属性で表示される項目の数を指定できます。

送信ボタンを押すと、選択された項目の情報がフォーム送信によってサーバーに送信されます。

まとめ

HTMLでは、複数選択可能なリストを作成する方法として、主にチェックボックスとセレクトボックスの2つの方法があります。チェックボックスを使用したリストは、ユーザーが複数の項目を自由に選択できる場合に適しており、セレクトボックスを使用したリストは、選択肢が多くなる場合に便利です。

どちらの方法も、フォームで使用する際には、選択された項目をサーバーに送信することができます。状況に応じて適切な方法を選んで、ユーザーインターフェースを設計しましょう。