HTML5-新增的表单元素

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>

效果图:
在这里插入图片描述
分析:
当输入非电子邮件格式的字符,点击【提交】按钮时,会发现无法提交且弹出提示内容:
HTML5-新增的表单元素_第1张图片
有一点需要说明,必须是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格式的字符,点击【提交】按钮时,会发现无法提交且弹出提示内容,效果如下:
HTML5-新增的表单元素_第2张图片
分析:
所谓的URL格式字符,指的是以http://https://开头的网络地址。但是在实际时会发现https://wwwtps://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类型元素时,浏览器会弹出自带的取色工具,以方便选取颜色值:
HTML5-新增的表单元素_第3张图片

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

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类型元素时,浏览器会弹出自带的日期工具,以方便直接选取日期:
HTML5-新增的表单元素_第4张图片
说明:
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类型元素时,浏览器会弹出选择框,日历工具,以方便选择哪个月份:
HTML5-新增的表单元素_第5张图片
说明:
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类型元素时,浏览器会弹出日期工具,以方便选择第几周:
HTML5-新增的表单元素_第6张图片

说明:
value属性用于设置初始值,格式必须如YYYY-W[Number],其中Wweek的缩写;[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类型元素时,浏览器会弹出日期工具,以方便选择时间:
HTML5-新增的表单元素_第7张图片
说明:
value属性用于设置初始值,格式必须如mm:ss

2.新增其他表单元素

新增的表单元素有:outputdatalist

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>

说明:
若想要把datalist绑定到某个文本框,需要设置该文本框的list属性值等于datalist的id的值。

你可能感兴趣的:(01-HTML,html5)