TML5從入門到精通，兄弟連京修隨堂筆記（二）HTML的框架結構，每日都有新內容，訂閱走一波

HTML5的form標簽

問：網站怎樣與用戶進行交互? 答案:使用HTML表單(form).

表單是可以把瀏覽者輸入的數據傳送到服務器端的程序(比如ASP,PHP)的HTML元素,服務器端程序可以處理表單傳過來的數據,從而進行一些動作.比如,bbs,blog的登陸系統,購物車系統等.

form 標簽 -- 代表HTML表單

form標簽是成對出現的,以<form>開始,以</form>結束

常用屬性.

action -- 瀏覽者輸入的數據被傳送到的地方,如一個PHP頁面(dofm.php)

method -- 數據傳送的方法

get -- 此方式傳遞數據量少,但是傳遞的信息顯示在網址上。

post --此方式傳送信息多,而且不會把傳遞信息顯示在網址上

enctype -- 表示將數據發送到服務器時瀏覽器使用的編碼類型

application/x-www-form-urlencoded -- 窗體數據被編碼為名稱/值對.這是標準的編碼格式.默認的。

multipart/form-data -- 窗體數據被編碼為一條消息,頁上的每個控件對應消息中的一個部分.

text/plain -- 以純文本形式進行編碼,其中不含任何控件或格式字符

HTML5 input標簽

input 標簽 -- 代表HTML表單的單行輸入域

input標簽是單獨出現的,<input />

屬性.

type -- 代表一個輸入域的顯示方式(分為輸入型,選擇型,點擊型)

name – 此表單項名稱

value -- 輸入域的值

size -- 輸入域的長度

maxlength -- 輸入域最多可以輸入文字的長度

checked -- 如果是選擇型的輸入域,代表已經被選擇，值為checked

readonly -- 輸入域可以選擇,但是無法修改 ，值為readonly

disabled -- 輸入域無法獲得焦點,無法選擇,以灰色顯示,在表單中不起任何作用。如：disabled="disabled"

accesskey -- 表單的快捷鍵訪問方式，如值為h即按Alt+h快捷鍵。

tabindex -- 輸入域的"tab"鍵遍歷順序

src -- 當使用圖片來表示按鈕時,代表圖片的位置(URI)

alt -- 用來替換提交按鈕的圖片(當在input的src屬性定義的圖片無法顯示時)提示信息。

type屬性 -- 代表HTML表單,單行輸入域(框)的表現方式

type屬性取值:

text -- 文字輸入域(輸入型)

password -- 也是文字輸入域,但是輸入的文字以密碼符號'*'顯示(輸入型)

file -- 可以輸入一個文件路徑(輸入型)

checkbox -- 復選框.可以選擇零個或多個(選擇型)

radio -- 單選框.只可以選擇一個而且必須選擇一個(選擇型)

hidden -- 代表隱藏域,可以傳送一些隱藏的信息到服務器

button -- 按鈕(點擊型)

image -- 使用圖片來顯示按鈕,使用src屬性指定圖像的位置(就像img標簽的src屬性)(點擊型)

submit -- 提交按鈕,表單填寫完畢可以提交,把信息傳送到服務器.可以使用value屬性來顯示按鈕上的文字(點擊型)

reset -- 重置按鈕,可以把表單中的信息清空(點擊型)

select 標簽 -- 選擇列表標簽

select標簽是成對出現的,以<select>開始,以</select>結束

此標簽中的每對option標簽代表一個選擇項

屬性:

name – 表單項名稱

size -- 選擇域的高度

multiple -- 可以有多個選擇

disabled -- 以灰色顯示,在表單中不起任何作用

tabindex -- 使用"tab"鍵的遍歷順序

一篇講了3個新的表單標簽，下面小編再來介紹HTML5給表單帶來的新屬性。

autocomplete 屬性

可用在form標簽和input標簽，實現自動完成輸入功能。它的值為：on（開啟）/off（關閉）。

為了完成表單的快速輸入，提高網站的交互性，autocomplete=“on“，瀏覽器提供了自動補全的功能。在用戶輸入的內容被保存的情況下，如果用戶在表單再次輸入相同的或部分相同的字符時，瀏覽器會提示相關內容，從而讓你快速的完成表單的輸入。

我們來看一個例子，我們在form標簽就開啟autocomplete 屬性。然后在其中一個子節點input標簽關閉autocomplete 屬性。

 <form autocomplete="on">
 <input type="text">
 <input type="text" autocomplete="off">
 </form>

這種寫法的結果就是：第一個input標簽實現了開啟autocomplete，而第二個標簽因為自己重新設置了autocomplete屬性為off關閉，所以第二個輸入域沒有實現自動補全的效果。

novalidate屬性

在提交表單時不應該驗證 form 或 input 域。

如果表單中有一個輸入域的類型是email，那么在提交表單的時候，瀏覽器會驗證你輸入的字符格式是否合法，若非法（不符合郵件格式類型），就會提示錯誤，阻止提交表單。

我們來看這個例子：

 <form>
 <input type="email">
 <input type="submit" value="save">
 </form>

我們試著輸入一個非法的email郵箱地址，然后提交，如下圖：

瀏覽器會提示你郵箱地址格式不對，而novalidate屬性，就是為了讓表單可以忽略驗證，直接提交表單數據。

它的用法如下：

 <form novalidate>
 <input type="email">
 <input type="submit" value="save">
 </form>

autofocus 屬性

在頁面加載時，域自動地獲得焦點。

這個很好理解，用法也很簡單：

 <input type="text" autofocus>

設置了autofocus 屬性的輸入域，就會自動獲得焦點，如圖：

如果一個頁面存在多個設置了autofocus屬性的input標簽，則只有第一個input標簽才會獲得焦點，其它的失效。

form 屬性

規定input輸入是屬于哪個表單的。

這種情況，一般只會在當input標簽不是form標簽的子節點的情況下才會使用。如：

 <form id="demo">
 <input type="text">
 <input type="submit" value="save">
 </form>
 <input type="text" form="demo">

代碼中一個input標簽輸入域放在了form表單的外面，但是表單提交的時候，也會帶上這個輸入域的數據。原因是因為外面的input標簽通過form屬性綁定了form表單的id。相當于對它說：“你提交數據的時候，別只顧著你的子節點啊，還記得帶上我啊。“

覺得不錯的朋友點個關注哩，后面小編會分享更多干貨。

EB前端現在是時下較火的編程語言之一，但是對于怎么學習或者學習哪些內容很多朋友都是不了解的，針對以上內容小猿圈web前端講師總結了form如何關閉自動完成功能的方法？希望對你的前端學習有一定的幫助。

什么是HTML5的form自動完成功能？

首先，HTML5 中有個新屬性autocomplete ，autocomplete 屬性規定表單是否應該啟用自動完成功能，它自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在字段中填寫的選項。

如：

<form 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>請填寫并提交此表單，然后重載頁面，來查看自動完成功能是如何工作的。</p>

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

會發現，autocomplete="on"的會被“記錄下來”，而E-mail的autocomplete="off"，再次輸入時不會被“記錄”。這就是“HTML5中form的自動完成功能”啦！

如何關閉自動完成功能

有時候我們希望關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，我們希望使用AJAX技術從數據庫搜索并列舉而不是在用戶的歷史記錄中搜索。

關閉輸入框的自動完成功能有3種方法：

1、在IE的Internet選項菜單里的內容--自動完成里面設置

2、設置Form的autocomplete為"on"或者"off"來開啟或者關閉自動完成功能

（關閉整個表單（form）自動提示功能）

3、設置輸入框(input)的autocomplete為"on"或者"off"來開啟或者關閉該輸入框的自動完成功能（關閉密碼域的自動完成）

測試代碼：（在每個form輸入文字然后提交，然后再回來看看能否自動完成，注意要提交后才能有歷史記錄，才可能自動完成；提交后頁面可能出錯，不用管它，后退回去即可）

打開自動完成功能的Form<br>

<form name="form1" autocomplete="on">

打開自動完成功能的輸入框

<input type="text" autocomplete="on" ><br>

關閉自動完成功能的輸入框

<input type="text" autocomplete="off"><br>

<input type="submit" value="提交"><br>

</form>

關閉自動完成功能的Form<br>

<form name="form1" autocomplete="off">

打開自動完成功能的輸入框

<input type="text" autocomplete="on"><br>

關閉自動完成功能的輸入框

<input type="text" autocomplete="off"><br>

<input type="submit" value="提交"><br>

</form>

建議：不要全部關閉自動完成功能，根據需要禁用一部分自動完成功能即可，如果你覺得瀏覽器自帶的自動完成功能還不夠強大，可以使用jquery插件來實現更加強大的自動提示完成功能。

小猿圈web前端講師認為：授之以魚更授之以漁，想要學好web前端首先需要就是端正自己的學習態度，明確學習目標，這樣才能堅持學習。想要了解更多關于前端方面的小伙伴，可以關注小猿圈每天的動態，會不定期更新互聯網編程知識，希望對你的學習有一定的幫助。