Detailed explanation of the usage of option and optgruop tags in html form option menu

Use the option tag to define each item in a form control . The browser displays the content in the tag as an element in the menu or scrolling list of the tag. In this way, its content can only be plain text without any decoration.
valueAttribute

Use the value attribute to set a value for each option. When the user selects the option, the browser will send it to the server. If the value attribute is not specified, the value of the option will be set to the contents of the tag. Take a look at the HTML options in the following example:

coption value=dog>dog <option>dog

Both have the same value. The first one outputs the value set in the tag, and the second one is set by default to the content of the tag itself: "dog"

selected attribute

By default, all options in multi-select tags are unchecked state, so when the client raises the form to the server, these options are not included in the parameter list. By including the selected attribute in the tag, one or more options can be preselected and then deselected by the user.

The HTML version of the selected attribute has no value. The XHTML version has the value selected=selected. If no option is explicitly pre-selected, the radio's

tag will pre-select the first option.

label attribute

Normally, when the element is displayed to the user, the content in the tag is used to generate the element's tag. But if the label attribute is provided, its value must be used as the label.

Tag

Option menus in forms can be very long, making them difficult to display and use. In this case, it can be helpful to group some related options, and then present these groups to the user as a nested set of cascading menus. is a newly introduced tag in HTML 4.0. Although its use is limited, it provides this functionality for HTML and XHTML forms.

The tag, and it can only contain the < tag. The browser generates submenus for each tag in the main menu. For example, in HTML, you can use to display a form menu that is arranged by place name!

<select name=state>
 <optgroup label=龙岗区>
      <option>布吉镇
      <option>坂田镇
</optgroup>
<optgroup label=宝安区>
      <option>龙华镇
      <option>西乡镇
</optgroup>
</select>

Copy after login

Since no browser fully supports the

tag (general browsers will simply display them as a scrolling menu), we cannot show readers this What the menu looks like. However, they may be very similar to the familiar drop-down menus, which are a common feature of most graphical user interfaces. When selected with the mouse or keyboard, leads to one or more menus. For example, in our example of "state," there might be submenus labeled "Northeast" and "South," and each submenu will display a list of the states it contains. Unfortunately, the biggest obstacle of the tag is that it cannot be nested, which limits there to only one layer of submenus. However, in future versions of XHTML, this limitation may be exceeded. Use the label attribute to define the title of an

Organize elements related to

in the menu.

The above is the detailed content of Detailed explanation of the usage of option and optgruop tags in html form option menu. For more information, please follow other related articles on the PHP Chinese website!