📜  如何指定用户可以在 HTML5 的 input 元素中输入多个值?(1)

📅  最后修改于: 2023-12-03 15:09:09.532000             🧑  作者: Mango

如何指定用户可以在 HTML5 的 input 元素中输入多个值?

在 HTML5 中,input 元素可以使用属性 multiple 来允许用户在输入框中输入多个值。这适用于以下几种类型的输入框:

  • <input type="email">
  • <input type="file">
  • <input type="number">
  • <input type="text">
  • <input type="url">
  • <select>
示例代码

以下示例代码演示了如何在 HTML5 中的 input 元素中启用多个值:

<label for="input-email">Email:</label>
<input id="input-email" type="email" name="email" multiple>

<label for="input-file">File:</label>
<input id="input-file" type="file" name="file" multiple>

<label for="input-number">Number:</label>
<input id="input-number" type="number" name="number" multiple>

<label for="input-text">Text:</label>
<input id="input-text" type="text" name="text" multiple>

<label for="input-url">URL:</label>
<input id="input-url" type="url" name="url" multiple>

<label for="select-multiple">Select:</label>
<select id="select-multiple" name="select[]" multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
效果预览

上述示例代码运行后,会在页面上展示多个支持多个输入值的输入框和下拉菜单。

对于支持多个输入值的 input 元素,用户可以在输入框中输入多个值,每个值之间用逗号或空格分隔。对于下拉菜单,用户可以按住 Ctrl(Windows)或 Command(Mac)键来选择多个选项。

总结

在 HTML5 中,通过为 input 元素的 multiple 属性设置值为 multiple,可以为用户提供输入多个值的功能。开发者可以根据需求选择使用不同类型的多值输入框来满足用户需求。