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

HTMLで複数の値の入力を許可する方法｜multiple属性の使い方を解説

HTMLでは、multiple属性を使用することで、ユーザーが複数の値を入力できるように指定できます。この属性は、ファイルアップロード用の <input type="file"> やメールアドレス入力用の <input type="email"> などに指定でき、また <select> 要素にも適用可能です。

multiple属性の基本

multiple属性は論理属性（ブール型属性）のため、値を指定する必要はなく、タグ内に記述するだけで有効になります。

  • ファイル選択： Ctrlキー（MacではCommandキー）を押しながらクリックすることで、複数のファイルを選択できます。
  • メールアドレス入力： カンマ区切りで複数のメールアドレスを入力できます。
  • セレクトボックス： リストから複数の項目を選択できるようになります。

実装例：複数ファイルのアップロード

以下のコードは、multiple属性を使って複数ファイルのアップロードを可能にするシンプルな例です。

<!DOCTYPE html>
<html>
   <head>
      <title>複数ファイルのアップロード</title>
   </head>
   <body>
      <form>
         <label for="files">ファイルを選択：</label>
         <input type="file" id="files" name="name" multiple><br><br>
         複数のファイルを選択したら、「送信」ボタンをクリックしてください。<br>
         <input type="submit" value="送信">
      </form>
   </body>
</html>

コードのポイント

<input type="file"> に multiple を追加するだけで、ファイル選択ダイアログから複数のファイルを同時に選択できるようになります。選択されたファイルは、JavaScriptの FileList オブジェクトやサーバーサイドのスクリプトで受け取ることができます。

まとめ

multiple属性を活用すれば、追加のライブラリや複雑なスクリプトなしに、HTMLだけで複数値の入力を実現できます。ファイルアップロードフォームやメールフォームなど、ユーザーの利便性を高めたい場面でぜひ活用してみてください。

  1. 家・職場・学校で役立つ！生活を整理整頓するおすすめアプリ12選

    もっと整理整頓された生活を送りたいと思っていませんか？仕事、家事、家族との時間――そのバランスを取るのに苦労していませんか？ご安心ください。そんな悩みを解決してくれるアプリが存在します。 しかも、1つだけではありません。今回は、家庭でも、職場でも、学校でも役立つ生産性向上アプリの厳選リストをご紹介します。これらを活用すれば、あなたも整理整頓の達人になれるはずです。 家庭での整理整頓に役立つアプリ 仕事ではルーティンが確立していても、家庭でのことは整理して秩序を保つのが意外と難しいものです。家事をシンプルにし、時間を有効に使いたいなら、以下のアプリが力になってくれます。 FamilyWall（

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

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切