表单元素之select、datalist元素

来源：互联网发布：f检验软件编辑：程序博客网时间：2024/05/01 12:41

Select元素用来建立一个下拉菜单选项列表，不仅可以在表单中使用，还可以在其它块元素和内联元素中使用。

Select只是一个下拉列表，其具体列表项要通过option元素建立

Option元素用来建立一个选项，即下拉列表的一个菜单项

Optgroup元素用来对option元素进行组合分组

Size用来定义列表中显示的列表项

Multiple属性用来定义是否可以多选

可以添加disabled属性和autofocus属性

Datalist元素是html5新增的元素，用来建立一个选项列表，datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项，通常与input元素配合使用

Html5新增表单属性

Form属性：将表单外的内容与表单进行关联（input属性）

Novalidate属性：设置数据提交时不进行验证（form属性）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>select、datalist元素</title></head><body><form action="" id=""><h3>选择课程</h3><select name="" id="select1" autofocus="" size="2" multiple="" disabled="" name="seelct1"><optgroup label="前端"><option value="html">html</option><option value="javascript">js</option><option value="css">css</option><option value="jq">jq</option></optgroup><optgroup label="后端"><option value="java">java</option><option value="php">php</option><option value="c++">c++</option><option value="c#">c#</option></optgroup></select>  <input type="submit"></form><hr><form action="" id="select2"><input type="text" list="mylist"  ><datalist id="mylist"><option value="html">html</option><option value="CSS">CSS</option><option value="javascript">javascript</option></datalist><input type="submit"></form>用户名：<input type="text" form="select2" name="user"><br><hr><h4>novalidate属性，不会对错误输入的内容进行验证</h4><form action="" novalidate="novalidate"><label>用户名：<input type="text" name="name1"></label><label>邮箱：<input type="email" name="mail"></label><input type="submit"></form><hr><h4>input的form属性，与表单关联</h4><form action="" id="id1"><select name="" id=""><option value="html">html</option><option value="css">css</option><option value="javascript">javascript</option><input type="submit"></select></form>用户名：<input type="text" form="id1" name="name"></body></html>

阅读全文

0 0