HTML5-新增表单元素

新增以下type值类型：

属性值	说明
email	邮件类型（验证）
tel	电话号码
url	URL类型（验证）
range	取数字（滑块方式）
number	取数字（微调方式）
color	取颜色
date	取日期（如2018-11-11）
time	取时间（如08:05）
month	取月份
week	取周数

验证型

email

概念：当type属性为"email"时，表示这是输入电子邮件的文本框

语法：

<input type="email" />

注意：在电子邮件文本框中或输入非电子邮件格式的字符时，然后点击提交按钮，会发现无法提交并且弹出提示内容

tel

概念：当type属性取值为"tel"时，表示这是输入电话号码的文本框

语法：

<input type='tel' />

注意：当我们输入非电话号码格式的字符，然后点击【提交】按钮，是可以提交的。这是因为tel类型文本框并不具备完备的验证功能。想要达到验证效果，则需要pattern属性来实现

url元素

概念：当type属性取值为“url”时，表示这是输入URL的文本框

语法：

<input type="url" />

注意:URL格式字符指的是以"http://"或者"https://"开头的网络地址。它本身跟tel元素一样不具备完整的验证机制，需结合pattern属性来弥补

取值型

range

概念：当type属性取值为“range”时，可以通过拖动滑块条获取某一个范围内的数字

语法:

<input type="range" min="最小值" max="最大值" step="间隔数" value="默认值">

range属性值

属性名	描述
max	规定允许的最大值
min	规定允许的最小值
step	规定合法的数字间隔（如果step="3",则合法的数可能是-3，0，3，6等，增加的数在前一个加上3）
value	规定默认值

实例:

 <label for="keyword">数字:</label>
    <input type="range" name="keyword" id="keyword"min="0" max="10" step="2">

number

概念：当type属性取值为number时，number类型的input控件用于通过微调按钮来获取某一个范围的数字。

语法:

<input type="number" min="最小值" max="最大值" step="间隔数" value="默认值">

number的属性值

属性名	描述
max	规定允许的最大值
min	规定允许的最小值
step	规定合法的数字间隔（如果step="3",则合法的数可能是-3，0，3，6等，增加的数在前一个加上3）
value	规定默认值

实例：

 <label for="number_type">请输入数字：</label>
    <input type="number" name="number_type" id="number_type" max="10" min="1" step="3">

说明：在运行结果中的number类型文本框中，可以直接输入数字，也可以通过右侧的微调按钮来改变数字

color

概念：当type属性取值为"color"时，可以直接使用浏览器自带的取色工具来获取颜色值

语法：

<input type="color" value="" />

实例：

<p>
    <label for="">color属性:</label>
    <input type="color" value="#f1f1f1">
</p>

Date Pickers类型

Date Pickers类型是日期时间类型。

日期时间选择器类型

注意：UTC即协调世界时，又称世界标准时间

date

概念：当type属性取值为“date”时，可以直接使用浏览器自带的日历工具来获取日期（年，月，日）

语法

<input type="date" value=""/>

说明：value属性用于设置日期初始值，格式必须如“2023-12-20”，像“2023--12-20”是无效的

time

概念：当type属性取值为"time"时，直接通过浏览器自带的工具来获取时间（时，分）

语法

<input type="time" value=""/>

说明：value属性用于设置时间初始值，格式必须如"08:01"，像“8:1”这种是无效的

month

概念：当type属性取值为month时，直接通过浏览器自带的工具来获取月数

语法

<input type="month" value="" />

说明：value属性用于设置初始值，格式必须如”2023-09“

week

概念：当type属性取值为"week",直接通过浏览器自带的工具来获取周数

语法

<input type="week" value=""/>

说明：value属性用于设置初始值，格式必须如”2023-W03“.其中，”W“是”week“的缩写

实例

<form action="">
            date:<input type="date"><br/>
            month:<input type="month"><br/>
            week:<input type="week"><br/>
            time:<input type="time"><br/>
            datetime:<input type="datetime"><br/>
            datetime-local:<input type="datetime-local""><br/>
            <input type="submit" value="提交">
        </form>

运行结果：