Home > Article > Web Front-end > How to use the select tag in HTML

How to use the select tag in HTML

不言Original: 2018-11-21 11:03:3412365browse

The select tag in HTML can create a public selection box in the items on the form. This article will give you a detailed introduction to the usage of the select tag.

Let’s first take a look at what is the select tag?

The select tag is the tag used to create a selection box. Use the select tag when you want the user to select from a drop-down menu item.

You can use the select tag as part of a form, or you can use JavaScript to get the value of the selected item.

How to use the select tag?

To use select tags, you can create a drop-down menu by adding option tags between the select tags.

<select name="name" id="name">
  <option value="name1">张三</option>
  <option value="name2">李四</option>
  <option value="name3">王二</option>
</select>

Complex usage of select tags

Code example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
</head>
<body>
<label>php中文网视频课程选择：
  <select name="program" multiple size="4">
    <optgroup label="application">
      <option value="wordpress">前端视频课程</option>
      <option value="webapp">php视频教程</option>
      <option value="laravel">bootstrap视频课程</option>
    </optgroup>
    <optgroup label="mobile">
      <option value="iphone">iPhone</option>
      <option value="android">Android</option>
      <option value="unity">Unity</option>
    </optgroup>
  </select>
</label>
</body>
</html>

Instructions:

If you specify multiple attributes, you can use multiple options. If not specified, only one selection is made.

Since the size attribute is specified as size="4", only 4 lines can be displayed.

You can also scroll to show all options.

The label specified by cannot be selected by itself, but it can be displayed as a group label.

Let’s take a look at an example finally:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <form action="#" method="GET">
      <select name="name" id="name">
        <option value="who">发消息给谁？</option>
        <option value="name1">张三</option>
        <option value="name2">李四</option>
        <option value="name3">王二</option>
        <option value="name4">陈五</option>
        <option value="name5">赵六</option>
      </select>
      <input type="submit" name="submit" value="发送" />
    </form>
  </body>
</html>

The effect on the browser is as follows:

How to use the select tag in HTML

The above is the summary of this article That’s all. For more information about HTML, you can pay attention to the HTML video tutorial column on the php Chinese website! ! !

The above is the detailed content of How to use the select tag in HTML. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript html select

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set the input text box of a form to be non-editableNext article：How to set the input text box of a form to be non-editable

See more

How to use the select tag in HTML

Related articles