HTML <option>标签 value 属性

  HTML <option> 标签

option标签的value属性是用于传送到服务端的值。服务端根据vlaue来获取。在开始标签 <option> 与结束标签 </option> 之间的内容是列表显示的内容。下拉列表显示的值和value里面的值可以一样，也可以是不一样的。<option>标签需要被嵌套，可以嵌套于<select>标签。在HTML5之后，<option>也可以嵌套于<datalist>标签。

select标签案例

以下使用的是<option>嵌套到<select>标签，形成表单常见的下拉框。

后端前端样式脚本数据库

<select name="ming">
<option value="PHP" >后端</option>
  <option value="HTML" >前端</option>
  <option value="CSS" >样式</option>
  <option value="JavaScript" >脚本</option>
  <option value="MYSQL">数据库</option>
</select>

下拉列表

value不是必须的，在没有value的情况下option开闭标签之间的值会代替value值。

无value值

在无value的情况下，服务端同意可以通过value获取到数据，不过获取到的数据就是option开闭标签之间的值。

后端前端样式脚本数据库

<select name="ming">
<option >后端</option>
  <option >前端</option>
  <option>样式</option>
  <option >脚本</option>
  <option >数据库</option>
</select>

运行代码

无option开闭标签之间的值

在<select>标签下的option不能没有开闭标签之间的值，否则不能显示，但服务端能接受。<datalist>标签下可以

<select name="ming">
<option value="PHP" ></option>
  <option value="HTML" ></option>
  <option value="CSS" ></option>
  <option value="JavaScript" ></option>
  <option value="MYSQL"></option>
</select>

运行代码

语法

<option value="值"></option>

datalist标签案例

datalist标签是需要结合input元素的输入框的，就是在输入框加上下拉框功能。datalist标签下的option标签可以没有option闭标签。

写法一：

<input list="lists" name="ming">
<datalist id="lists">
  <option value="PHP">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="MYSQL">
</datalist>

写法二:

<input list="lists" name="ming">
<datalist id="lists">
  <option value="PHP" ></option>
  <option value="HTML" ></option>
  <option value="CSS" ></option>
  <option value="JavaScript" ></option>
  <option value="MYSQL"></option>
</datalist>

运行代码

无value值

在无value的情况下，服务端同意可以通过value获取到数据，不过获取到的数据就是option开闭标签之间的值。

<input list="lists" name="ming">
<datalist id="lists">
<option >后端</option>
  <option >前端</option>
  <option >样式</option>
  <option >脚本</option>
  <option >数据库</option>
</datalist>

运行代码

语法

<option value="值">

或

<option value="值"></option>

支持浏览器