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

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

HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。

特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。

multiple属性の主な特徴

  • fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。
  • emailタイプ：カンマ区切りで複数のメールアドレスを入力できます。
  • select要素：ドロップダウンリストで複数のオプションを選択できるようになります。

使用例

以下のコードを実行して、HTMLでのmultiple属性の使い方を確認してみましょう。この例では、複数のファイルをアップロードできるフォームを作成しています。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML multiple attribute</title>
    </head>
    <body>
        <form>
            <input type="file" name="name" multiple><br><br>
            複数のファイルを選択して、「送信」ボタンをクリックしてください。<br>
            <input type="submit" value="送信">
        </form>
    </body>
</html>

まとめ

multiple属性は、記述するだけで簡単に複数選択機能を実装できる便利な属性です。ファイルアップロードフォームやメールアドレス入力欄など、ユーザーの利便性を向上させたい場面でぜひ活用してみてください。

  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

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

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性は、input要素またはselect要素にのみ適用できます。基本構文multiple属性の記述方法は以下のとおりです。<tagname multiple></tagname>使用例ここでは、select要素にmultiple属性を指定した実際のコード例を見てみましょう。以下のサンプルでは、好きな科目を複数選択できるセレクトボックスを作成しています。<!DOCTYPE html> <html> <style> body {