html5(新增input类型新增表单元素&新增表单属性&HTML5自带表单验证)

最新推荐文章于 2024-04-17 12:38:13 发布

世间百态不过尔尔

最新推荐文章于 2024-04-17 12:38:13 发布

阅读量4k

点赞数 5

分类专栏： web(HTML5) 文章标签： html5(新增input类型新增表单元素&新增表单属性&HTML5自

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88543496

版权

web(HTML5) 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、新增input类型
-电子邮件类型
语法：
当输入的邮件地址格式不对时，会弹出提示信息

-搜索类型
语法：<input type="search">
手机键盘会将确定变换为搜索

-URL类型
语法：<input type="url">
当输入的网址格式不正确时，会弹出提示信息

-电话号码类型
语法：<input type="tel">
主要针对移动端，针对电话号码的输入，调整手机键盘的类型

-数字类型
语法：<input type="number">
只接受数字类型，当文本框中包含非数字时，会弹出错误提示
属性：
min：文本框能接受的最小值
max：文本框能接受的最大值
step：指点击右侧按钮时递增/递减的幅度，取值为整数，默认是1

-范围类型
语法：<input type="range">
会出现一个允许滑动的块
属性：
min：起始值
max：最大值
value：当前元素的值
step：递增或递减的长度

-颜色类型
语法：<input type="color">
可以通过onchange事件，获取选择的颜色值

-日期类型
语法：<input type="date">
-周类型
语法：<input type="week">

-其他
type=month
type=time


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
    <form action="">
        <input type="email">

        <input type="search" placeholder="搜索">
        <br>
        <br>
        <input type="url">
        <br>
        <input type="tel">
        <br>
        <input type="number" min="3" step="4" max="10">
        <br>
        <input type="range" min="10" max="100" value="20" id="r" step="20">

        <br>
        <input type="color" id="c" onchange ="fun()">

        <br>
        <input type="date">
        <br>
        <input type="week">
        <br>
        <input type="month">
        <br>
        <input type="time">
        <input type="submit">

    </form>
    <script>
        console.log($('#r').val());

        function fun() {
            console.log($('#c').val());
        }

    </script>
</body>
</html>

一、新增表单元素
1、datalist元素
可以使用该标记创建一组列表项，可以为输入框做提示
该元素需要与input进行绑定，需要有选项option
语法：

2、progress元素
进度条，消失处理的进度值
语法：<progress></progress>
属性：value：当前进度
      max：最大进度值

3、meter
类似于进度条

4、output元素(选修)
用于显示表单元素处理的结果值

二、新增表单属性
1、multiple属性：规定文本框中可以包含多个值（email、file）
-多个值之间用逗号隔开
-该属性可以不设置属性值

2、autofocus
自动获取焦点，可以不设置属性值
注意，一个表单中，只会设置一个文本框自动获取焦点

3、form属性
该属性可以用于将某控件与表单关联起来

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <form action="" oninput="o.value = parseInt(n.value)+parseInt(r.value)" id="f1">
        <input type="email">
        <br>
        <input type="number" step="3">
        <br>
        <!-- datalist的用法 -->
        <input type="text" list="data">
        <datalist id="data">
            <option value="123"></option>
            <option value="111"></option>
            <option value="abc"></option>
        </datalist>

        <br>
        <progress value="1" max="100"></progress>
        <br>
        <meter value="4" min="0" max="10">0.25</meter>
        <br>

        <!-- <input type="number" id="n" value="4">
        +<input type="range" id="r" value="50">
        =<output name="o" for="n r"></output> -->

        <input type="email" multiple="">
        <br>
        <input type="file" multiple="">
        <br>
        <input type="text" autofocus="">

        <input type="submit">

    </form>
    <input type="email" form="f1">
</body>
</html>

表单验证
1、required
必填属性，该属性不需要设置属性值

2、pattern
实现元素的指定格式的验证，多用于正则表达式指定的规则
语法格式：<input type="text" pattern="正则表达式">
手机号验证：^1[34578]\d{9}$
邮箱验证：^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$

3、min和max
最大值和最小值，适用于number

4、minlength和maxlength
最小字符个数或最大字符个数
当输入字符个数小于minlength时，会弹出提示信息，需要注意的是，设置了maxlength，文本框不允许多输入，也不会有提示

5、validity
这是表单元素的一个属性，可以用于表单验证，该属性主要利用validityState对象，描述元素的有效状态；validityState对象，代表元素是否通过验证，它提供了一些属性，可以用于描述指定元素的验证状态。

语法：表单元素dom对象.validity.属性

验证状态：
1）valid
语法：form表单元素对象.validity.valid;
valid属性是一个bool值，它表示表单元素是否通过验证，如果通过，则为true，否则为false

2）valueMissing
当控制处于无效状态时，此时控件不会验证通过，其valueMissing的值为true；注意，此状态用于验证required元素，元素为空时，该属性为true，否则为false

3）typeMismatch
如果输入的内容不符合指定的格式，该属性为true

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <form action="">
        <input type="text" required="">
        <br>
        <input type="text" id="phone" pattern="^1[34578]\d{9}$">
        <br>
        <input type="text" pattern="^3\d{16}[\dx]$">
        <br>
        <input type="number" min="3" max="6">
        <br>
        <input type="text" minlength="10" maxlength="15">
        <input type="submit">
    </form>
    <form action="">
        <input type="text" id="text" required="">
        <br>
        <input type="email" id="e">
        <br>
        <input type="url" pattern="^3\d{16}[\dx]$" id="p">
        <input type="button" value="注册" onclick="regist()">
    </form>
    <script>
        function regist() {
            var d = document.getElementById('text');
            // if (d.value.length == 0) {
            //     console.log("请填写")
            // }
            console.log(d.validity.valid);
            console.log(d.validity.valueMissing+"--=");
            // if (d.validity.valid) {
            //     console.log("验证通过")
            // }else{
            //     console.log("验证失败");
            // }

            var email = document.getElementById('e');
            if (e.validity.typeMismatch) {
                console.log("邮箱格式不正确")
            }

            var p = document.getElementById('p');
            if (p.validity.typeMismatch) {
                console.log("不匹配正则")
            }
        }
    </script>
</body>
</html>

世间百态不过尔尔

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
html5(新增input类型新增表单元素&新增表单属性&HTML5自带表单验证)

1、新增input类型-电子邮件类型语法：当输入的邮件地址格式不对时，会弹出提示信息-搜索类型语法：&lt;input type="search"&gt;手机键盘会将确定变换为搜索-URL类型语法：&lt;input type="url"&gt;当输入的网址格式不正确时，会弹出提示信息-电话号码类型语法：&lt;input type="tel"&gt;主要针对移动端，针..
复制链接

扫一扫