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的值。



全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.