首页 前端知识 HTML5-新增的表单元素

HTML5-新增的表单元素

2024-01-26 10:01:03 前端知识 前端哥 878 936 我要收藏

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

  • 新增input元素类型
  • 新增其他表单元素
1.新增input元素类型

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

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

新增的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://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类型元素时,浏览器会弹出自带的取色工具,以方便选取颜色值:
在这里插入图片描述

说明:
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类型元素时,浏览器会弹出自带的日期工具,以方便直接选取日期:
在这里插入图片描述
说明:
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],其中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类型元素时,浏览器会弹出日期工具,以方便选择时间:
在这里插入图片描述
说明:
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的值。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/433.html
标签
html5
评论
发布的文章

CSS3新增样式

2024-02-05 11:02:24

jQuery的介绍

2024-02-05 11:02:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!