HTML5新增的input类型及属性验证型：email、tel、url；取值型：range、number、color、d

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

一、input新增的类型

1-1、验证型input

验证型input包括：

1-1-1、email

语法：<input type="email" />
当输入非法邮箱后，点击提交会提示校验内容
- 要注意的是必须按钮必须是submit，且需要form表单配合（submit按钮配合form表单才会有效果）
因为email类型的文本框采用了浏览器内置的验证机制，内置的验证机制必须使用submit按钮才会触发

1-1-2、tel

语法：<input type="tel" />
tel类型的文本框不具备完整的验证功能，如果想达到验证功能，需要结合pattern属性

1-1-3、url

语法：<input type="url" />
url类型的文本框校验不严格（如：tps://www.xxx.com这种也可以通过校验），需要更完备的校验也要结合pattern属性 代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-新增input元素类型-验证型</title>
  </head>
  <body>
    <form action="post">
      <p><label>电子邮件：<input type="email" /></label></p>
      <p><label>手机号：<input type="tel" /></label></p>
      <input type="submit" value="提交">
    </form>
  </body>
</html>

1-2、取值型input

1-2-1、range

语法：<input type="range" min="最小值" max="最大值" step="间隔数" value="初始值"/>
常用属性：

min：最小值，可以是整数也可以是小数
max：最大值，可以是整数也可以是小数
step：间隔数，可以是整数也可以是小数
value：设置初始值
- 当设置了初始值后，滑块会显示到初始值的位置
- 当设置的初始值大于最大值/小于最小值时，滑块展示的位置与value值为设置的max/min
- 显示的初始值位置与step有关，比如最小值为-10，最大值为10，step为2，设置value为5，但是此时滑块会展示在6的位置！

1-2-2、number

语法：<input type="number" min="最小值" max="最大值" step="间隔数" value="初始值"/>
常用属性：

min：最小值，可以是整数也可以是小数
max：最大值，可以是整数也可以是小数
step：间隔数，可以是整数也可以是小数
value：设置初始值
- 显示的初始值与step无关，比如最小值是-10，最大值是10，step为2，当设置value为5时，数字也展示5只不过在增加或减少数字时，数字不会先加2或减2而是先变为6或4，然后再2个2个的变化
- 当设置的初始值大于最大值/小于最小值时，最初展示的数字与value值为所设置的值，但是一旦改变数字时便会变成设置的max/min

1-2-3、color

语法：<input type="color" value="初始值"/>
常用属性：

value：用来设置颜色的初始值，格式必须是十六进制如#F1F1F1，而不能是关键字或rgba

1-2-4、date

语法：<input type="date" value="初始值"/>
常用属性：

value：用来设置日期的初始值，格式必须是yyyy-MM-dd（如2021-12-24）

1-2-5、time

语法：<input type="time" value="初始值"/>
常用属性：

value：用来设置时间的初始值，格式必须是HH:mm（如11:06）

1-2-6、month

语法：<input type="month" value="初始值"/>
常用属性：

value：用来设置初始值，格式必须是yyyy-MM（如：2021-12）

1-2-7、week

语法：<input type="week" value="初始值"/>
常用属性：

value：用来设置初始值，格式必须是yyyy-WMM（如：2021-W07）

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-新增input元素类型-取值型</title>
    <style>
    </style>
    <script>
      window.onload = function () {
        let input = document.getElementsByTagName("input")[0];
        let output = document.getElementsByTagName("output")[0];

        let input2 = document.getElementsByTagName("input")[1];
        let output2 = document.getElementsByTagName("output")[1];

        let input3 = document.getElementsByTagName("input")[2];
        let output3 = document.getElementsByTagName("output")[2];

        output.value = input.value; // 获取初始值
        input.onchange = function () {
          output.value = input.value;
        }

        output2.value = input2.value;
        input2.onchange = function () {
          output2.value = input2.value;
        }

        output3.value = input3.value;
        input3.onchange = function () {
          output3.value = input3.value;
        }
      }
    </script>
  </head>
  <body>
    <form action="post">
      <p>
        <input type="range" min="-10" max="10" step="2" value="5">
        <output></output>
      </p>
      <p>
        <input type="number" min="-10" max="10" step="2" value="5">
        <output></output>
      </p>
      <p>
        <input type="color" value="#cd034a">
        <output></output>
      </p>
      <p>
        <input type="date" value="2021-12-24">
      </p>
      <p>
        <input type="time" value="13:14">
      </p>
      <p>
        <input type="month" value="2021-12">
      </p>
      <p>
        <input type="week" value="2021-W05">
      </p>
    </form>
  </body>
</html>

二、input元素新增属性

HTML5中input元素新增的属性有：autocomplete、autofocus、placeholder、required、pattern

2-1、autocomplete

用来实现文本框的自动提示功能

语法： <input type="text" autocomplete="on/off" />
使用场景：

一般结合datalist元素来实现自动提示功能（当在文本框中输入内容时，会自动匹配出符合的datalist中的option）
适用于所有文本框型的input元素，包括text password email url tel等

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-input元素新增的属性</title>
  </head>
  <body>
    <input type="text" autocomplete="on" list="datas">
    <datalist id="datas">
      <option value="HTML"></option>
      <option value="CSS"></option>
      <option value="JavaScript"></option>
      <option value="Vue.js"></option>
      <option value="React.js"></option>
    </datalist>
  </body>
</html>

2-2、autofocus

用来实现文本框的自动获取焦点

语法： <input type="text" autofocus="autofocus" />

也可以简写成： <input type="text" autofocus />

使用场景： 适用于所有文本框型的input元素自动获取焦点，包括text password email url tel等

2-3、placeholder

用来为文本框添加提示内容

语法： <input type="text" placeholder="提示文字" />
使用场景： 适用于所有文本框型的input元素，包括text password email url tel等

2-4、required

用来定义文本框输入内容不能为空

语法： <input type="text" required="required" />

也可以简写成： <input type="text" required/>

使用场景： 适用于所有文本框型的input元素，包括text password email url tel等

2-5、pattern

用来为文本框添加验证功能

语法： <input type="text" pattern="正则表达式" />
使用场景： 也适用于其他类型的input元素，如：email url tel等