HTML5学习笔记4

10.表单元素
表单元素用于获取用户的输入数据
form 表示HTML表单
属性：
    action 表示表单提交的页面
    method 表示表单提交的请求方式：有POST和GET两种，默认GET（POST采用表单提交，GET采用超链接提交）
    enctype 表示浏览器对发生给服务器的数据所采用的编码格式（需要将文件上传的时候才设置），有三种
       application/x-www-form-urlencoded 默认编码，不能将文件上传到服务器
       multipart/form-data 用于将文件上传到服务器
       text/plain 未规范编码，不建议使用，不同浏览器理解不同
    name 设置表达名称，以便程序调用
    target 设置提交表单的目标位置：_blank,_parent,_self,_top
    autocomplete 设置浏览器记住用户输入的数据，实现自动完成表达，默认为on自动完成
    novalidate 设置是否执行客户端数据的有效性检查

input 表示用来收集用户输入数据的控件
属性：
    autofocus 将光标聚焦在某个input元素上，让用户直接输入
    disabled 禁用input元素
    autocomplete 单独设置input元素的自动完成功能
    type input元素的类型，见下面介绍
    name 定义input元素的名称，以便直接接收到相应的值
    value 默认出现的值
    form 让表单外的元素和指定的表单挂钩提交（要设置id）

label 表示表单元素的说明标签 可以设置css样式，提高用户体验
fieldset 表示一组表单元素可以将一些表单元素组织在一起，形成一个整体
legend 表示fieldset元素的说明性标签 给分组加上一个标题
button 表示可用来提交或重置的表单按钮
    type属性有以下三个值
       submit 提交表单 内部属性可以覆盖form的一些属性
       reset  重置，初期化
       button 一般性按钮，配合javascript使用
textarea 表示可以输入多行文本的控件
select 表示用来提供一组固定的选项
datalist 定义一组提供给用户的建议值
option 表示提供一个选项
optgroup 表示一组相关的option元素
output 表示计算结果

<form action="" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
	<input type="number" id="num1">*<input type="number" id="num2">=
	<output for="num1 num2" name="res">
	<button>提交</button>
</form>

input的type属性值：
button     定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox     定义复选框。
file     定义输入字段和 "浏览..." 按钮，供文件上传
hidden     定义隐藏输入字段
image     定义图像作为提交按钮
password     定义密码字段。字段中的字符会被遮蔽。
radio     定义单选按钮。
reset     定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search     定义用于搜索的文本字段。
text     默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
html5新增属性：
color     定义拾色器。
date     定义日期字段（带有 calendar 控件）
datetime     定义日期字段（带有 calendar 和 time 控件）
datetime-local     定义日期字段（带有 calendar 和 time 控件）
month     定义日期字段的月（带有 calendar 控件）
week     定义日期字段的周（带有 calendar 控件）
time     定义日期字段的时、分、秒（带有 time 控件）
email     定义用于 e-mail 地址的文本字段
number     定义带有 spinner 控件的数字字段
range     定义带有 slider 控件的数字字段。
submit     定义提交按钮。提交按钮向服务器发送数据。
tel     定义用于电话号码的文本字段。
url     定义用于 URL 的文本字段。

输入验证：

HTML5对验证比较简陋，主要还是靠javascript和JQuery去做

<form>
	<input type="text" required>
	<input type="number" min="10" max="100">
	<input type="text" placeholder="请输入区号+座机" pattern="^[\d]{2,4}\-[\d]{6,8}$">
	<button>tijiao</button>
</form>