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="0" max="10" step="3" />
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>
计算数据:
1092 -222 -522 内边框+ 内边距 22 外边框 12 * 4 = 48 1092 - 222 - 522 = 348
参考资料:
http://www.w3school.com.cn/html5/html_5_form_attributes.asp
http://www.w3school.com.cn/html5/att_form_enctype.asp
如果您觉的本篇文章有用,可以赞助作者一些小额的比特币,用来买咖啡,谢谢。 收款地址:3NTPbsJKRKhe1RE1g2rZdr2dFTDgkBUgUa
注:转载需注明出处及作者名,严禁恶意转载,尊重原作者的劳动成果。