关于HTML5中得input表单，你所不知道的几点

最新推荐文章于 2021-06-18 00:54:57 发布

Simple_IDE

最新推荐文章于 2021-06-18 00:54:57 发布

阅读量164

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/simple5960/article/details/108563317

版权

HTML 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

关于HTML5中得input表单，你所不知道的几点

当我们一提到表单，就会想起验证两个字，而验证最离不开的就是正则表达式，我相信这个东西或多或少地让大部分程序员都头疼过那么一段时间
当然，也有很多地网站提供了一些常用的用于验证的正则表达式，jQuery也封装了一个jQuery validity库来帮助大家减少这个我们头疼的东西。不过现在
HTML5提供了一些input的新属性，让验证变得更加地容易，接下来，让我们看看是哪些新属性吧。
1.

email

<input type="email" name="email" id="">
这个email属性直接提供了邮箱的验证，输入错误的邮箱会有相应的提示，当然了这个提示内容是可以自己更改的，
具体更改方法如下
//验证不通过时触发 document.getElementById("tel").oninvalid=function(){ //设置默认提示信息 this.setCustomValidity("请输入11位手机号码") }
是不是比

  ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

更简单呢

tel

<input type="tel" name="tel" id="">

tel这个属性，字面意思一下就看得出来的电话相关的，但是仔细一想，好像各个国家的电话号码长度形式的规则都不一样，难道开发人员有这个精力去统计这个东西吗?
答案是No 那既然没用，为什么又要设置这个属性呢？
因为它在移动端有很大的左右，设置这个tel属性可以方便在移动端打开数字键盘。

<input type="tel" name="userPhone" id="" required pattern="^(\+86)?1\d{10}$" >

有的时候也必须要使用正则表达式，可以这么做，添加以以一个
3.

url

<input type="url" name="site" id="">
*注意！*设置了这个url属性，url格式必须是以https://开头的

range

<input type="range" name="" id="" max="100" min="0" value="50">

这个有点类似于进度条的那种效果，上面的属性一看便懂辣

color

<input type="color" name="" id="">

这个可以在网页中打开一个选色器，非常地方便

date

<input type="date" name="" id="">

这个可以在网页中打开一个日期选择器

time

<input type="time" name="" id="" >
这个可以在网页中打开一个时间选择器

datetime-local

<input type="datetime-local" name="datetime" id="">

这个可以在网页中打开一个日期时间选择器

month

<input type="month" name="" id="">

这个可以在网页中打开一个月份选择器

week

<input type="month" name="" id="">

这个可以在网页中打开一个周数选择器

file

<input type="file" name="" id="" multiple>

可以调用文件接口直接打开电脑的文件对话框

补充

<input type="text" name="userName" id="" placeholder="请输入用户名" autofocus autocomplete="on">

这个autocomplete属性可以将上次输入地值存下来，下次输入的时候自动填充

有的时候我们在做下拉列表框希望这个列表框不紧可以选择还可以输入，这个时候就select就不起作用了，可以使用表单中的新元素datalist

 <form action="">
        专业: <select name="" id="">
            <option value="1">web前端开发

            </option>
            <option value="2">java
                
            </option>
            <option value="3">C++
                
            </option>
            <option value="4">后端
                
            </option>
           
            
        </select>
        <br>
        datalist既可以输入还可以选择
        <br>
        专业: <input type="text" name="" id="" list="sub">
        <br>
        把datalist和input建议关联

        <br>
        <datalist id="sub">
            <option value="web前端" label="前景不错"></option>
            <option value="C++" label="不清楚哦"></option>
        </datalist>
    </form>

接下来我们来看一个表单案例的总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        form
        {
            width: 600px;
            margin: 30px auto;

        }
        form>fieldset{
            padding: 10px;
        }
        form>fieldset>input{
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-bottom: 10px;
            margin-top: 10px;
            border-radius: 4px;
            border:1px solid #ccc;
            font-size: 16px;
            padding-left: 10px;
            /*width=content+padding+border*/
            box-sizing:border-box ;
        }
        form>fieldset>meter
        {
            padding: 0;
            
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-bottom: 10px;
            margin-top: 10px;
           
            border:1px solid #ccc;
            font-size: 16px;
            
            /*width=content+padding+border*/
            box-sizing:border-box ;
        }

    </style>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            <!-- label for的使用就是为了能在点击label的时候获取input的焦点 -->
            <label for="userName">姓名</label>
            <input type="text" name="userName" id="userName" placeholder="请输入用户名">
            <label for="userPhone">手机号码</label>
            <input type="tel" name="userPhone" id="userPhone" placeholder="请输入手机号码" pattern="^1\d{10}$">
            <label for="email">邮箱地址</label>
            <input type="email" name="email" id="email" required>
            <label for="college">所属学院</label>
            <input type="text" name="college" id="college" list="xueyuan" placeholder="请选择">
            <datalist id="xueyuan">
                <option value="计算机科学学院"></option>
                <option value="电气工程学院"></option>
                <option value="机电工程学院"></option>
            </datalist>
            <label for="score">入学成绩</label>
            <input type="number" name="score" id="score" max="100" min="0">
            <label for="line">基础水平</label>
            <meter id="level" max="100" min="0" low="60" high="90"></meter>
            <label for="">入学日期</label>
            <input type="date" name="" id="">
            <label for="">离校日期</label>
            <input type="date" name="" id="">
            <input type="submit" value="提交b">
        </fieldset>
      
    </form>
</body>
<script>
    /*querySelector   单个元素选择器如果选择多个元素，只返回第一个元素*/
    /*要选择满足条件的所有元素querySelectorAll，返回的是一个数组*/
    document.getElementById("score").oninput=function(){
        document.getElementById("level").value=this.value;
    }
</script>
</html>

Simple_IDE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于HTML5中得input表单，你所不知道的几点

关于HTML5中得input表单，你所不知道的几点当我们一提到表单，就会想起验证两个字，而验证最离不开的就是正则表达式，我相信这个东西或多或少地让大部分程序员都头疼过那么一段时间当然，也有很多地网站提供了一些常用的用于验证的正则表达式，jQuery也封装了一个jQuery validity库来帮助大家减少这个我们头疼的东西。不过现在HTML5提供了一些input的新属性，让验证变得更加地容易，接下来，让我们看看是哪些新属性吧。1.email<input type="email" nam
复制链接

扫一扫