本節(jié)重點(diǎn)

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

表單元素匯總解析

• 表單元素列表

• 其他表單元素

• 表單元素解析

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

1.form 表單解析

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

2.input 表單的屬性

3.<label>設(shè)置表單說明

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

4.<fieldset>對(duì)表單進(jìn)行編組

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

5.<legend>添加分組說明標(biāo)簽

<fieldset>
    <legend>注冊(cè)表單</legend>
</fieldset>

6.<button>添加按鈕

button 按鈕的type 屬性有如下幾個(gè)值:

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

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

input 表單的屬性用于 限制表單的內(nèi)容 + 表單的樣式

1.表單的屬性匯總

表單元素類型的分類解析

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

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

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

2.type值為password時(shí) 一般用于密碼框的輸入,所有的字符都會(huì)顯示星號(hào)

3.type值search search表單會(huì)顯示一個(gè)叉來取消搜索內(nèi)容

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

4. type 為 number蓝纲、range 時(shí)

    type = number 生成一個(gè)只能填寫數(shù)字的文本框
   
    type = range 生成一個(gè)表示數(shù)字范圍的文本框，并且只能拖動(dòng)
   

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

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

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

6.type = color 實(shí)現(xiàn)文本框獲取顏色的功能

7.type = image 生成一個(gè)圖片按鈕,點(diǎn)擊圖片就實(shí)現(xiàn)提交功能

8.type 為 checkbox箭养、radio 時(shí) 生成一個(gè)獲取布爾值的復(fù)選框或固定選項(xiàng)的單選框

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

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

    formaction撼泛、
    formenctype、
    formmethod澡谭、
    formtarget愿题、
    formnovalidate

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

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

11.type 為 hidden 生成一個(gè)隱藏控件

    <input type="hidden">

12.type 為 file 生成一個(gè)文件上傳控件

    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>下拉列表元素至少包含一個(gè)<option>子元素,才能形成有效的選項(xiàng)列 表抠忘。

   • <select> 可以充分利用 <optgroup> 形成分組select選擇區(qū)域內(nèi)分組

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.多行文本框

多行文本框的屬性設(shè)置

輸入驗(yàn)證 主要針對(duì)于表單中的 email password number 等形式的表單進(jìn)行驗(yàn)證

• 必填驗(yàn)證

    <input type="text" required>
  

• 范圍限制驗(yàn)證

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

• 正則表達(dá)式驗(yàn)證 適用于所有的表單

    <input type="text" placeholder="請(qǐng)輸入?yún)^(qū)號(hào)+座機(jī)" required pattern="^[\d]{2,4}\-[\d]{6,8}$">
  

• 阻止表單的驗(yàn)證動(dòng)作

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