HTML5——表单新增元素与属性（1）

最新推荐文章于 2024-04-07 19:38:43 发布

原创最新推荐文章于 2024-04-07 19:38:43 发布 · 654 阅读

0 ·

CC 4.0 BY-SA版权

前端工程师学习笔记同时被 3 个专栏收录

85 篇文章

订阅专栏

html

26 篇文章

订阅专栏

web

20 篇文章

订阅专栏

本文详细介绍了HTML5中input元素的pattern属性、SelectionDirection属性、复选框的indeterminate属性、针对image类型的input元素新增的height和width属性、新增的input元素类型如url、email等以及对input元素的valAsNumber属性、range属性、color属性的使用方法。此外，还介绍了form的novalidate属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、文本框的pattern属性

在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。

2、文本框的SelectionDirection属性

对于input元素和textarea元素，HTML5增加了SelectionDireciton属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为“forward”，当用户反向选取文字时，该属性值为“backword”。当用户没有选取任何文字时，该属性值为“forward”。

3、复选框的indeterminate属性

对于复选框checkbox元素来说，过去只是选取与非选取两种状态。在HTML5中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。

4、针对类型为image的input元素，HTML5新增了两个属性，height、width分别用来指定图片按钮的高度和宽度。

5、增加与改良的input元素

有：url、email、date、time、datetime、Tel、datetime-local\month\week\number\range\search\color等等
(1)input新增的属性：valAsNumber

<input type="number" id="num1">
<script>
    var n1 = document.getElementById("num1").valueAsNumber;
</script>
 
这样操作，n1取到的将不再是字符串，而直接是数字，可以用来计算。

（2）range属性，一个可拖动的文本域，改变数值。
（3）color属性，提供一个颜色选择器，供用户选择颜色，可以实现不错的交互。
（4）output元素的追加：可以跟在type为range类型的input后面，实现实时的数字显示。

<input type="range" id="range">
<output id="output"></output>
<script>
var n = document.getElementById("range").value;
    document.getElementById("output").value = n;
</script>

(5)form的novalidate属性
novalidate属性规定当提交表单时不对其进行验证。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <script>
        function check(){
            var email = document.getElementById("email");
            if(email.value == ""){
                alert("请输入email");
                return false;
            }else if(!email.checkValidity()){
                alert("请输入正确的Email地址");
                return false;
            }
        }
    </script>
    <form id="testform" onsubmit="check()" novalidate="novalidate">
        <label for="email">Email</label>
        <input type="email" name="email" id="email"><br>
        <input type="submit">
    </form>
</body>
</html>