HTML5-新增的表单元素_html5新增表单元素-CSDN博客

本文介绍了HTML5中新增的表单元素类型，包括验证型和取值型，并详细解释了email、tel、url等类型的特点及使用方法。此外，还介绍了新增的output和datalist元素的作用。

HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展：

新增input元素类型；
新增其他表单元素。

1.新增input元素类型

新增的type属性值(验证型)

属性值	说明
email	邮件类型
tel	电话号码
url	URL类型

新增的type属性值(取值型)

属性值	说明
range	取数字(滑块方式)
number	取数字(微调方式)
color	取颜色
date	取日期(如2018-11-11)
time	取时间(如08:04)
month	取月份
week	取周数

1.1.验证型

email：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>电子邮箱：
        <input type="email" />
      </label>
      <input type="submit" value="提交" />
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述
分析：
当输入非电子邮件格式的字符，点击【提交】按钮时，会发现无法提交且弹出提示内容：

有一点需要说明，必须是submit按钮才会弹出提示内容，使用其他按钮(如button按钮)则不会。这是因为email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。

tel：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>电话号码：
        <input type="tel" />
      </label>
      <input type="submit" value="提交" />
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述
分析：
当输入非电话号码格式的字符，点击【按钮】时，却发现仍可以提交！其实tel类型文本框并不具备完备的验证功能，若想要达到验证效果，需要结合pattern属性来实现。
pattern：

url：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>你的网站：
        <input type="url" />
      </label>
      <input type="submit" value="提交" />
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述
分析：
当输入非URL格式的字符，点击【提交】按钮时，会发现无法提交且弹出提示内容，效果如下：

分析：
所谓的URL格式字符，指的是以http://或https://开头的网络地址。但是在实际时会发现https://www、tps://www.gh.com这种字符也能提交。原因就是url类型文本框不具备完备的验证功能，若想要达到验证效果，需要结合 pattern属性来实现
pattern：

1.2.取值型

range：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>range：
        <input type="range" min="0" max="100" step="10" value="10" />
      </label>
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述
说明：

min：最小值赋值为0；
max：最大值赋值为100；
step：步进为10，即每次拖动增加10或减少10。

number：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>number：
        <input type="number" min="0" max="100" step="10" value="10" />
      </label>
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述
通过使用微调按钮来获取某一个范围的数字。
说明：

min：最小值赋值为0；
max：最大值赋值为100；
step：步进为10，即每次微调增加10或减少10；
或直接输入赋值。

color：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>color：
        <input type="color" value="#000000" />
      </label>
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述
当点击color类型元素时，浏览器会弹出自带的取色工具，以方便选取颜色值：

说明：
value属性用于设置颜色初始值，格式必须是十六进制颜色值如#000000和rgba颜色。

date：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>date：
        <input type="date" value="2022-07-03" />
      </label>
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述
当点击date类型元素时，浏览器会弹出自带的日期工具，以方便直接选取日期：

说明：
value属性用于设置日期初始值，格式必须如果为YYYY-MM-DD。

month：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>date：
        <input type="month" value="2022-07" />
      </label>
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述
当点击month类型元素时，浏览器会弹出选择框，日历工具，以方便选择哪个月份：

说明：
value属性用于设置初始值，格式必须如YYYY-MM。

week：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>date：
        <input type="week" value="2022-W26" />
      </label>
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述

当点击week类型元素时，浏览器会弹出日期工具，以方便选择第几周：
在这里插入图片描述

说明：
value属性用于设置初始值，格式必须如YYYY-W[Number]，其中W是week的缩写；[Number]为数字，若小于10的数字，需在前面补齐0。

time：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p>
      <label>time：
        <input type="time" value="23:25" />
      </label>
    </p>
  </form>
</body>
</html>

效果图：
在这里插入图片描述
当点击time类型元素时，浏览器会弹出日期工具，以方便选择时间：

说明：
value属性用于设置初始值，格式必须如mm:ss

2.新增其他表单元素

新增的表单元素有：output、datalist。

2.1.`output`元素

用于定义表单元素的输出结果或计算结果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    window.onload = function() {
  	  var input = document.getElementByTagName('input')[0];
  	  var output = document.getElementByTagName('output')[0];
  	  // 将range的值赋值给output
  	  output.value = input.value;
  	  // 拖动滑动条，改变output值
  	  input.change = function() {
        output.value = input.value;
      }
    }
  </script>
</head>
<body>
  <form method="post">
    <p>
      <label>range：
        <input type="range" min="0" max="100" step="10" value="10" />
      </label>
    </p>
    <output></output>
  </form>
</body>
</html>

说明：
output元素是一个行内元素，比span元素更具有语义化。
分析：
output元素一般放在form元素内部，且配合其他表单元素(如文本框等)来使用。

2.2.`datalist`元素

使用datalist元素来为文本框提供一个可选的列表。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <datalist id="urlList">
      <option label="1" value="html5-1"></option>
      <option label="2" value="html5-2"></option>
    </datalist>
  </form>
</body>
</html>