2019.10.14【Input/form新增功能】

一.input新增的值

1. input标签type属性

①　
email 用于应该包含“e-mail"地址的输入框
url 用于应该包含“URL"地址的输入框
search 用于应该“搜索内容"的输入框
number 用于应该包含“数值"的输入控件
tel 规定显示的类型为“电话号码"的输入框
range 规定显示的类型为“数值选择范围"选择控件
color规定显示的类型为“颜色"选择控件
日期相关
date规定显示的类型为“日期"选择控件
month规定显示的类型为“月份"选择控件
week规定显示的类型为“周"选择控件
time规定显示的类型为“时间"选择控件
datetime规定显示的类型为“日期时间"选择控件
datetime-local规定显示的类型为“本地日期时间"选择控件
由于在制定HTML5标准时，无论移动端的Web浏览还是移动端的应用都已经开始逐渐的成为一种新的主流浏览方式了，所以以上这些属性大多在移动端有比在PC端更好的表现。

1.1 email    

email 让input接收一个邮箱地址
基本形式如下：

  <input type="email" name="eamil"  />

注意：

1. 只要当你输入的内容不为空时才会进行验证，
2. 只验证如下形式的值：【任意字符+@+任意字符】

②　Url
url 让input接收一个url地址（网站地址）
基本形式如下：

 <input type="url"  name="url" />

注意：

1. 只要当你输入的内容不为空时才会进行验证
2. 一般只验证如下形式的值：【 任意字符 + : 】
   扩展：
3. 在nodpad++里面，同时按下ctrl+k，能够进行一个自动的注释
4. 同时按下win菜单键+R,调出运行窗口，输入osk，能打开虚拟键盘
   ③　number
   number 让input只接受数字的输入
   基本形式如下：

    <input type="number" name="myNumber" />

注意：

1. 只要当你输入的内容不为空时才会进行验证，
2. 你只能输入数字，输入非数字类型会被拒绝。（可输入和数字相关的正负号，小数点，e）
3. 在输入框右侧会提供自动加减的符号，默认值为0.
4. 如果输入的值太大，那么会转换为一个科学计数法表示.
   可通过以下属性对值进行限定：max,min,step,value

一旦给了最大最小值等范围，和step间隔，那么所有的数都等于是已经被定义了
④　range
range 让input变为一个滑动条
基本形式如下：

注意：

1. 默认值为50，范围为0–100.
2. 我们可以通过一个默认的get请求看到他的值
   可通过以下属性对值进行限定：max,min,step,value

⑤　color
color 颜色选择器
基本形式如下：

<input type="color" name="myColor" />

注意： Color 类型显示为一个颜色选择器
⑥　日期选择器
日期选择器, type的值为下面之一
date 年、月、日
month 年、月
week 年、周
time 小时、分钟
datetime 年、月、日、时间（UTC 时间–浏览器支持程度较弱）
datetime-local 选取：年、月、日、时间（本地时间）
基本形式如下：

  <input type="date" name="myDate" />

扩展：
UTC时间 : 通用协调时
GMT时间：格林威治平均时
UTC时间GMT时间英国伦敦的本地时间
UTC+8小时==北京时间

2.Input上新增的属性

①　required
required 要求input的值为必填
基本形式如下：

 <input type="text"name="username" required =“required "  />

或者

 <input type="text"  name="username" required  />

注意：
1、 placeholder能用于text,password,eamil,url,number,search等类型
2. placeholder不能用于range,color，date等非文本框类型
②　pattern
pattern 用于验证 input输入值是否合法，
适用于以下类型的 input标签：
text, search, url, telephone, email 以及 password。
使用形式：

<input type="text" name="test" pattern="[0-9]{6,12}" title="你应该输入6到12位的数字" />

提示：pattern所在的input一般应该为text文本类型才能生效
③　form
规定输入域所属的表单，适用于所有 input>标签的类型，使用形式：

<input type="text" name="test" form="formId" />
<form id="formId" action="https://www.baidu.com/">
<input type="submit" />
</form>

④　Width & height
height 和 width 、规定用于 image 类型的 input 标签的图像高度和宽度. 使用形式：

<input type="image" src="img_submit.gif" width="99" height="99" />

⑤　重写属性
表单重写属性适用于以下类型的 input>标签：submit 和 image。
formaction - 重写表单的 action 属性
formmethod - 重写表单的 method 属性
formtarget - 重写表单的 target 属性
还能重写enctype与novalidate等
使用形式：

<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />

这些属性对于创建不同的提交按钮很有帮助。

3.Form上新增的属性

①　autocomplete
规定是否启用表单的自动完成功能，其值如下：
on //开启自动完成功能【默认为on,开启状态】
off //关闭自动完成功能

②　novalidate
如果使用该属性，则提交表单时不进行html5自带的验证。
基本写法 novalidate=“novalidate”

4.表单新增标签

①　datalist 标签
datalist规定输入域的选项列表，类似于select标签.

注意：
datalist的一定要有id属性，并且此属性还必须要和某一个文本域input的list属性值一样才能渲染出来。
②　output 标签
output 元素用于不同类型的输出，比如计算或脚本输出

<form oninput="c.value=Number(a.value) + Number(b.value)">

<input name="a" value="0" />
+
<input name="b" value="0" />
=
<output name="c">0</output>
</form>

注意：
就现在的浏览器支持程度而言，如果我们要获取input的实时改变，我们需要通过oninput属性获取。oninput属性既可以写在form表单上也可以写在input的输入域上。