html5簡介、選項輸入框、表單元素分組、input

html5簡介、選項輸入框、表單元素分組、input新增屬性及屬性值

HTML5簡介:

定義：HTML5號稱下一代HTML，html的最新版本，定義了新的標簽、css、JavaScript，html5新標簽IE9以上版本瀏覽器才兼容，因此在實際開發中要問老板是否兼容低版本瀏覽器。

擴展內容：語義化標簽、本地儲存、兼容特性、2D 3D、動畫過渡、CSS3新特性、性能與集成

HTML5常用新標簽：

HTML5標簽多為語義化標簽，主要是針對瀏覽器搜索引擎，IE9瀏覽器中主要將所有語義化標簽都轉化為塊級元素，語義化標簽在移動端支持比較好，后面會有更多語義化標簽學習。

HTML5常用新標簽：

datalist選項輸入框:

此標簽和input標簽搭配可以實現input輸入提示，注意：input標簽中必須要有list屬性，其值綁定的是datalist的id值，option標簽中的value值不能為空，否則此功能失效。

    <body>
        <input type="text" value="輸入科目" list="lis" >
        <datalist id='lis'>
        <option value="科目1"></option>
        <option value="科目2"></option>
        <option value="科目3"></option>
        <option value="科目4"></option>
        </datalist>
    </body>

fieldset表單元素分組:

此標簽和legend標簽搭配可以將表單內相關元素分組（外部用一個矩形的方框包裹）


    <body>
      <fieldset>
        <legend>用戶信息</legend>    <!-- 矩形框邊插入的文本信息,去掉此標簽則為 封閉的矩形 -->
        <input type="text" value="user"><br>
        <input type="password" value="password">
      </fieldset>
    </body>

html5中input標簽的type屬性新增屬性值：

input中新增屬性：

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯系本人咨詢：

QQ：810665436

微信：ConstancyMan

、表單標簽Form

1. 什么是表單

表單在網頁中負責數據采集功能的。表單是有3部分組成：

（1）表單標簽 <form></form>

（2）表單域

（3）表單按鈕

2. Form標簽、

語法格式：

</form>

html開發中，表單是頁面上重要的內容，用戶輸入內容大部分內容都是通過表單收集的，在html4中表單元素是相對繁瑣的，在html5中，吸納了web forms2.0標準，大大加強了針對表單元素的功能。下面為大家介紹html5中新增的表單元素。

form元素

在html4中表單內的從屬元素必須寫在表單內部，在html5中沒有這個限制，可以寫在頁面任何地方，然后給該元素一個from屬性，屬性值為該表單的id，這樣就可以聲明該元素從屬于指定的表單了。示例代碼：<form id="test"><input type="text"></form><textarea form="test"></textarea>textarea屬性被寫在form表單之外，但它從屬于form表單，所以將form表單id指定給textarea元素的form屬性。這樣的好處在于我們可以方便添加元素的樣式，因為它們不是分散在各表單之內。不過現在只是部分瀏覽器支持這一屬性。

formaction屬性

在html4中，一個表單所有的元素只能通過表單的action屬性統一提交另一頁面，而在HTML5中可以給所有的提交按鈕（<input type="submit">、<input type="image">、<button type="submit">），都增加了不同的formaction屬性，點擊不同的按鈕提交給不同的頁面。

placeholder屬性

placeholder是指當文本框（<input type="text">或<textarea>）處于未輸入狀態時文本框顯示的輸入提示。只要加上了placeholder屬性，在指定提示文字就可以了。

autofocus屬性

給文本框、選擇框或按鈕加上該屬性，當畫面打開時，控件自動獲得焦點。在html4中做到這個效果需要使用JavaScript如“control.focus()”。不建議隨意使用該屬性，比如搜索頁面中的搜索文本框。

list屬性

在html5中，為單行文本框增加了一個list屬性，該屬性的值為某個datelist元素的id。datelist也是html5新增的元素，該元素類似選擇框（select）。但是當用戶想要設定的值不在選擇列表時，允許自行輸入。該元素本身并不顯示，而是文本框獲得焦點時提示輸入的方式顯示。為了避免在沒有支持元素的瀏覽器顯示錯誤，可以用css將它設置為不顯示。

autocomplete屬性

輔助輸入所有的自動完成功能，節省輸入時間，同時也十分方便。可以指定“on”、“off”、“不指定”這三種值，不指定時，取決各個瀏覽器。屬性為on時，可以顯示指定候補輸入的數據列表，off反之。

如果有漏掉其他方法，歡迎大家補充。每天學習一個知識點，每日寄語“失敗只有一種，那就是半途而廢。”

在線咨詢

上一篇：自動化測試之HTML測試報告
下一篇：我是如何把一個nodejs項目部署上線的

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html5簡介、選項輸入框、表單元素分組、input

您的項目需求