HTML表单元素select下拉菜单标签,及实例在线编辑
HTML表单中的下拉菜单select也是web前端的实际开发过程中常用到的一个表单元素,比如以前的自媒体平台会提供一个下拉菜单,里面包含了各个行业的名称,供创作者选择创作的领域等等。
HTML下拉菜单标签
<select></select>
注意:需要闭合标签。
下拉菜单标签实例代码,及在线编辑器
<select>
</select>
代码解析
如上代码,在线运行之后,只会得到一个带有下拉符号的框框,那是因为select只是定义了一个下拉菜单,并没有定义下拉菜单中的内容,那么该如何为select添加内容呢?
下拉菜单select的选项标签
HTML中为下拉菜单定义内容,需要用到下拉菜单的选项标签:
<option></option>
select选项标签option实例代码,及在线编辑器
<select>
<option value='HTML教程'>HTML教程</option>
<option value='JS教程' selected >JS教程</option>
<option value='python教程'>python教程</option>
</select>
实例解析
1、下拉菜单的选表标签中的value属性往往是跟着option标签一同出现的,因为设置了value的值,就可以很方便地通过JS的代码来获取用户在下拉菜单中选择的选项了;2、有没有注意到,JS教程选项的option标签中多了个selected的属性值,正是因为设置了这个属性,浏览器渲染下拉菜单的时候,下拉菜单的默认选项就是该选项了,如果不设置selected值,则默认的值为排在第一个的option的值。