html5的表單元素有哪些并說明

color:顏色

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網綜合服務，包含不限于網站建設、成都網站制作、株洲網絡推廣、成都微信小程序、株洲網絡營銷、株洲企業(yè)策劃、株洲品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供株洲建站搭建服務，24小時服務熱線：18980820575，官方網址：chinadenli.net

date:日期

datetime:UTC日期和時間 datetime-local: 日期時間（本地）month:月份 time:時間 week:周

email:郵件，注：輸入的電子郵件可自動驗證

number:數(shù)字，可以設置數(shù)字范圍

range:數(shù)字滾動條 ，滾動條可以改變范圍內的數(shù)值

search:搜索 搜索關鍵字

tel:電話號碼

url:url地址輸入（輸入url格式可自動驗證）

HTML5 還有這3種新的表單元素:（可以參考w3cschool手冊:）

datalist

keygen

output

html5有哪些新增的表單元素

新的input的類型有

email（自動驗證email格式）

url（自動驗證url格式）

number（只能輸入數(shù)字）

range（類似音量滑動條）

Date pickers (date, month, week, time, datetime, datetime-local)（自帶日期選擇）

search（搜索域，類似百度的類似搜索提示）

color（顏色選擇，這個現(xiàn)在不兼容大部分瀏覽器=-=）

新標簽

datalist（自動驗證內容是否在可選擇選項中）

html5新增的表單元素有哪些

html5新增的表單元素有以下幾種：

datalist，keygen，output三種無素。

1.datalist 元素

datalist 元素規(guī)定輸入域的選項列表。

列表是通過 datalist 內的 option 元素創(chuàng)建的。

如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id。

2.keygen 元素

keygen 元素的作用是提供一種驗證用戶的可靠方法。

keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。

3.output 元素

output 元素用于不同類型的輸出，比如計算或腳本輸出。

根據(jù)具體問題類型，進行步驟拆解／原因原理分析／內容拓展等。

具體步驟如下：／導致這種情況的原因主要是……

HTML5 新增加了哪些表單元素

首先先說一個html5中表單新增的一個功能，在我們之前的html中，表單元素必須放在form元素所包含的里面，在html5中，可以把他們寫在頁面上的任何一個地方，然后給該元素增加一個form屬性，form屬性的值為form表單的id，如下：

[html]?view plain?copy

form?method="get"?id="test"

input?type="text"?name="name"/ ?

input?type="password"?name="password"/

input?type="submit"?value="提交"

/form

input?type="text"?name="confirm"?form="test"

在form元素里面的表單元素可以不用添加form屬性，如果你想利用form獲取所有表單元素的值，那么在form元素外面的表單元素就必須添加form屬性，input、select、textarea等元素都滿足該功能。

接下來開始介紹html5新增的表單元素，所有例子均用谷歌瀏覽器展示。

新增表單元素

email：提交表單的時候驗證輸入值是否滿足email的格式

input type="email" name="email"/

url：提交表單的時候驗證輸入值是否滿足url的格式

input type="url" name="url"/

number：根據(jù)你的設置提供選擇數(shù)字的功能，其中min為最小值，max為最大值，value為默認值，step為點擊箭頭時數(shù)字的變化量，max、min、step、value均可不寫，目前某些瀏覽器還不支持。

input type="number" name="number" min=2 max=100 step=5 value="15"/

range：會以一個滑塊的形式表現(xiàn)包含一定范圍內數(shù)字值的輸入域，max為最大值，min為最小值，value為默認值，如果沒有設置max和min，默認值是1-100

input type="range" name="range" min=20 max=200 value="60"/

日期和時間類型：

date：選取日、月、年

input type="date" name="date"/

month：選取月、年

input type="month" name="month"/

week：選取周、年

input type="week" name="week"/

time：選取小時、分鐘

input type="time" name="time"/

datetime：選取時間、日、月、年(UTC時間)（我這里瀏覽器顯示不出效果）

input type="datetime" name="datetime"/

datetime-local：選取時間、日、月、年(本地時間)

input type="datetime-local" name="datetime-local"/

search：用于搜索域，若加上result="s"屬性，則會在搜索框前面加一個搜索圖標（我這里瀏覽器顯示不出效果）

input type="search" name="search" result="s"/

tel：驗證輸入的是否是電話號碼的格式（我這里瀏覽器顯示不出效果）

input type="tel" name="tel" /

color：color類型會提供顏色拾取器，供用戶選擇顏色，并將用戶選擇的顏色填充到此元素中

input type="color" name="color"/

新增input屬性(部分容易理解的就不進行代碼演示了)，后面為支持該屬性的元素

autofocus：在打開頁面時使元素自動獲取焦點 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //input,button,select,textarea

placeholder:?在用戶輸入時進行提示 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// input,textarea

form：這篇文章的開頭就有這個屬性，它用于表明元素屬于哪個表單，無論元素的位置在哪里，所屬表單都能獲取該元素的值 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//input,output,button,select,textarea,fieldset

required：表明該元素是必填項，當提交表單的時候會自動驗證該元素的內容是否不為空 ? ? ? ? ?//input,textarea

max/min/step：限制值的輸入范圍，以及值的變化程度。上面的新增number元素有介紹。 ? ? ? ?//input

autocomplete：使form元素或者input元素擁有自動完成功能，既記錄用戶之前輸入的值，關閉為off，默認為on。 ? ? ? ? ? ? ? ? ? ? ? ? ? ?//form,input

表單重寫屬性： ? ? ? ? ? ? ? ? ? ???//input

formaction:重寫表單的action屬性 ?

formenctype:重寫表單的enctype屬性。

enctype屬性管理的是表單的MIME編碼，MIME就是一種電子郵件傳輸?shù)幕ヂ?lián)網標準，表明傳遞的信息類型和編碼，共有三個值可選：

1，application/x-www-form-urlencoded（默認），設置表單傳輸?shù)木幋a。

2，multipart/form-data，指定傳輸數(shù)據(jù)的特殊類型，主要就是上傳的非文本內容，比如文件、圖片。

3，text/plain，純文本傳輸。

formmethod: 重寫表單的method屬性

formnovalidate:重寫表單的novalidate屬性

formtarget：重寫表單的target屬性。

比如:

[html]?view plain?copy

form?action="test.html"?method="get"?autocomplete="on"

姓名:?input?type="text"?name="name"?/br?/

密碼:?input?type="password"?name="pwd"?/br?/

input?type="submit"?formnovalidate="true"?value="提交未經驗證"/

/form

multiple:規(guī)定輸入字段可選擇多個值 ? ? ? ? ? ? ? ? ? ?//input,select

list：list屬性的值為datalist元素的id，datalist元素類似于選擇框，在文本框獲得焦點的時候以提示輸入的方式顯示。如下：

[html]?view plain?copy

姓名：input?type="text"?name="name"?list="name"/

datalist?id="name"?

option?value="zhangsan"張三/option

option?value="lisi"李四/option

option?value-"wanger"王二/option

/datalist

pattern:驗證input輸入域的格式，即正則表達式。

input type="text" name="name" pattern="[A-z0-9]{8}"/

HTML5有哪些新的表單屬性

新增表單元素：

用于表單的密鑰對生成器字段

不同類型的輸出，比如腳本的輸出。

新增表單屬性：

autocomplete 自動完成

novalidate不驗證數(shù)據(jù)

formaction 用于描述表單提交的URL地址，會覆蓋

元素中的action屬性.

formenctype 表單提交到服務器的數(shù)據(jù)編碼 (只對form表單中 method="post" 表單)

formmethod 表單提交方式，會覆蓋 的method 屬性。

formnovalidate 表單提交無需被驗證，會覆蓋 元素的novalidate屬性.

formtarget 表單提交數(shù)據(jù)接收后，怎么的展示。

list 表示input輸入域的 datalist（datalist 是輸入域的選項列表）

min max step ** 用來給input 類型為數(shù)字或日期的添加限定約束的

multiple 多種多樣表示 元素中可選擇多個值。

pattern 正則表達式用于驗證 元素的值。

placeholder 占位提供一種提示（hint），描述輸入域所期待的值。

required 被要求的，必須的， 規(guī)定必須在提交之前填寫輸入域（不能為空）。

step 步伐、一步、步長，規(guī)定輸入域合法的數(shù)字間隔

請通過檢索工具檢索html5新增了哪些表單標簽

1. datalist標簽

datalist標簽規(guī)定輸入域的選項列表，列表是通過datalist內的option元素創(chuàng)建的。如需把datalist綁定到輸入域，用輸入域的list屬性引用datalist的id，如下面的實例：

網址是：input type="url" list="user_list" name="link" /

datalist id="user_list"

option label="新浪網" value="" /

option label="搜狐網" value="" /

option label="網易" value="" /

/datalist

提示：option元素永遠都要設置value屬性值。

2. keygen標簽

keygen標簽的作用是提供一種驗證用戶的可靠方法。keygen標簽是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個是公鑰。私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。如：

form action="demo_form.asp" method="get"

Username: input type="text" name="usr_name" /

Encryption: keygen name="security" /

input type="submit" /

/form

3. output標簽

output標簽用于不同類型的輸出，比如計算或腳本輸出，如：

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新的form 屬性：autocomplete、novalidate；新的input 屬性：autocomplete、autofocus、form、form overrides (formaction, formenctype,formmethod, formnovalidate, formtarget)、height、width、list、min、max、step、multiple、pattern (regexp)、placeholder和required。

1. autocomplete屬性

autocomplete屬性規(guī)定form 或input 域是否應該擁有自動完成功能，適用于form標簽，以及text,、search、url、telephone、email、password、datepickers、range和color類型的input 標簽。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項，如：

!DOCTYPE HTML

html

body

　form action="/example/HTML 5/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

　p請?zhí)顚懖⑻峤淮吮韱危缓笾剌d頁面，來查看自動完成功能是如何工作的。/p

　p請注意，表單的自動完成功能是打開的，而e-mail 域是關閉的。/p

/body

/html

2. autofocus屬性

autofocus屬性規(guī)定在頁面加載時，域自動地獲得焦點，autofocus屬性適用于所有input標簽的類型。如：

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

3. form屬性

form屬性規(guī)定輸入域所屬的一個或多個表單，適用于所有input 標簽的類型，必須引用所屬表單的id，如需引用一個以上的表單，使用空格分隔的列表。

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. form override attributes

允許重寫form元素的某些屬性設定，表單重寫屬性有：

formaction：重寫表單的action 屬性

formenctype：重寫表單的enctype 屬性

formmethod：重寫表單的method 屬性

formnovalidate：重寫表單的novalidate 屬性

formtarget：重寫表單的target 屬性

表單重寫屬性適用于submit和image類型的input 標簽。如：

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

這些屬性對于創(chuàng)建不同的提交按鈕很有幫助。

5. height和width屬性

height和width屬性規(guī)定用于image類型的input標簽的圖像高度和寬度，height和width屬性只適用于image類型的input 標簽。如：

input type="image" src="img_submit.gif" width="99" height="99" /

6. list屬性

list屬性規(guī)定輸入域的datalist，datalist是輸入域的選項列表。list屬性適用于text、search、url、telephone、email、date pickers、number、range和color類型的input 標簽。

7. min、max和step屬性

min、max和step屬性用于為包含數(shù)字或日期的input 類型規(guī)定限定（約束）。max屬性規(guī)定輸入域所允許的最大值，min屬性規(guī)定輸入域所允許的最小值，step屬性為輸入域規(guī)定合法的數(shù)字間隔。min、max和step屬性適用于date pickers、number和range類型的input標簽。

8. multiple屬性

multiple屬性規(guī)定輸入域中可選擇多個值，multiple 屬性適用于emial和file類型的input 標簽。

Select images: input type="file" name="img" multiple="multiple" /

9. novalidate屬性

novalidate屬性規(guī)定在提交表單時不應該驗證form或input域，novalidate屬性適用于form以及text、search、url、telephone、email、password、date pickers、range和color類型的input 標簽。如：

form action="demo_form.asp" method="get" novalidate="true"

10. pattern屬性

pattern屬性規(guī)定用于驗證input域的模式（pattern），模式（pattern）是正則表達式。pattern屬性適用于text、search、url、telephone、email以及password類型的input 標簽。下面的例子顯示了一個只能包含三個字母的文本域（不含數(shù)字及特殊字符）：

Country code: input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /

11. placeholder屬性

placeholder屬性提供一種提示（hint），描述輸入域所期待的值。placeholder屬性適用于text、search、url、telephone、email以及password類型的input 標簽。提示（hint）會在輸入域為空時顯示出現(xiàn)，會在輸入域獲得焦點時消失，例如：

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

12. required屬性

required屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。required屬性適用于text、search、url、telephone、email、password、date pickers、number、checkbox、radio以及file類型的input標簽，如：

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

本文題目：html5新的表單,html5引入的新表單屬性
文章起源：http://chinadenli.net/article19/dseeidh.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供Google、用戶體驗、搜索引擎優(yōu)化、靜態(tài)網站、手機網站建設、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)