html5表单新特性

最新推荐文章于 2021-06-08 23:06:06 发布

ITDragon龙

最新推荐文章于 2021-06-08 23:06:06 发布

阅读量4.7k

点赞数 1

分类专栏： html5 前端技术文章标签： html5 表单

本文链接：https://blog.csdn.net/qq_19558705/article/details/50492184

版权

前端技术同时被 2 个专栏收录

20 篇文章 13 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

html5表单新特性

学习的笔记，记录备忘。

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta>
		<title>form表单</title>
		<style>
			form{width:300px;line-height: 38px;}
			input{width:180px;height:27px;border-radius: 3px;border:1px solid #ABA9A9;font-size: 14px;padding-left: 6px;}
			input[type="color"],input[type="submit"]{width:90px;}
			#form_content,#article_content{float: left;}
			#article_content{padding-left: 50px;}
		</style>
	</head>
	<body>
		<section id="form_content">
			<form>
				用户名 : <input type="text" placeholder="Please enter username" autofocus="autofocus" required/><br />
				邮箱 : <input type="email" required/><br />
				个人主页：<input type="url" required/><br />
				生日：<input type="date" required/><br />
				完善程度：<input type="range" max="10" min="0" value="2" step="2"/><br />
				查找：<input type="search" results=s/><br />
				选择颜色：<input type="color" /><br />
				<input type="submit" value="提交" formaction="OneController.java" formmethod="post"/>
				<input type="submit" value="取消" formaction="TwoController.java" formmethod="post"/>
			</form>
		</section>
		<section id="article_content">
			<hgroup>
				<h2>表单新特性</h2>
			</hgroup>
			<article>
				<p>①type添加了很多新内容自行尝试，其验证效果没有Jquery.validate效果好</p>
				<p>②placeholder 提示信息</p>
				<p>③autofocus 聚焦</p>
				<p>④required 必填内容、pattern正则表达式验证</p>
				<p>⑤重写form属性formation指向action，formmethod请求方法</p>
				<p>⑥autocomplete="on/off" 打开或关闭自动补齐</p>
			</article>
		</section>
	</body>
</html>

个人主页： http://www.itit123.cn/ 更多干货等你来拿