HTML之表单form的select标签

原创已于 2022-02-17 15:06:11 修改 · 置顶 · 2.4w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #vue.js

于 2018-07-31 21:19:03 首次发布

HTML 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML表单中的各种元素，包括input、select、option、textarea和optgroup等标签的使用方法及属性，如name、value、selected等，并通过实例展示了如何创建下拉菜单和分组选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

form标签中，以下标签实现表单元素添加：
<input>表单输入标签
<select>下拉菜单和列表标签
<option>下拉菜单和列表项目标签
<textarea>文字域标签
<optgroup>下拉菜单和列表项目分组标签

<select/>标签，属性：name，size初始下拉选项的个数，multiple（按住ctrl可以多选）
option标签属性：value定义送往服务器的选项值，selected设置选项的初始选中状态
下拉选择框
<select name="..">
<option value="..." selected>选项1</option>
<option value="...">选项2</option>
.....
</select>

分组下拉菜单
<select name="">
<optgroup label="组1">
<option value="...">选项1</option>
<option value="...">选项2</option>
....
</optgroup>
<optgroup label="组2">
<option value="...">选项3</option>
<option value="...">选项4</option>
....
</optgroup>
....
</select >

代码实例：

<select name="city" >
                        <optgroup label="华北">
                        <option value="beijing" selected>北京</option>
                        <option value="tianjin">天津</option>
                        <option value="hebei">河北</option>
                        </optgroup>
                        <optgroup label="华南">
                        <option value="shanghai">上海</option>
                        <option value="shenzhen">深圳</option>
                        <option value="guangzhou">广州</option>
                        </optgroup>
                    </select>

效果：