HTML5之智能表单

最新推荐文章于 2024-07-15 05:18:03 发布

Everything1209

最新推荐文章于 2024-07-15 05:18:03 发布

阅读量707

点赞数

CC 4.0 BY-SA版权

分类专栏： Html5/CSS

本文链接：https://blog.youkuaiyun.com/everything1209/article/details/45770723

Html5/CSS 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML5中各种智能表单的使用方法及规范，包括输入类型、属性和新标签等，旨在帮助开发者更高效地创建交互性强、用户体验良好的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
	<head></head>
	<body>
		<form action="http://localhost/test.php" method="post" id="register"></form>
		
		<input type="text" name="user" value="" form="register" />
		<input type="password" name="pwd" value="" form="register" />
		<select name="year" form="register">
			<option value="1970">1970</option>
			<option value="1980">1980</option>
			<option value="1990">1990</option>
		</select>
		<input type="submit" value="注册" form="register" />
		<hr />
		默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" form="register" /><br />
		邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />
		URL：<input type="url" name="url" value="" form="register" /><br />
		DATE:<input type="date" name="riqi" value="" form="register" /><br />
		TIME：<input type="time" name="shijian" value="" form="register" /><br />
		Month：<input type="month" name="yue" value="" form="register" /><br />
		WEEK：<input type="week" name="zhou" value="" form="register" /><br />
		数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />
		滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />
		搜索：<input type="search" name="sousuo" value="" form="register" results="n"  /><br />
		颜色：<input type="color" name="yanse" value="" form="register" /><br />
		<hr />
		自动填充表单<br />
		<input type="text" name="auto" value="" list="movie" />
		<datalist id="movie">
			<option>人在囧途</option>
			<option>车在囧途</option>
			<option>泰囧</option>
		</datalist>
		<hr />
		输出表单output<br />
		<form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
			<input type="number" name="no1" value="" />
			<input type="number" name="no2" value="" />
			<output name="result"></output>
		</form>
		
	</body>
</html>

智能表单的使用和规范

Type="email"	限制用户输入必须为Email类型
Type="url"	限制用户输入必须为URL类型
Type="date"	限制用户输入必须为日期类型
Type="time"	限制用户输入必须为时间类型O
Type="month"	限制用户输入必须为月类型O
Type="week"	限制用户输入必须为周类型O
Type="number"	限制用户输入必须为数字类型
Type="range"	产生一个滑动条的表单
Type="search"	产生一个搜索意义的表单配合results="n"属性 ,显示一个搜索图标
Type="color"	生成一个颜色选择表单

新增的表单属性

属性	值	说明
Required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
Autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
Pattern	正则表达式	输入的内容必须匹配到指定正则

Autocomplete列表

Datalist标签配合option标签实现的自动填充表单功能：

<input type="search" name="move" list="search" >

<datalist id="search" >
	<option>关键词1</option>
	<option>关键词2</option>
	<option>关键词3</option>
</datalist>

output的使用

<form oninput="res.value=no1.value*no2.value“ >
	<input type="text" name="no1">
	<input type="text" name="no2">
	<output name="res"></output>
</form>