Hướng dẫn which form element is used for multiple selection in html? - phần tử biểu mẫu nào được sử dụng cho nhiều lựa chọn trong html?

Mối quan tâm tiếp cận

Cung cấp hướng dẫn để giúp người dùng hiểu cách hoàn thành biểu mẫu và sử dụng các điều khiển biểu mẫu riêng lẻ. Cho biết bất kỳ đầu vào yêu cầu và tùy chọn, định dạng dữ liệu và thông tin liên quan khác. Khi sử dụng thuộc tính multiple, thông báo cho người dùng rằng nhiều giá trị được phép và cung cấp hướng dẫn về cách cung cấp nhiều giá trị, chẳng hạn như "địa chỉ email riêng biệt với dấu phẩy."

Cài đặt

<select multiple name="dwarfs" id="dwarfs">
  <option>Grumpyoption>
  <option>Happyoption>
  <option>Sleepyoption>
  <option>Bashfuloption>
  <option>Sneezyoption>
  <option>Dopeyoption>
  <option>Docoption>
select>

Ví dụ

Đầu vào email

<label for="emails">Who do you want to email?label>
<input
  type="email"
  multiple
  name="emails"
  id="emails"
  list="dwarf-emails"
  required
  size="64" />

<datalist id="dwarf-emails">
  <option value="">Grumpyoption>
  <option value="">Happyoption>
  <option value="">Sleepyoption>
  <option value="">Bashfuloption>
  <option value="">Sneezyoption>
  <option value="">Dopeyoption>
  <option value="">Docoption>
datalist>

input:invalid {
  border: red solid 3px;
}

Nếu và chỉ khi thuộc tính multiple được chỉ định, giá trị có thể là danh sách các địa chỉ e-mail được phân tách bằng dấu phẩy được hình thành đúng. Bất kỳ dấu vết nào và khoảng trắng hàng đầu đều được xóa khỏi mỗi địa chỉ trong danh sách. Nếu thuộc tính

<input type="file" multiple name="uploads" id="uploads" />

Một số trình duyệt hỗ trợ sự xuất hiện của

<select multiple name="dwarfs" id="dwarfs">
  <option>Grumpyoption>
  <option>Happyoption>
  <option>Sleepyoption>
  <option>Bashfuloption>
  <option>Sneezyoption>
  <option>Dopeyoption>
  <option>Docoption>
select>

<label for="emails">Who do you want to email?label>
<input
  type="email"
  multiple
  name="emails"
  id="emails"
  list="dwarf-emails"
  required
  size="64" />

<datalist id="dwarf-emails">
  <option value="">Grumpyoption>
  <option value="">Happyoption>
  <option value="">Sleepyoption>
  <option value="">Bashfuloption>
  <option value="">Sneezyoption>
  <option value="">Dopeyoption>
  <option value="">Docoption>
datalist>

đầu vào tập tin

Khi multiple được đặt trên loại đầu vào tệp, người dùng có thể chọn một hoặc nhiều tệp:

<form method="post" enctype="multipart/form-data">
  <p>
    <label for="uploads"> Choose the images you want to upload: label>
    <input
      type="file"
      id="uploads"
      name="uploads"
      accept=".jpg, .jpeg, .png, .svg, .gif"
      multiple />
  p>
  <p>
    <label for="text">Pick a text file to upload: label>
    <input type="file" id="text" name="text" accept=".txt" />
  p>
  <p>
    <input type="submit" value="Submit" />
  p>
form>

Lưu ý sự khác biệt về ngoại hình giữa ví dụ với multiple và đầu vào

<label for="emails">Who do you want to email?label>
<input
  type="email"
  multiple
  name="emails"
  id="emails"
  list="dwarf-emails"
  required
  size="64" />

<datalist id="dwarf-emails">
  <option value="">Grumpyoption>
  <option value="">Happyoption>
  <option value="">Sleepyoption>
  <option value="">Bashfuloption>
  <option value="">Sneezyoption>
  <option value="">Dopeyoption>
  <option value="">Docoption>
datalist>

Khi biểu mẫu được gửi, nếu chúng tôi đã sử dụng

<label for="emails">Who do you want to email?label>
<input
  type="email"
  multiple
  name="emails"
  id="emails"
  list="dwarf-emails"
  required
  size="64" />

<datalist id="dwarf-emails">
  <option value="">Grumpyoption>
  <option value="">Happyoption>
  <option value="">Sleepyoption>
  <option value="">Bashfuloption>
  <option value="">Sneezyoption>
  <option value="">Dopeyoption>
  <option value="">Docoption>
datalist>

<label for="emails">Who do you want to email?label>
<input
  type="email"
  multiple
  name="emails"
  id="emails"
  list="dwarf-emails"
  required
  size="64" />

<datalist id="dwarf-emails">
  <option value="">Grumpyoption>
  <option value="">Happyoption>
  <option value="">Sleepyoption>
  <option value="">Bashfuloption>
  <option value="">Sneezyoption>
  <option value="">Dopeyoption>
  <option value="">Docoption>
datalist>

<label for="emails">Who do you want to email?label>
<input
  type="email"
  multiple
  name="emails"
  id="emails"
  list="dwarf-emails"
  required
  size="64" />

<datalist id="dwarf-emails">
  <option value="">Grumpyoption>
  <option value="">Happyoption>
  <option value="">Sleepyoption>
  <option value="">Bashfuloption>
  <option value="">Sneezyoption>
  <option value="">Dopeyoption>
  <option value="">Docoption>
datalist>

lựa chọn

Thuộc tính multiple trên phần tử

<input type="file" multiple name="uploads" id="uploads" />

<input type="file" multiple name="uploads" id="uploads" />

<select multiple name="dwarfs" id="dwarfs">
  <option>Grumpyoption>
  <option>Happyoption>
  <option>Sleepyoption>
  <option>Bashfuloption>
  <option>Sneezyoption>
  <option>Dopeyoption>
  <option>Docoption>
select>

<form method="get" action="#">
  <p>
    <label for="dwarfs">Select the dwarf woodsman you like:label>
    <select multiple name="dwarfs" id="dwarfs">
      <option>option>
      <option>option>
      <option>option>
      <option>option>
      <option>option>
      <option>option>
      <option>option>
    select>
  p>
  <p>
    <label for="favoriteOnly">Select your favorite:label>
    <select name="favoriteOnly" id="favoriteOnly">
      <option>option>
      <option>option>
      <option>option>
      <option>option>
      <option>option>
      <option>option>
      <option>option>
    select>
  p>
  <p>
    <input type="submit" value="Submit" />
  p>
form>

Lưu ý sự khác biệt về ngoại hình giữa hai điều khiển hình thức.

/* uncomment this CSS to make the multiple the same height as the single */

/*
select[multiple] {
  height: 1.5em;
  vertical-align: top;
}
select[multiple]:focus,
select[multiple]:active {
  height: auto;
}
*/

Có một vài cách để chọn nhiều tùy chọn trong phần tử

<input type="file" multiple name="uploads" id="uploads" />

<input type="file" multiple name="uploads" id="uploads" />

Xem thêm