HTML5表單Form屬性怎么用

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

    下面讓我們進入正題：

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

    讓我們看一下如下的表單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特別針對email地址、URL、數字和日期等提供了新的輸入類型。除了這些新的輸入類型，HTML5也引入了可以與新的和目前使剛的輸入類型一起使用的屬性。這些允許您提供所需的占位符文本、標記欄，以及聲明可接受的數據類型&mdash;&mdash;這些都末用JavaScript。

HTML5表單屬性

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

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

required屬性

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

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

    讓我們快速復習一下：當用戶使用鼠標單擊字段或在鍵盤上敲擊tab鍵時，焦點就對準了表單元素，對于input元素，使用鍵盤打字使會將數據輸入到那個元素中。

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

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

placeholder屬性

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

<li>

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

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

</li>

pattem屬性

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

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

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

    下面的示例，讓我們在表單的密碼字段添加一個pattern屬性。我們的強制要求是密碼至少是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次。”如果您想規定字符的最大數量，語法是\s{6，10)指的是6&mdash;10個字符。與required屬性一樣，如果模式4；匹配．pattern屬性將拒絕提交，并提供錯誤信息。

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

disabled屬性

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

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

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

readonly屬性

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

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

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

multiple屬性

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

form屬性

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

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

autocomplete屬性

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

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

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

為off。

datalist元素和list屬性

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

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

如下示例：

<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屬性指定在頁面加載完成時，表單控件應被對準焦點。在一個指定頁面只町以有一個表單元素具有autofocus屬性。

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