表单元素之select、datalist元素

最新推荐文章于 2022-04-22 16:50:22 发布

yin_991

最新推荐文章于 2022-04-22 16:50:22 发布

阅读量1.3k

点赞数 3

文章标签： html5 select 表单

本文链接：https://blog.youkuaiyun.com/yin_991/article/details/78380561

版权

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>