小編給大家分享一下HTML5表單Form屬性怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出天峻免費做網(wǎng)站回饋大家。

    下面讓我們進(jìn)入正題：

    將表單包含在頁面中通常是開發(fā)人員最后做的事情——一些開發(fā)人員發(fā)現(xiàn)表單平淡乏味。好消息足，HTML5在對表單進(jìn)行代碼的過程中容入了一些樂趣。

    讓我們看一下如下的表單Form案例：

 HTML5特別針對email地址、URL、數(shù)字和日期等提供了新的輸入類型。除了這些新的輸入類型，HTML5也引入了可以與新的和目前使剛的輸入類型一起使用的屬性。這些允許您提供所需的占位符文本、標(biāo)記欄，以及聲明可接受的數(shù)據(jù)類型——這些都末用JavaScript。

HTML5表單屬性

    HTML5為我們提供了一些屬性，從而允許我們規(guī)定什么足可接受的值，并通知用戶輸入了錯誤信息等，這些都無需使用JavaScript。

    支持這些HTML5屬性的瀏覽器會將用戶輸入的數(shù)據(jù)與開發(fā)人員提供的常規(guī)表達(dá)模式進(jìn)行比較。然后檢查是否確實填寫了所有所需欄日，如果允許，可使用多個值等。更好的足，包含這些屬性將不會影響到舊版瀏覽器：舊版瀏覽器將會忽略所有不兼容的屬性。實際上，您可以使用這些屬性和值改進(jìn)腳本運行效率，而不需要將驗證模式硬編碼到您的JavaScript代碼中，或在標(biāo)記中添加多余的類。

required屬性

    布爾型required屬性告訴瀏覽器只有止確填寫了問題字段，才提交表單。顯然，這意味著問題字段小能是窄的，但也意味著根據(jù)其他屬性或字段類型，J s接受某些類型的值。

    如果所需字段為空或無效，表單將無法提交，而凡光標(biāo)將移到第一個無效表單元素。

    讓我們快速復(fù)習(xí)一下：當(dāng)用戶使用鼠標(biāo)單擊字段或在鍵盤上敲擊tab鍵時，焦點就對準(zhǔn)了表單元素，對于input元素，使用鍵盤打字使會將數(shù)據(jù)輸入到那個元素中。

    在JavaScript術(shù)語中，當(dāng)focus事件接收到焦點時，它會觸發(fā)表單元素；當(dāng)失去焦點時，就會觸發(fā)blur事件。在CSS中，focus偽類可用于設(shè)置目前處于焦點的元素的樣式。除了紅通常已有默認(rèn)值的button、range、color和hidden元素required屬件可以設(shè)胃任何輸入類型。正如其他有爾型屬性一樣，如果您使用XHTML，其語法可以足簡單的required或required=”required”。

    讓我們在注冊表單中添加required屬性。我們將姓名、email地址、密碼以及訂購起始日期中段設(shè)置為必需的。

placeholder屬性

    placeholder屬性允許顯示簡短的提示，如果空間允許，將告訴用戶在字段中應(yīng)輸入什么數(shù)據(jù)。在字段獲得焦點時，占位符文本消失，如果處在模糊狀態(tài)沒有數(shù)據(jù)輸入時，那會占位符文本會再次出現(xiàn)。開發(fā)人員多年來一直采用JavaScript來提供此功能，在HTML5中．占位符屬性是自帶的，而不再需要JavaScript。

pattem屬性

    pattern屬性使您能夠提供一種正則表達(dá)式，使用戶的輸入與之匹配才能視為有效。對于任何input元素，用戶可以輸入自由格式的文本，您可以使用pattern

屬性來界定可接受的語法。

    在模式中使用的正則表達(dá)式語言是與JavaScript -樣的基于Perl的正則表達(dá)式語法，但pattern屬性必須與整個值匹配，而不僅僅是一個子集。由于瀏覽器當(dāng)前以類似于工具提示條的形式顯示title屬性的值，它包含比占位符文本更詳細(xì)的模式指令，并形成了一個連貫的指令，所以在包含pattern屬性時，您應(yīng)向用戶表明所期望的（要求的）模式。

    下面的示例，讓我們在表單的密碼字段添加一個pattern屬性。我們的強(qiáng)制要求是密碼至少是6位字符，并且小得有空格：

    \s指的是“任何非空白字符，”{6，}指的是“至少6次。”如果您想規(guī)定字符的最大數(shù)量，語法是\s{6，10)指的是6—10個字符。與required屬性一樣，如果模式4；匹配．pattern屬性將拒絕提交，并提供錯誤信息。

    如果您使用的模式不是有效的正則表達(dá)式，將不會被驗證。還要注意到，與placeholder和required屬性類似，對于4i支持該屬性的瀏覽器，您可以使用此屬性的值為JavaScript驗證代碼提供一個依據(jù)。

disabled屬性

    布爾型disabled屬性存在的時間要比HTML5還要長，但在某種程度已經(jīng)對它進(jìn)行了擴(kuò)展。它應(yīng)用于除新的output元素外的任何表單控制元素，并不

像HTML的早期版本，HTML5允許您在fieldset上設(shè)置disabled屬性，并將其應(yīng)用于包含在fieldset的所有表單元素。

    通常情況下，表單元素的disabled屬性使在瀏覽器中的內(nèi)容變灰。使用disabled屬性的表單控件并爿i隨表單提交，所以它們的值對服務(wù)器端的表單處理代碼不可用。如果您想使該值不被用戶編輯，但是能夠看到并提交它，可使用readonly屬性。

readonly屬性

    readonly屬性類似于disable屬性：它使用戶不能夠編輯表單字段。但是，與disabled屬性不同，該字段只能夠接受焦點，其值與表單一起提交。

multiple屬性

    如果使用multiple屬性，就表明在表單控件中可以輸入多個值。雖然在HTML以前的版本中已經(jīng)有此屬性，但它僅應(yīng)用jt：select元素。在HTML5中，它也可以被添加到email和file輸入類型中。如果使用它，用戶可以選擇多個文件，或包含多個逗號分隔的電子郵件地址。

form屬性

    為了不與form元素混淆，在HTML5中的form屬性允許您使表單元素與沒有被嵌套的表單相關(guān)聯(lián)。這意味著您現(xiàn)在可以使-一個表單元件的群組或表單控件與文檔中的任何其他表單相關(guān)聯(lián)。form屬性將form元素的id作為其值，與表單元件的群組或控件相關(guān)聯(lián)。

    如果屬性被省略，那么控件將與其嵌套的form一起提交。

autocomplete屬性

    autocomplete屬性指定不管是表單還是表單控件，都應(yīng)有一個自動完成的功能。對于人多數(shù)表單字段，當(dāng)用戶開始輸入時，將出現(xiàn)一個下拉列表。對于密碼字段，它具有在瀏覽器中保存密碼的功能。在瀏覽器中支持這種功能已經(jīng)多年，盡管直到HTML5才將它寫入規(guī)范中。

    在默認(rèn)狀態(tài)下，autocomplete屬性是開的狀態(tài)。在您意識到這是最后一次所填的表單時，為了禁用它，可以使用autocomplete=" off”。這是處理敏感信息的好方法，比如信用卡號碼或彳i需要最新使用的信息，如CAPTCHA。

    自動完成也由瀏覽器控制。用戶可以在他們的瀏覽器中打開自動完成的功能。然而，如果您想覆蓋這個優(yōu)先選擇設(shè)置，可將autocomplete屬性設(shè)置

為off。

datalist元素和list屬性

    它們能夠滿足一個普通的要求：具有一組預(yù)定義自動完成選項的文本字段。和select元素不一樣，用戶可輸入自己喜歡的任何數(shù)據(jù)，但當(dāng)輸入時，在下拉列表中會有一組建議選項旱現(xiàn)存用戶面前。

    datalist元索，與select元素非常相似，是一個選項列表，每一個選項都放置在option元素中。然后您可以使用input元素的list屬性將datalist與一個輸入相關(guān)聯(lián)。list屬性將與輸入相關(guān)聯(lián)的datalist的id屬性作為其值。一個datalist可與若干個輸入宇段相關(guān)聯(lián)。

如下示例：

Favorite  Color

 autofocus屬性

    布爾型autofocus屬性指定在頁面加載完成時，表單控件應(yīng)被對準(zhǔn)焦點。在一個指定頁面只町以有一個表單元素具有autofocus屬性。

以上是“HTML5表單Form屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！