How to set up html drop-down list box

HTML drop-down list box is one of the commonly used interactive elements in web pages, which allows users to select one or more predefined options. In this article, we will introduce how to set up an HTML drop-down list box, including creating a drop-down list box, adding options, setting default options, etc.

1. Create a drop-down list box

The first step in using an HTML drop-down list box is to create a tag, as shown below:

<select name="fruit">
</select>

This code creates There is a drop-down list box named "fruit", but there are no options in it yet.

2. Add options

Next, we need to add options in the tag. You can use the tag to define each option, as shown below:

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

Each tag contains two parts: display text and value. Display text refers to the text displayed in the drop-down list box, and value refers to the value passed to the server after the option is selected.

3. Set default options

By default, the first option in the drop-down list box will be selected. If you want to set other options as the default option, you can use the selected attribute in the tag, as shown below:

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
  <option value="orange">橙子</option>
</select>

In this example, the "Banana" option is set as the default option.

4. Set up multiple selections

If you want users to be able to select multiple options, you can use the multiple attribute in the tag, as shown below:

<select name="fruit" multiple>
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
  <option value="orange">橙子</option>
</select>

Multiple options can be selected when the user holds down the "Ctrl" key and clicks on an option. The server can receive values ​​for multiple options.

5. Set up form submission

When the user selects one or more options, the values ​​of these options need to be submitted to the server. To do this, you need to use the name attribute in the tag to associate the drop-down list box with other elements in the form, as shown below:

苹果 香蕉 橙子

In this example, the other elements in the form do not are displayed, but they can be added to forms in a similar manner for more complex functionality.

In general, HTML drop-down list box is one of the commonly used interactive elements in web pages. After understanding how to create, add options, set default options, set multi-select and set form submission, you can Customize the drop-down list box according to your needs so that users can make selections conveniently.

The above is the detailed content of How to set up html drop-down list box. For more information, please follow other related articles on the PHP Chinese website!