您的位置：首页 > Web前端 > HTML5

HTML5所有新标签总结

2016-01-08 11:42 253 查看
1.输入标签（input）

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的标签

输入类型：

email
url
number//max min value step
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color




表单属性:

新的 form 属性：

autocomplete
novalidate//novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

新的 input 属性：

autocomplete//autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。类似保存密码。zid
autofocus[b]//自动get焦点，例如输入框自动鼠标定位
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

autocomplete自动保存输入的第一次相关内容[/b]

<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>
autofocus聚焦焦点，光标定位于输入框

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


multiple(可选择输入多个文件，并显示文件数)


Select images: <input type="file" name="img" multiple="multiple" />//选择多个文件
pattern(配合正则表达式，匹配模式，输入要求)

<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
</body>
</html>
placehoder类似于背景显示提示，在输入框显示淡色search

<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search" />
<input type="submit" />
</form>
</body>
</html>
required要求次属性必须填写，否则提示错误

<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>
</body>
</html>



表单元素：



datalist
keygen
output

<pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, 'Courier New', Courier, monospace; width: 685px; background: rgb(245, 245, 245);">Webpage: <input type="url" <span class="marked" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 0, 0);">list="url_list"</span> name="link" />
<code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, 'Courier New', Courier, monospace; color: rgb(0, 0, 221);"><datalist id="url_list"></code>
<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" />
<code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, 'Courier New', Courier, monospace; color: rgb(0, 0, 221);"></datalist></code>



datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 
绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>


keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<output id="result" onforminput="resCalc()"></output>


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





2浏览器支持
注：所有新增的实物有一个接受过程，大部分浏览器还不支持，我觉得这需要时间来历练。
Input typeIEFirefoxOperaChromeSafari
emailNo4.09.010.0No
urlNo4.09.010.0No
numberNoNo9.07.0No
rangeNoNo9.04.04.0
Date pickersNoNo9.010.0No
searchNo4.011.010.0No
colorNoNo11.0NoNo
3实例（其他类似，修改type）
E-mail: <input type="email" name="user_email" />

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航