本節重點

1. HTML5中添加了許多新特性的表單元素
2. 表單元素主要表現在 元素Element + 類型Type + 屬性attribute

表單元素匯總解析

• 表單元素列表

• 其他表單元素

• 表單元素解析

  表單元素有許多共有的屬性，大家注意分辨 不同表單元素的特有屬性

1.form 表單解析

    <form method="post" action="http://www.haosou.com/">
            <button>提交</button>
        </form>
    form 表單的屬性

2.input 表單的屬性

3.<label>設置表單說明

 <label for="user">用戶名:</label>

4.<fieldset>對表單進行編組

 `<fieldset>`元素可以將一些表單元素組織在一起,形成一個整體,并且可與外部掛鉤

5.<legend>添加分組說明標簽

<fieldset>
    <legend>注冊表單</legend>
</fieldset>

6.<button>添加按鈕

button 按鈕的type 屬性有如下幾個值:

button 的 type = submit 時會提供額外的屬性 主要用作覆蓋已有的 form 表單屬性

表單元素(主要為 Input)的類型 Type

input 表單的屬性用于 限制表單的內容 + 表單的樣式

1.表單的屬性匯總

表單元素類型的分類解析

1.type值為text時 <input type = "text"> 元素屬性

設置文本提供的建議值 為 select 的變相形式

    <input list="footlist">
    
    <datalist id="footlist">
        <option value="蘋果">蘋果</option>
        <option value="桔子">桔子</option>
        <option value="香蕉" label="香蕉"> <option value="梨子">
    </datalist>

2.type值為password時 一般用于密碼框的輸入,所有的字符都會顯示星號

3.type值search search表單會顯示一個叉來取消搜索內容

search 表單的屬性和 text 表單的屬性相同

4. type 為 number、range 時

    type = number 生成一個只能填寫數字的文本框
   
    type = range 生成一個表示數字范圍的文本框，并且只能拖動
   

    設置數字的步長以及范圍
    <input type="number" step="2" min="10" max="100">

5.type = data時 文本框可以獲取日期和時間的值

    <input type="date">
    <input type="month">
    <input type="time">
    <input type="week">
    <input type="datetime">
    <input type="datetime-local">

6.type = color 實現文本框獲取顏色的功能

7.type = image 生成一個圖片按鈕,點擊圖片就實現提交功能

8.type 為 checkbox、radio 時 生成一個獲取布爾值的復選框或固定選項的單選框

9.type 為 submit、reset 和 button 生成 提交、重置和一般按鈕

如果是 type = submit 時,提供了和<button>元素一樣的額外屬性

    formaction、
    formenctype、
    formmethod、
    formtarget、
    formnovalidate

10.**type 為 email、tel、url **

    <input type="email">
    <input type="tel">
    <input type="url">

11.type 為 hidden 生成一個隱藏控件

    <input type="hidden">

12.type 為 file 生成一個文件上傳控件

    accept="image/gif, image/jpeg, image/png"

其他元素解析 select + textarea

1. 其他表單元素

2. select表單元素 生成下拉列表

    <select name="fruit">
        <option value="1">蘋果</option>
        <option value="2">橘子</option>
        <option value="3">香蕉</option>
    </select>
   

   • <select>下拉列表元素至少包含一個<option>子元素,才能形成有效的選項列 表。

   • <select> 可以充分利用 <optgroup> 形成分組select選擇區域內分組

slect的屬性解析 (所有的表單元素都有 autofocus 屬性)

    <select name="fruit" size="30" multiple>
        <option value="2" selected>橘子</option>
        <optgroup label="水果類">
            <option value="1">蘋果</option>
            <option value="2" selected>橘子</option> 
            <option value="3" label="香蕉">香蕉</option>
        </optgroup>
        
    </select>

3.多行文本框

多行文本框的屬性設置

輸入驗證 主要針對于表單中的 email password number 等形式的表單進行驗證

• 必填驗證

    <input type="text" required>
  

• 范圍限制驗證

    <input type="number" min="10" max="100">
  

• 正則表達式驗證 適用于所有的表單

    <input type="text" placeholder="請輸入區號+座機" required pattern="^[\d]{2,4}\-[\d]{6,8}$">
  

• 阻止表單的驗證動作

    <form action="http://li.cc" novalidate>