HTML5中的表单元素

本节重点

HTML5中添加了许多新特性的表单元素
表单元素主要表现在元素Element + 类型Type + 属性attribute

表单元素汇总解析

表单元素列表

元素名称	说明
form	表示 HTML 表单
input	表示用来收集用户输入数据的控件
textarea	表示可以输入多行文本的控件
select	表示用来提供一组固定的选项
option	表示提供提供一个选项
optgroup	表示一组相关的 option 元素
button	表示可用来提交或重置的表单按钮(或一般按钮)
datalist	定义一组提供给用户的建议值
fieldset	表示一组表单元素
legend	表示 fieldset 元素的说明性标签
label	表示表单元素的说明标签
output	表示计算结果

其他表单元素

元素名称	说明
select	生成一个下拉列表进行选择
optgroup	对 select 元素进行编组
option	select 元素中的项目
textarea	生成一个多行文本框
output	表示计算结果

表单元素解析

表单元素有许多共有的属性，大家注意分辨不同表单元素的特有属性

1.form 表单解析

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

属性名称	说明
action	表单需要提交的页面
method	表单需要提交的方式 get/post
`entype`	`entype与文件上传息息相关`<br /> 1. application/x-www-form-urlencoded(默认编码，不能将进行文件上传) 2. multipart/form-data (用于将文件上传到服务器的编码) <br /> 3. text/plain (未规范编码，不建议使用)
name	表单名称，建议书写，用于程序识别表单
target	设置提交时的目标位置:_blank、_parent、_self、_top
autocomplete	设置浏览器记住用户输入的数据,实现自动完成表单。<br />`默认为on`自动完成 , 如果不想自动完成则设置 off。
novalidate	是否进行表单的有效性检查(浏览器m默认的检查效果)

2.input 表单的属性

属性名称	说明
autofocues	让光标聚焦在input上，可以让用户直接输入
disable	禁用input,(禁止用户输入)
autocomplete	设置input的自动完成功能
`form`	`设置表单挂钩` 让表单外的元素设置表单挂钩提交
type	元素的 type 属性是最多的

3.<label>设置表单说明

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

4.<fieldset>对表单进行编组

 `<fieldset>`元素可以将一些表单元素组织在一起,形成一个整体,并且可与外部挂钩

属性名称	说明
name	给分组定义一个名称
form	让表单外的分组与`表单挂钩`
disabled	禁用分组内的表单

5.<legend>添加分组说明标签

<fieldset>
    <legend>注册表单</legend>
</fieldset>

6.<button>添加按钮

button 按钮的type 属性有如下几个值:

值名称	说明
submit	表示按钮的作用是提交表单,默认
reset	表示按钮的作用是重置表单
button	表示按钮为一般性按钮,没有任何作用

button 的 type = submit 时会提供额外的属性 主要用作覆盖已有的 form 表单属性

属性名称	说明
form	指定按钮关联的表单
formaction	覆盖 form 元素的 action 属性
formenctype	覆盖 form 元素的 enctype 属性
formmethod	覆盖 form 元素的 method 属性
formtarget	覆盖 form 元素的 target 属性
formnovalidate	覆盖 form 元素的 novalidate 属性

表单元素(主要为 Input)的类型 Type

input 表单的属性用于限制表单的内容 + 表单的样式

1.表单的属性汇总

属性	说明
text	简单的文本框，input的默认行为
password	密码框
search	搜索框
submit 、reset 、button	提交按钮、重置按钮、普通按钮
number range	只能输入数字的按钮，range 用于设置数字范围
checkbox 、radio	复选框，单选框
image	生成一个图片按钮
color	生成颜色代码的按钮
email、tel、url	生成一个检测电子邮件、号码、网址的文本框
date、month、time、<br /> week、datetime、 datetime-local	获取日期和时间
hidden	生成一个隐藏的控件
file	生成一个上传文件的组件

表单元素类型的分类解析

1.type值为text时 <input type = "text"> 元素属性

属性	说明
list	和为 input 框提供值的datalist一块使用，相当于select的变形形式
maxlength	设置文本框的最大宽度
pattern	用于输入的正则表达式
placeholder	用于输入字符的提示
readonly	设置只读状态
disabled	设置禁用状态
size	`设置文本框的宽度`
value	文本框的初始值
required	是否为必填字段

设置文本提供的建议值为 select 的变相形式

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

2.type值为password时一般用于密码框的输入,所有的字符都会显示星号

属性名称	说明
maxlength	设置密码框最大字符长度
pattern	用于输入验证的正则表达式
placeholder	输入密码的提示
readonly	密码框处于只读状态
disabled	文本框处于禁用状态
size	设置密码框宽度
value	设置密码框初始值
required	表明用户必须输入同一个值

3.type值search search表单会显示一个叉来取消搜索内容

search 表单的属性和 text 表单的属性相同

type 为 number、range 时

 type = number 生成一个只能填写数字的文本框

 type = range 生成一个表示数字范围的文本框，并且只能拖动

属性	说明
list	指定为文本框提供建议值的 datalist 元素,其值为 datalist 元素的 id 值
`min`	`设置可接受的最小值`
`max`	`设定可接受的最大值`
readonly	设置文本框内容只读
required	表明用户必须输入一个值,否则无法通过输入验证
`step`	`指定上下调节值的步长`
value	指定初始值

    设置数字的步长以及范围
    <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 生成一个图片按钮,点击图片就实现提交功能

属性名称	说明
src	指定要显示图像的 URL
alt	提供图片的文字说明
width	图像的长度
height	图像的高度
`提交额外属性`	`formaction`、`formenctype`、`formmethod`、`formtarget`和 `formnovalidate`。

8.type 为 checkbox、radio 时生成一个获取布尔值的复选框或固定选项的单选框

属性名称	说明
checked	设置复选框、单选框是否为勾选状态
required	表示用户必须勾选,否则无法通过验证
`value`	设置复选框、单选框勾选状态时提交的数据。默认为 on

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	指定接受的 MIME 类型
required	表明用户必须提供一个值,否则无法通过验证

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

其他元素解析 select + textarea

其他表单元素

元素名称	说明
select	生成一个下拉列表进行选择
optgroup	对 select 元素进行编组
option	select 元素中的项目
textarea	生成一个多行文本框
output	表示计算结果

select表单元素 生成下拉列表
```
 <select name="fruit">
     <option value="1">苹果</option>
     <option value="2">橘子</option>
     <option value="3">香蕉</option>
 </select>
```
- <select>下拉列表元素至少包含一个<option>子元素,才能形成有效的选项列表。
- <select> 可以充分利用 <optgroup> 形成分组select选择区域内分组

slect的属性解析 (所有的表单元素都有 autofocus 属性)

属性名称	说明
name	设定提交时的名称
disabled	将下拉列表禁用
form	将表单外的下拉列表与某个表单挂钩
size	设置下拉列表的高度
`multiple`	`设置是否可以多选`

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

多行文本框的属性设置

属性名称	说明
name	设定提交时的名称
form	将表单外的多行文本框与某个表单挂钩
readonly	设置多行文本框只读
disabled	将多行文本框禁用
maxlength	设置最大可输入的字符长度
autofocus	获取焦点
placeholder	设置输入时的提示信息
rows	设置行数
cols	设置列数
wrap	设置是否插入换行符,有 soft 和 hard 两种
required	设置必须输入值,否则无法通过验证

输入验证主要针对于表单中的 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>