html5如何实现文本框下拉选项功能

可以使用HTML5 list 属性。list 属性需要应用到 input 框上，然后内容写一个自定义的 id

然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。

在 datalist 标签下放列表项，每个列表项用 option 元标签来表示，option 标签里用 value 属性填写内容，label 属性来做提示。

下面是示例代码：

<form action="">

<input type="text" list="url_list" name="text" />

<input type="submit" />

</form>

<datalist id="url_list">

<option label="HZ赫兹工作室" value="http://weibo.com/hz421247910" />

<option label="提示1" value="列表项1" />

<option label="提示2" value="列表项2" />

<option label="" value="列表项3" />

</datalist>

HTML5之前一般使用select标签或者div+js实现

首先，你用了什么框架了吗？如果没有的话像你这样写就是这么显示的。

一般默认情况下，下拉框可以通过 h5标签 <select>和 <option>来实现:

<select>

<option value="值">选项内容1</option>

<option value="值">选项内容2</option>

<option value="值">选项内容3</option>

</select>

或者你直接使用ul li 来写，然后通过 css 和 js 来实现。

• h5 的语法

o DOCTYPE 可以使用小写，

o 单标签没有结束标签，

o 可以省略结束的标签: li、dt、dd、p、option、colgroup(用于对表格中的列进行组合，以便对其进行格式化)、thead、tbody、tfoot、 tr、td、tho ，

可以省略的标签 html head body tbody，

• 新增标签特点：语义化，ie8 及以下不生效

o header 标签头部，

o section 划分板块，

o article 与上下文无关的内容，

o aside 可以放侧边工具栏，

o nav 导航，

o figure 和 figcaption 类似于 dl 标签，

o footer 底部，

o main 比较重要的部分，

o mark 标记默认是黄色的高亮，可以修改样式内联10，

• 多媒体标签，

o 音频

内联，

controls 控件，autoplay 自动播放，谷歌不支持，火狐静音下支持， ie 支持，loop 循环播放，muted 静音播放，

o 视频

controls 控件autoplay: 自动播放，谷歌和火狐静音下支持 ，ie 支持，muted 静音播放，loop 循环，poster 未播放前显示的内容，

• 表单新增

o type 类型，

email 邮件格式，

number 限制输入是数字，

 min 最小值，

 max 最大值，

 step 每次增加的数，

url 地址路径或者网址都可以，

color 色块，

time 时间，

range 滑动条，

o 属性

required 必填，

placeholder 提示信息，

autocomplete 自动提示，

 on 提示 ，

off 不提示，

autofocus 自动聚焦，

只能写一个multiple ，

多选pattern ，

正则限制输入的内容类型限制输入 0-9 之间的数，

以上是我个人对 H5新增内容的总结，希望对大家有所帮助。

---