HTML |<input> 列表属性

The <input> element is commonly used in HTML forms to create various types of input fields, such as text, password, checkbox, radio buttons, etc. The input fields allow users to enter data or make selections.

One of the important features of the <input> element is the ability to create lists, which allows users to select one or more options from a predefined set of choices. In this article, we will explore the various list attributes available for the <input> element.

1. Type Attribute

The type attribute specifies the type of input field to be created. When creating a list, the type attribute should be set to one of the following values:

• checkbox: Creates a checkbox for each item in the list. Users can select multiple options.
• radio: Creates a radio button for each item in the list. Users can select only one option.

<input type="checkbox" name="fruit" value="apple"> Apple<br>
<input type="checkbox" name="fruit" value="banana"> Banana<br>
<input type="checkbox" name="fruit" value="orange"> Orange<br>

<input type="radio" name="color" value="red"> Red<br>
<input type="radio" name="color" value="blue"> Blue<br>
<input type="radio" name="color" value="green"> Green<br>

2. List Attribute

The list attribute refers to a <datalist> element that contains predefined options for an input field. It provides a dropdown menu of options to choose from.

<input list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Orange">
</datalist>

Here, the list attribute is set to "fruits", which is the id of the <datalist> element. The options within the <datalist> element will be available as suggestions when the user interacts with the input field.

3. Multiple Attribute

The multiple attribute is used with the type="select" input field to allow users to select multiple options. When the multiple attribute is present, users can select multiple items by holding down the Ctrl (or Command) key while clicking on the options.

<select name="fruits" multiple>
  <option value="Apple">Apple</option>
  <option value="Banana">Banana</option>
  <option value="Orange">Orange</option>
</select>

Here, the multiple attribute indicates that the user can select multiple fruits from the dropdown list.

4. Summary

In this article, we explored the various list attributes available for the <input> element. These attributes allow us to create different types of lists such as checkboxes, radio buttons, dropdown menus, and multi-select dropdowns. By utilizing these attributes effectively, programmers can create user-friendly forms that enhance the user experience and provide a seamless data input process.