整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 5對表單新增了很多功能和屬性，可以更加方便地進(jìn)行表單開發(fā)，form屬性代碼如下：
所以在HTML 5中定義了表單的從屬關(guān)系，而不再完全依賴form的位置。在下面的代碼中，輸入框txtPhone是屬于表單myForm的，因此可以提交輸入框內(nèi)容。在之前的HTML中這種寫法是不能提交txtPhone輸入框的內(nèi)容的。 placeholder屬性一般用于文本輸入框上，其主要作用是當(dāng)文本框處于未輸入的狀態(tài)并且內(nèi)容為空時，顯示一段提示文本內(nèi)容。
<input type="text" id="txtUserName" class="form-control" placeholder="請輸入用戶名"/>
這個屬性達(dá)到的效果是我們常見的水印效果，如圖所示。
autofocus屬性的作用是指定控件自動活動的焦點(diǎn)，一個頁面中只能有一個控件具有該屬性。
HTML 5允許單行文本框中使用list屬性，配合datalist元素一起使用。list主要用于提示文本框輸入，datalist用于提供數(shù)據(jù)源，目前支持該特性的瀏覽器較少。
Autocomplete屬性用于完成自動輸入的功能，有兩個值；on和off，分別代表自動完成輸入和禁止自動完成輸入。很多瀏覽器不支持該屬性，但是自動完成插件是筆者平時使用較多的。
Required屬性是用作必填屬性，如果使用到了這個屬性則當(dāng)表單中的元素為空時無法提交，此屬性作用于輸入框元素上。
于HTML5基礎(chǔ)知識(3)新增的Input類型（重要）這一節(jié)沒有審核通過，現(xiàn)在簡單介紹一下這節(jié)：
html5新曾的Input類型主要有:email郵箱驗(yàn)證，url 網(wǎng)址驗(yàn)證，number數(shù)字驗(yàn)證，range范圍，Date pickers (date, month, week, time, datetime, datetime-local)時間日期，search搜索驗(yàn)證，color顏色選取，tel電話驗(yàn)證等等
Input 類型 - email 驗(yàn)證郵箱 寫法：
E-mail: <input type="email" name="user_email" />
Input 類型 - url 驗(yàn)證url，寫法：
<input type="url" name="user_url" />
Input 類型 - number 驗(yàn)證數(shù)字
Input 類型 - range 驗(yàn)證輸入范圍：
<input type="range" name="points" min="1" max="10" />
Input 類型 - Date Pickers（日期選擇器）分別有：
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間（小時和分鐘）
datetime - 選取時間、日、月、年（UTC 時間）
datetime-local - 選取時間、日、月、年（本地時間）
Input 類型: color，主要用于選取顏色
<input type="color" name="favcolor">
Input 類型: tel 驗(yàn)證電話號碼（不推薦）
可能是這些知識大家都在寫，發(fā)布的時候提示“近期在全網(wǎng)出現(xiàn)過高度相似文章被認(rèn)為是舊聞”，說多了都是淚！
datalist、keygen、Output這三種，但是都不是很推薦的，可以跳過！
datalist 元素 datalist 元素規(guī)定輸入域的選項(xiàng)列表。不推薦
<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>
效果：
keygen 元素（現(xiàn)在無需了解）
keygen 元素的作用是提供一種驗(yàn)證用戶的可靠方法。keygen 元素是密鑰對生成器（key-pair generator）。當(dāng)提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate）。
output 元素
output 元素用于不同類型的輸出，比如計(jì)算或腳本輸出：（現(xiàn)在無需了解）
<output id="result" onforminput="resCalc()"></output>
新的 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屬性規(guī)定 form 或 input 域應(yīng)該擁有自動完成功能。
（2）autofocus 屬性規(guī)定在頁面加載時，域自動地獲得焦點(diǎn)。
<input type="text" name="user_name" autofocus="autofocus" />
（3）form 屬性規(guī)定輸入域所屬的一個或多個表單。form 屬性必須引用所屬表單的 id：
<form action="demo_form.asp" method="get" id="user_form">
姓名：<input type="text" name="fname" />
<input type="submit" />
</form>
性別: <input type="text" name="lname" form="user_form" />
（4）表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設(shè)定。表單重寫屬性有：
formaction - 重寫表單的 action 屬性
formenctype - 重寫表單的 enctype 屬性
formmethod - 重寫表單的 method 屬性
formnovalidate - 重寫表單的 novalidate 屬性
formtarget - 重寫表單的 target 屬性
<form action="demo_form.asp" method="get" id="user_form">
<input type="submit" value="Submit" />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" /></form>//實(shí)際運(yùn)行的時候跳轉(zhuǎn)demo_admin.asp
（5）min、max 和 step 屬性
min、max 和 step 屬性用于為包含數(shù)字或日期的 input 類型規(guī)定限定（約束）。
max 屬性規(guī)定輸入域所允許的最大值。
min 屬性規(guī)定輸入域所允許的最小值。
step 屬性為輸入域規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）。
<input type="number" name="points" min="0"max="10"step="3" />
此例子只能填寫0、3、6、9
（6）multiple 屬性
multiple 屬性規(guī)定輸入域中可選擇多個值。
<input type="file" name="img" multiple="multiple" />
//表示可以同時上傳多個圖片
（7）pattern 屬性
pattern 屬性規(guī)定用于驗(yàn)證 input 域的模式（pattern）。
模式（pattern） 是正則表達(dá)式。您可以在我們的 JavaScript 教程中學(xué)習(xí)到有關(guān)正則表達(dá)式的內(nèi)容。
<input type="text" name="country_code"pattern="[A-z]{3}" title="Three letter country code" />
表示：只允許輸入3個任意字母
（9）placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。（這個常用，不做解釋）
（10）required 屬性
required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）
Name: <input type="text" name="usr_name" required="required" />
新增input type 屬性值
類型 使用示例 描述
email <input type="email"> 必須輸入郵箱格式
tel <input type="tel"> 必須輸入手機(jī)號碼格式
url <input type="url"> 必須輸入url格式
number <input type="number"> 必須輸入數(shù)字格式
search <input type="search"> 必須搜索框（體現(xiàn)語義化）
range <input type="range"> 自由拖動滑塊
time <input type="time"> 小時分鐘
date <input type="date"> 年月日
datetime <input type="datetime"> 時間
month <input type="month"> 月年
week <input type="week"> 星期 年
color <input type='color'> 顏色
新增的input標(biāo)簽屬性
屬性 用法 含義
placeholder <input type="text" placeholder="請輸入..."> 占位符 當(dāng)用戶輸入的時候 里面的文字消失 刪除所有文字，自動恢復(fù)
autofocus <input type="text" autofocus> 規(guī)定當(dāng)頁面加載時 input 元素應(yīng)該自動獲得焦點(diǎn)
multiple <input type="file" multiple> 多文件上傳
autocomplete <input type="text" autocomplete="off"> 規(guī)定表單是否應(yīng)該啟用自動完成功能 有2個值，一個是on 一個是off on 代表記錄已經(jīng)輸入的值 1.autocomplete 首先需要提交按鈕2.這個表單您必須給他名字
required <input type="text" required> 必填項(xiàng) 內(nèi)容不能為空
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
