HTML5教程從入門到精通，隨堂筆記（二）H5的fo

HTML5教程從入門到精通，隨堂筆記（二）H5的form標(biāo)簽

TML5從入門到精通，兄弟連京修隨堂筆記（二）HTML的框架結(jié)構(gòu)，每日都有新內(nèi)容，訂閱走一波

HTML5的form標(biāo)簽

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

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

form 標(biāo)簽 -- 代表HTML表單

form標(biāo)簽是成對出現(xiàn)的,以<form>開始,以</form>結(jié)束

常用屬性.

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

method -- 數(shù)據(jù)傳送的方法

get -- 此方式傳遞數(shù)據(jù)量少,但是傳遞的信息顯示在網(wǎng)址上。

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

enctype -- 表示將數(shù)據(jù)發(fā)送到服務(wù)器時瀏覽器使用的編碼類型

application/x-www-form-urlencoded -- 窗體數(shù)據(jù)被編碼為名稱/值對.這是標(biāo)準(zhǔn)的編碼格式.默認(rèn)的。

multipart/form-data -- 窗體數(shù)據(jù)被編碼為一條消息,頁上的每個控件對應(yīng)消息中的一個部分.

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

HTML5 input標(biāo)簽

input 標(biāo)簽 -- 代表HTML表單的單行輸入域

input標(biāo)簽是單獨出現(xiàn)的,<input />

屬性.

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

name – 此表單項名稱

value -- 輸入域的值

size -- 輸入域的長度

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

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

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

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

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

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

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

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

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

type屬性取值:

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

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

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

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

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

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

button -- 按鈕(點擊型)

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

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

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

select 標(biāo)簽 -- 選擇列表標(biāo)簽

select標(biāo)簽是成對出現(xiàn)的,以<select>開始,以</select>結(jié)束

此標(biāo)簽中的每對option標(biāo)簽代表一個選擇項

屬性:

name – 表單項名稱

size -- 選擇域的高度

multiple -- 可以有多個選擇

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

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

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

autocomplete 屬性

可用在form標(biāo)簽和input標(biāo)簽，實現(xiàn)自動完成輸入功能。它的值為：on（開啟）/off（關(guān)閉）。

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

我們來看一個例子，我們在form標(biāo)簽就開啟autocomplete 屬性。然后在其中一個子節(jié)點input標(biāo)簽關(guān)閉autocomplete 屬性。

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

這種寫法的結(jié)果就是：第一個input標(biāo)簽實現(xiàn)了開啟autocomplete，而第二個標(biāo)簽因為自己重新設(shè)置了autocomplete屬性為off關(guān)閉，所以第二個輸入域沒有實現(xiàn)自動補全的效果。

novalidate屬性

在提交表單時不應(yīng)該驗證 form 或 input 域。

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

我們來看這個例子：

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

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

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

它的用法如下：

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

autofocus 屬性

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

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

 <input type="text" autofocus>

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

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

form 屬性

規(guī)定input輸入是屬于哪個表單的。

這種情況，一般只會在當(dāng)input標(biāo)簽不是form標(biāo)簽的子節(jié)點的情況下才會使用。如：

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

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

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

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

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

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

如：

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 />

</form>

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

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

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

如何關(guān)閉自動完成功能

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

關(guān)閉輸入框的自動完成功能有3種方法：

1、在IE的Internet選項菜單里的內(nèi)容--自動完成里面設(shè)置

2、設(shè)置Form的autocomplete為"on"或者"off"來開啟或者關(guān)閉自動完成功能

（關(guān)閉整個表單（form）自動提示功能）

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

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

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

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

關(guān)閉自動完成功能的輸入框

</form>

關(guān)閉自動完成功能的Form<br>

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

關(guān)閉自動完成功能的輸入框

</form>

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

小猿圈web前端講師認(rèn)為：授之以魚更授之以漁，想要學(xué)好web前端首先需要就是端正自己的學(xué)習(xí)態(tài)度，明確學(xué)習(xí)目標(biāo)，這樣才能堅持學(xué)習(xí)。想要了解更多關(guān)于前端方面的小伙伴，可以關(guān)注小猿圈每天的動態(tài)，會不定期更新互聯(lián)網(wǎng)編程知識，希望對你的學(xué)習(xí)有一定的幫助。

在線咨詢

上一篇：一起學(xué)習(xí)HTML&CSS（005）-
下一篇：重磅！9個中文免費電子書網(wǎng)站合集來了

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5教程從入門到精通，隨堂筆記（二）H5的fo

autocomplete 屬性

novalidate屬性

autofocus 屬性

form 屬性

您的項目需求