HTML5学习总结-05 HTML5表单
一 HTML5 新的类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
1 Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
例子：
E-mail: <input type="email" name="user_email" />
提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项），Android也同样适用。
2 Input 类型 - url
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
例子：
Homepage: <input type="url" name="user_url" />
提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。
3 Input 类型 - number
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：
例子：
Points: <input type="number" name="points" min="1" max="10" />
number类型的属性列表：
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
4 Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。还能够设定对所接受的数字的限定。
例子：
<input type="range" name="points" min="1" max="10" />
下面的属性来规定对数字类型的限定：
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
5 Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年（UTC 时间）
- datetime-local - 选取时间、日、月、年（本地时间）
例子：
Date: <input type="date" name="user_date" />
Month: <input type="month" name="user_date" />
Week: <input type="week" name="user_date" />
Time: <input type="time" name="user_date" />
Date and time: <input type="datetime" name="user_date" />
Date and time: <input type="datetime-local" name="user_date" />
6 Input 类型 - search
search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
例子：
<input type=“search” name=“inputSearch” results=“n” />
二 HTML5 表单元素
1 datalist 元素
datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
例子：
<!DOCTYPE HTML>
<html>
<body> <form action="/example/html5/demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form> </body>
</html>
提示：option 元素永远都要设置 value 属性。
2 output 元素
output 元素用于不同类型的输出，比如计算或脚本输出;
例子：
<!DOCTYPE HTML>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript">
function resCalc() {
numA = document.getElementById("num_a").value;
numB = document.getElementById("num_b").value;
document.getElementById("result").value = Number(numA) + Number(numB);
}
</script>
</head> <body>
<p>使用 output 元素的简易计算器：</p>
<form onsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> =
<output id="result" ></output>
<br />
<button onclick="resCalc()" >计算结果</button>
</form>
</body>
</html>
三 HTML5 表单属性
HTML5 的新的表单属性，主要是 <form> 和 <input> 元素的新属性。
1 新的 form 属性
1）autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text,
search, url, telephone, email, password, datepickers, range 以及 color。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
实例：
<!DOCTYPE HTML>
<html>
<header>
<meta charset="utf-8" />
</header> <body> <form action="#" method="get">
姓氏：<input type="text" name="LastName" value="" autocomplete="on" /><br />
名字：<input type="text" name="FirstName" value="" autocomplete="off" /><br />
<input type="submit" />
</form>
</body> </html>
2) autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。autofocus 属性适用于所有 <input> 标签的类型。
例子：
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
First Name: <input type="text" name="first_name" /> <br />
Last name: <input type="text" name="last_name" autofocus="autofocus" /><br /> <input type="submit" />
</form> </body> </html>
3) form 属性
form 属性规定输入域所属的一个或多个表单。form 属性适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id.
例子：
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form> <p>下面的输入域在 form 元素之外，但仍然是表单的一部分。</p>
Last name: <input type="text" name="lname" form="user_form" /> </body>
</html>
4)表单重写属性
表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
表单重写属性有：
- formaction - 重写表单的 action 属性
- formmethod - 重写表单的 method 属性
注释：表单重写属性适用于以下类型的 <input> 标签：submit
例子：
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="/example/html5/demo_admin.asp" value="Submit as admin" /><br />
</form>
</body>
</html>
5) list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
例子：
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
6）min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：
例子：
Points: <input type="number" name="points" min="" max="" step="" />
7）pattern 属性
pattern 属性规定用于验证 input 域的模式（pattern）。
模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
8）placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：
<input type="search" name="user_search" placeholder="Search W3School" />
9）required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。
注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Name: <input type="text" name="usr_name" required="required" />
10) enctype 属性
enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。
默认是对表单数据以 "application/x-www-form-urlencoded" 进行编码。这意味着在发送前对所有字符进行编码（把 "+" 转换为空格，把特殊字符转换为 ASCII 十六进制值）。
综合例子
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
* {
margin: 0px;
padding: 0px;
}
header,
nav,
article,
aside,
footer {
border: 1px solid greenyellow;
padding: 10px;
//margin: 0px;
}
header{
width: 1070px;
}
nav{
float: left;
width: 200px;
height: 500px;
}
article{
float: left;
width: 500px;
height: 500px;
}
aside{
float: left;
width: 326px;
height: 500px;
}
footer{
clear: both;
width: 1070px;
}
</style>
</head>
<body>
<header>
导航
</header>
<nav>菜单
</nav>
<article>
内容</article>
<aside>
侧边栏</aside>
<footer>
尾部</footer>
</body>
</html>
计算数据：
-
- 内边框+ 内边距 外边框 * = - - =
参考资料：
http://www.w3school.com.cn/html5/html_5_form_attributes.asp
http://www.w3school.com.cn/html5/att_form_enctype.asp
HTML5学习总结-05 HTML5表单的更多相关文章
- HTML5学习笔记<五>: HTML表单和PHP环境搭建
HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...
- 读书笔记：《HTML5开发手册》Web表单
这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- Bootstrap3.0学习第六轮(表单)
Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...
- Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！
感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了. 有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...
- HTML5+CSS：02用户注册表单
新的学期已开始接近两个月了,还记得是在国庆节那几天申请的博客账号,可过了一个月都还没开始写博客,(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于 ...
- html5图片异步上传/ 表单提交相关
1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...
- Html5中input新增的表单元素和属性介绍。
input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...
随机推荐
- sdk墙内更新方法
因为GFW有“保护”,我们能“安全”的遨游在中华互联局域网内.如何快速地更新sdk,一直是Android开发者的心病.网上流传着五花八门的方法,在这我记录一些我用过的切实可行的方法供给有需要的人.同时 ...
- checkbox js onclick ajax，列表页表格中修改数据
<input type='checkBox' value='".$row["p_id"]."' onclick='changeisNew(this);'& ...
- 2016 5.03开始记录我的it学习。
好多谢立成师兄给我这个网址,我发现博客园不仅仅可以随笔记载很多东西,还是一个资源丰富的网站,接下来的四年我会用心去记录这些学习的点滴.
- MATLAB如何定义函数
自定义函数的途径:M文件函数(M file function)在线函数(Inline Function)匿名函数(Anonymous Function)1.M文件函数范例function c=myad ...
- 安装rpm包时遇到Header V3 DSA signature: NOKEY时解决办法
安装rpm包,特别是没有GPGkey校验,原因是rpm版本过低导致的. 代码如下: warning: rpmts_HdrFromFdno: Header V3 DSA signature: NOKEY ...
- TP学习笔记一（tp的目录结构 , tp的输出方式）
一.ThinkPHP的介绍 //了解 MVC M - Model 模型 工作:负责数据的操作 V - View 视图(模板) 工作:负责前台页面显示 C - Controller 控制器(模块) 工作 ...
- [转]Hibernate update和saveOrUpdate详解
原文地址:http://www.iteye.com/topic/2712 先来点概念: 在Hibernate中,最核心的概念就是对PO的状态管理.一个PO有三种状态: 1.未被持久化的VO 此时就是一 ...
- 【ASP.NET Identity系列教程（三）】Identity高级技术
注:本文是[ASP.NET Identity系列教程]的第三篇.本系列教程详细.完整.深入地介绍了微软的ASP.NET Identity技术,描述了如何运用ASP.NET Identity实现应用程序 ...
- tomcat+javaWeb+spring的一个都市供求管理系统
这个作为自己学习javaweb的第一个小项目,也是跟着视频自己学的,是来自java1234的小锋写的,那边有很多java视频可以作为学习参考哦 , 视频中使用的是tomcat作为后端,也( •̀ ω ...
- DEDE列表页直接获取下载链接
我们得去设置软件频道的东西,先点击“核心”->"内容管理模型"中的软件模型进行编辑,将softlinks加入列表字段. 然后进入“系统”->"软件频道设置&q ...