HTML5表單Form屬性怎么用

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

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

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

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

<form id="register" method="post">

  <hgroup>

    <h2>Sign Me Up!</h2>

    <h3>I would like to receive your fine publication.</h3>

  </hgroup>

  <ul>

    <li>

      <label for="name">My name is:</label>

      <input type="text" id="name" name="name" required>

    </li>

    <li>

      <label for="email">My email address is:</label>

      <input type="email" id="email" name="email" required>

    </li>

        <li><label for="rememberme">Remember me on this computer</label>

          <input type="checkbox"  value="yes"  id="rememberme">

    </li>

    <li>

      <label for="url">My website is located at:</label>

      <input type="url" id="url" name="url" placeholder="http://example.com">

    </li>

    <li>

      <label for="password">I would like my password to be:</label>

      <p>(at least 6 characters, no spaces)</p>

      <input type="password" id="password" name="password" required pattern="\S{6,}">

    </li>

    <li>

      <label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>

      <input min="1" max="10" id="rating" name="rating" type="range">

    </li>

    <li>

      <label for="startdate">Please start my subscription on:</label>

      <input type="date" id="startdate" name="startdate" min="1904-03-17" max="1904-05-17" required>

    </li>

    <li>

      <label for="quantity">I would like to receive <input type="number" name="quantity" id="quantity" min="1" max="10" value="1"> copies of <cite>The HTML5 Herald</cite>.</label>

    </li>

    <li>

      <label for="upsell">Also sign me up for <cite>The css3 Chronicle</cite></label>

      <input id="upsell" name="upsell" type="checkbox">

    </li>

  </ul>

  <input type="submit" id="register-submit" value="Send Post Haste"/>

</form>

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

HTML5表單屬性

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

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

required屬性

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

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

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

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

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

placeholder屬性

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

<li>

   <label for="url">html5星空</label>

  <input  type="text"   id="url"   name= " url" placeholder= "http://www.html5star.com" >

</li>

pattem屬性

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

屬性來(lái)界定可接受的語(yǔ)法。

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

    下面的示例，讓我們?cè)诒韱蔚拿艽a字段添加一個(gè)pattern屬性。我們的強(qiáng)制要求是密碼至少是6位字符，并且小得有空格：

<li>

  <label for="password>l would like my password to be:</label>

  <p>(at least 6 characters, no spaces)</p>

  <input   type=password'   id= " password '   name= ' password   required

Npattern='\S{6,}'>

</li>

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

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

disabled屬性

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

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

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

readonly屬性

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

<label  for= " about ' >Article  Title</label>

<input  type= "text'   name= " about "   id= "about "   readonly>

multiple屬性

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

form屬性

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

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

autocomplete屬性

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

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

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

為off。

datalist元素和list屬性

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

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

如下示例：

<label  for-  favcolor " >Favorite  Color</label>

<input  type= 'text '   list=' colors "   id= "favcolor'   name='favcolor'>

<datalist id='colors'>

  <option value='Blue">

  <option value="Green'>

  <option value="Pink">

  <option  value=" Purple">

</datalist>

 autofocus屬性

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

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