HTML5（一）HTML5表单类型与属性

最新推荐文章于 2023-03-30 20:20:18 发布

北风剑客

最新推荐文章于 2023-03-30 20:20:18 发布

阅读量670

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/xiongwt/article/details/50410236

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文建立在HTML知识的基础之上，相对HTML来说，介绍表单输入域的类型及属性，这些新增功能大大方便开发，且效果也很好。访问要在IE9以上。

下面是页面代码：

<!DOCTYPE html>
<html>
	<head>
		<title>html5表单功能</title>
	</head>
	<body>
		<!--novalidate="true"不自动验证-->
		<form action="1.action" method="post" novalidate="true">
			<!--pattern：正则。 required必填. autofocus="true"自动聚焦-->
			用户名：<input type="text" pattern="^[a-z]\w{2,5}$" required autofocus="true"/><br/>
			<!--浏览器默认是自动完成（点击文本框会出现曾经输入过的数据），可以用autocomplete="off"来关闭-->
			邮件：<input type="email" name="email" required autocomplete="off"/><br/>
			主页：<input type="url" name="url"/><br/>
			日期：<input type="date"/><br/>
			时间：<input type="time"/><br/>
			星期：<input type="week"/><br/>
			数字：<input type="number" max="10" min="0" step="2"/><br/>
			滑块：<input type="range" max="10" min="0" step="1" value="6"/><br/>
			<!--results=s会显示搜索小图标-->
			搜索：<input type="search" results="s" placeholder="搜搜更健康"/><br/>
			<!--通过颜色选择器选择一个颜色值-->
			颜色：<input type="color"/><br/>
			<!--multiple属性规定输入域中可选择多个，适用email和file的input标签-->
			选择文件：<input type="file" multiple="multiple"/><br/>
			<!--list与datalist一起用-->
			年龄：<input type="text" list="li"><br/>
				<datalist id="li">
					<option>20</option>
					<option>30</option>
					<option>40</option>
				</datalist>
			<input type="submit" value="提交"/><br/>
			<!--formaction重写表单的action属性，适用于submit类型的input标签-->
			<input type="submit" value="修改" formaction="2.action" formmethod="get"/><br/>
		</form>
	</body>
</html>