HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのmultiple属性とは？複数選択を可能にする使い方を解説

HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性は、input要素またはselect要素にのみ適用できます。

基本構文

multiple属性の記述方法は以下のとおりです。

<tagname multiple></tagname>

使用例

ここでは、select要素にmultiple属性を指定した実際のコード例を見てみましょう。以下のサンプルでは、好きな科目を複数選択できるセレクトボックスを作成しています。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML multiple属性のデモ</h1>
<p>好きな科目を選択してください：</p>
<select multiple>
<option>物理</option>
<option>化学</option>
<option>生物</option>
<option>数学</option>
<option>ドイツ語</option>
</select>
</body>
</html>

実行結果

上記のコードを実行すると、複数の項目を選択可能なリストボックスが表示されます。Ctrlキー（Macの場合はCommandキー）を押しながらクリックすることで、複数の科目を同時に選択できます。

HTMLのmultiple属性とは？複数選択を可能にする使い方を解説

補足：input要素での活用

multiple属性は、<input type="file">や<input type="email">にも使用できます。例えば、ファイルアップロードフォームで<input type="file" multiple>と指定すれば、ユーザーは一度に複数のファイルを選択できるようになります。

  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以