本节重点

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>