HTML5学习笔记06

一、HTML5 Input类型

1、新类型

HTML5 拥有多个新的表单输入类型：

Input typeIEFirefoxOperaChromeSafari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 No
search No 4.0 11.0 10.0 No
color No No 11.0 No No

2、Input类型-email

email 类型用于应该包含 e-mail 地址的输入域。

E-mail: <input type="email" name="user_email" />

3、Input类型-url

url 类型用于应该包含 URL 地址的输入域

Homepage: <input type="url" name="user_url" />

4、Input类型-number

number 类型用于应该包含数值的输入域。

Points: <input type="number" name="points" min="1" max="10" />

5、Input类型-range

range 类型用于应该包含一定范围内数字值的输入域。

<input type="range" name="points" min="1" max="10" />

6、Input类型-Date Pickers

HTML5 拥有多个可供选取日期和时间的新输入类型：

Date: <input type="date" name="user_date" />

二、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、keygen元素

keygen 元素的作用是提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

</body>
</html>

3、output元素

output 元素用于不同类型的输出，比如计算或脚本输出：

<!DOCTYPE HTML>
<html>
<head>
<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" onforminput="resCalc()"></output>
</form>

</body>
</html>

三、HTML5表单属性

1、autocomplete属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

2、autofocus属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

User name: <input type="text" name="user_name"  autofocus="autofocus" />

3、form属性

form 属性规定输入域所属的一个或多个表单。

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

4、表单重写属性

  • formaction - 重写表单的 action 属性
  • formenctype - 重写表单的 enctype 属性
  • formmethod - 重写表单的 method 属性
  • formnovalidate - 重写表单的 novalidate 属性
  • formtarget - 重写表单的 target 属性
<form action="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="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

5、placeholder属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

<input type="search" name="user_search"  placeholder="Search W3School" />

6、required属性

required 属性规定必须在提交之前填写输入域（不能为空）。

Name: <input type="text" name="usr_name" required="required" />

 

posted @ 2014-05-14 20:50  weddy.zheng  阅读(135)  评论(0)    收藏  举报