用H5实现下拉框

来源:互联网 发布:麻瓜编程第一本python 编辑:程序博客网 时间:2024/06/11 05:02
可以使用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>
原创粉丝点击