表单下拉列表的两种形式

学习了表单更进一步的功能后,我总结一下我的思路,包括容易犯错或者容易忽略的地方。

第一个要注意的是autocomplete属性,这个属性类似于autofocus,只需要在input元素里面加上,在表单提交后会记录输入过的信息,在登录注册页面的账号项十分实用。

这个属性只有一个需要注意的地方,就是它所在的input元素必须有name属性声明,否则不会生效。这个我目前也不知道原因,不过表单大多数都有有id和name属性,问题不大。

第二个是关于下拉列表的两种形式。第一种就是传统的下拉列表框,代码如下

<select size=1 >

<option>选项一</option>

<option>选项二</option>

<option selected >选项三</option>
</select>

</select>

注意事项1.虽然是表单元素,但是标签不是input

2.默认是显示选项一,当在option里面加入select后,会默认显示选项三

3.size表示框内显示的最大选项数,默认是1,若选项过多要给选项分组,可以用optgroup标签包含option标签实现。

下拉列表框注重的是选择,那么是否还有一种下拉列表可以供用户选择的同时,也可以在上面的文本框区域自主输入信息?下面介绍第二种下拉列表。

<datalist>就可以非常方便在表单文本框内嵌入下拉列表,这样用户不仅可以输入自己想输入的信息,也可以在下拉列表中选择页面推荐的选项。

<

<input type=text list=list1>

<datalist id=list1>

<option>推荐选项1</option>

<option>推荐选项2</option>

</datalist>

注意事项:input的list属性对应datalist的id属性(保持一致)

原文地址:https://www.cnblogs.com/deoem/p/5735745.html