技术胖--前端学习html5表单美化部分笔记

数据库 2025-04-09 18:01
0 阅读

一、H5表单验证（form表单的美化）

1.1 基本表单验证特性介绍

  1. 灰色的提示是h5的哪个特性？

    placeholder

    有些移动端HTML5 input date不支持placeholder问题

    <input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date"/>

    有的浏览器需要点击两次

  2. 新增的表单类型

    email,Date,Range,Tel,search,color……

  3. 文本框中，输入一次，下一次在输入会自动提示是哪个特性？

    autocomplete

  4. list和datalist

  5. 初始化页面之后，如何让input自动获得焦点？

    autofocus

    扫描二维码关注公众号，回复： 17573327 查看本文章

表单验证的新特性

  1. html中如何设置表单元素必填？

    required

  2. html5表单验证如何使用正则表达式？

    pattern

  3. html5表单中设置了必填，提交表单的时候如何做到不验证？

    novalidate或者formnovalidate

    前一个是在form标签之后用的

    后一个input submit的按钮上面运用的

    场景：一个按钮要验证，一个不用验证，不用验证的那个使用formnovalidate

1.2 代码特性演示

  1. 在上传文件中有file类型的话，需要加上multipart/form-data
<form action="" method="post" enctype="multipart/form-data">
    <input type="file"/>
</form>

  1. lable后面为什么需要for?

    实现点击文字就可以选中单选的作用

<!-- label -->
<label for="man"> 男</label>
<input type="radio" name="sex" id="man">
<label for="girl"> 女</label>
<input type="radio" name="sex" id="girl">

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- novalidate就会在表单提交的时候不验证！ -->
    <!-- autocomplete="on"表示自动填充开启 -->
    <form action="1text.html" method="post"  enctype="multipart/form-data" autocomplete="on">
        <input type="file"/>
        <!-- 用户名 -->
        <label for="">用户名</label>
        <input type="text" name="username" placeholder="请输入用户名" required />
        <!-- 工号 -->
        <lable for="">工号</lable>
        <input type="text" name="gonghao" placeholder="请输入工号" pattern="^\d{5}[imooc]$"/>
        <!-- 提交 -->
        <input type="submit" value="不提交" formnovalidate="">
        <input type="submit" >
        <!-- datalist -->
        <input type="text" list="tips">
        <datalist id="tips">
            <option value="list1"></option>
            <option value="list2"></option>
            <option value="list3"></option>
            <option value="list4"></option>
        </datalist>

    </form>
</body>
</html>

二、html5约束验证API

html5的约束验证API

属性 含义
willValidate属性 元素约束是否被符合，如果不符合返回false
Validity属性 ValidityState对象，表示验证对象所属状态，验证是否成功
validationMessage属性 用于描述元素相关的约束信息
checkValidity()方法 检查元素是否满足它的相关约束
setCustomValidity()方法 设置和预定义，修改信息

2.1 Validity属性介绍以及演示

<form action="1text.html" method="post"  enctype="multipart/form-data" autocomplete="on">
    <!-- 用户名 -->
    <label for="">用户名</label>
    <input type="text" name="username"  id="username" placeholder="请输入用户名" required />
</form>

方式一：

var usernames=document.getElementById("username");
console.log(usernames.validity);

方式二：

console.log(username.validity);

两种方式输出结果一样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8c4ZISS-1661998975565)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831154446910.png)]

2.1.2 Q:document.getElementById(“id”)和某一个id是全等的吗？

A:是的

但是不推荐直接使用id这种写法，

原因一：H5的新特性，浏览器的兼容性不是很好

原因二：后期维护麻烦，直接使用id容易与某个变量混淆

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oz7qG0Hv-1661998975567)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831155034172.png)]

输出结果 含义
badInput 用户提供了一个浏览器不能转换的input
customError 与setCustomValidity()相对应
patternMismatch pattern 正则表达式是否验证通过
rangeOverflow 用于描述input框中数值的大小是否超过最大值
rangeUnderflow 用于描述input框中数值的大小是否超过最小值
stepMismatch step与其对应，未设置step的时候为true
tooLong maxlength 主要描述字段的长度，这两个值恒为false
tooShort minlength
typeMismatch 如果输入的值不是对应的type值，比如url,email……则typeMismatch就为true
valid 该属性是否有value值
valueMissing 是否为必填项，若属性为required,则valueMissing为true,如果有了value值，则会显示为false

2.2 字段演示

2.2.1 移动端不推荐使用

消除搜索框的那个叉号

<style>
    input [type="search"]::-webkit-search-cancel-button{
    
    
        -webkit-appearance: none;
        height: 15px;
        width: 15px;
        background-color: aquamarine;
    }
</style>

<script>
    // 不推荐使用
    // console.log(document.getElementById("username")===username);
    console.log(username.validity);
</script>
2.2.2 如何控制输入5位数？

使用javascript

<script>
    // 不推荐使用
    // console.log(document.getElementById("usernames")===usernames);
    console.log(usernames.validity);
    console.log(numbers.validity);
    function checkLength(obj,length){
      
      
        if(obj.value>length){
      
      
            obj.value=obj.value.substr(0,length);
        }
    }
</script>
2.2.3 如何保留两位小数？

如果value为0.02，则提交到后台的时候值为0。

在input标签中，加一个step=“0.01”

2.3 checkValidity()方法介绍和演示

如果元素没有满足它的任意约束，返回false,其他情况返回true

使用required，需要满足pattern和value的要求

<!-- 用户名 -->
<label for="">用户名</label>
<input type="text" name="username"  id="usernames" placeholder="请输入用户名"  pattern="^\d{5}" required value="2"/>

// 检查邮箱格式是否正确
if(emails.checkValidity()){
    
    
    alert("这是一个邮箱的格式");
}
else{
    
    
    alert("这不是一个邮箱");
}
// 检查用户名是否符合要求    
if(usernames.checkValidity()){
    
    
    alert("用户名符合");
}
else{
    
    
    alert("用户名不符合");
}

2.4 setCustomValidity案例

用途

设置自定义验证内容，用于即将实施与验证的约束来覆盖预定义的信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygjwSU1Y-1661998975568)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831193008346.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sb6yrnSK-1661998975569)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831193041055.png)] 
<!--css部分-->
<style>
    input[type="text"]{
      
      border:1px solid #ccc ;width: 150px;height: 30px; border-radius: 5px;}
    input[type="submit"]{
      
      background-color: #eee; border:1px solid #ddd;width: 60px;height: 33px;border-radius: 5px;}

</style>

<body>
    <form name="test" action="" method="post">
        <input type="text" required pattern="^\d{4}$" oninput="checkit(this)" placeholder="请输入代码">
        <input type="submit" value="验证">
    </form>
    <script type="text/javascript">
        function checkit(obj){
      
      
            console.log(obj.validity);
            var it=obj.validity;
            if(true===it.valueMissing){
      
      
                obj.setCustomValidity("不能为空！");
            }else{
      
      
                if(true===it.patternMismatch){
      
      
                    obj.setCustomValidity("必须是四个数字！")
                }
                else{
      
      
                    obj.setCustomValidity("11")
                }
            }
        }
    </script>
</body>

三、html5自带验证美化

要做出不一样的表单验证，我们需要了解一些伪类和css选择器

  1. :required和:optional
  2. :in-range和:out-of-range
  3. :valid和:invalid
  4. :read-only和:read-write

3.1 :required和:optional

居然连个空格都不可以有的

错误写法：select :optional

正确写法：select:optional

input:required,textarea:required{
    
    
           border-right: 3px solid #aa0088;

}

input:optional,select :optional{
    
    
           border-right: 3px solid #999;

}

案例代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N2FvyaJG-1661998975570)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831214835899.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
      
       
            max-width: 400px;
            margin: 20px auto;
       }
       input,select,textarea{
      
      
           width: 240px;
           margin: 10px 0;
           border: 1px solid #999;
           padding: .5em 1em;
       }
       lable{
      
      
           color: #999;
           margin-left: 10px;
       }

       input:required,textarea:required{
      
      
           border-right: 3px solid #aa0088;

       }
       input:optional,select:optional{
      
      
           border-right: 3px solid #999;
       }
       /* 为输入框为加上(选填)/(必填) */
       input:optional +lable::after{
      
      
           content:"(选填)";
       }
       input:required +label::after{
      
       
           content:"(必填)";
       }
       /* 修改选中边框 */
       input:focus,select:focus,textarea:focus{
      
      
           outline:0;
        }
        input:required:focus{
      
       
            box-shadow: 0 0 3px 1px #aa0088;
        }
        input:optional:focus,select:optional:focus{
      
       
            box-shadow: 0 0 3px 1px #999;
        }
        /* 修改提交按钮样式 */
        input[type="submit"]{
      
       
            background-color: #cc00aa;
            border: 2px ;
            padding: 10px 0;
            color: #fff;
        }

        input[type="submit"]:hover{
      
       
            background-color: #aa0088;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="#">
            <input type="name" required><lable>名称</lable>
            <input type="email" required><lable>邮箱</lable>
            <input type="tel" ><lable>手机</lable>
            <input type="url" ><lable>网址</lable>
            <select name="#">
                <option value="1">非必选项一</option>
                <option value="2">非必选项二</option>
                <option value="3">非必选项三</option>
                <option value="4">非必选项四</option>

            </select>
            <textarea name="#" cols="30" rows="10" placeholder="留言（必填）" required>
            </textarea>
            <input type="submit" value="提交表单">
        </form>

    </div>
</body>
</html>

3.2 valid和invalid伪类美化表单案例

额外补充知识点：

​ CSS的 ~（波浪选择器）

效果展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQAFytNR-1661998975571)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831223135005.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Sz4Bn3q-1661998975571)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831223155665.png)]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
      
       
            margin: 100px;
            position:relative;
        }
        input{
      
       
            border:1px solid #999;
            outline: 0;
            width:140px;
            height: 30px;    
            line-height: 30px;
            text-indent: 36px;
            transition: all .3s;
            border-radius: 4px;

        }
        span.title{
      
       
            position: absolute;
            line-height: 30px;
            height: 30px;
            left: 2px;
            top: 2px;
            transition: all .3s;
        }
        input:focus,input:hover{
      
       
            text-indent: 2px;
        }
        input:focus +span.title,input:hover +span.title{
      
       
            transform: translateX(-120%);
        }
        input:valid ~label::after{
      
       
            content:"你输入的邮箱正确！";
        }
        input:invalid ~label::after{
      
       
            content:"你输入的邮箱错误!";
        }
        input:valid{
      
       
            border:1px solid green;
        }
        input:invalid{
      
       
            border: 1px solid red;

        }
    </style>
</head>
<body>
    <div class="container">
        <input type="email" id="mail" required placeholder="请输入邮箱">
        <span class="title">邮箱</span>
        <label for="mail"></label>
    </div>
</body>
</html>

3.3 html5表单美化综合案例

三个事件

  1. oninput事件

  2. oninvalid事件

  3. onchange事件

    案例效果(小bug:提交的时候验证表单正确了，但是仍然没有变成绿色)：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V8UJy2sX-1661998975572)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220901000303684.png)]

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .onelist{
      
       
            margin: 10px 0 5px 12px;
        }
        .onelist label{
      
       
            width: 80px;
            display: inline-block;
        }
        .onelist input,.onelist select {
      
       
            height: 25px;
            line-height: 25px;
            width: 220px;
            border-radius: 3px;
            border: 1px solid #e2e2e2;

        }
        .onelist input[type="submit"]{
      
       
            width: 150px;
            height: 30px;
            line-height: 30px;
        }
        input:required,select:required{
      
       
            background:url(D:\QQdownload\学习资料\大三上学期\前端\前端路线学习\HTML学习\代码演示（h5）\3.1首页.png) no-repeat 90% center;
        }
        input:required:valid,select:required:valid{
      
       
            background:url(3.1首页.png) no-repeat 90% center;
            box-shadow: 0 0 5px green;
            border-color: green;
        }
        input:focus:invalid,select:focus:invalid{
      
       
            background:url(\3.1首页.png) no-repeat 90% center;
            box-shadow: 0 0 5px red;
            border-color: red;
        }
    </style>
</head>
<body>
    <form action="myform" method="post">
        <div class="onelist">
            <label for="UserName">手机号 </label>
            <input name="UserName" id="UserName" type="text" placeholder="请输入手机号码" pattern="^1[0-9]{10}$" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确的手机号码')" required>
        </div>
        <div class="onelist">
            <label for="Password">密码 </label>
            <input name="Password" id="Password" type="password" placeholder="6~20位" pattern="^[a-zA-Z0-9]\w{5,19}$" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确的密码')" onchange="checkpassword()"  required>
        </div>
        <div class="onelist">
            <label for="Repassword">确认密码 </label>
            <input name="Repassword" id="Repassword" type="password" placeholder="确认密码" onchange="checkpassword()" required>
        </div>
        <div class="onelist">
            <label for="Repassword">了解方式 </label>
                <select name="know" required>
                    <option value="">==请选择==</option>
                    <option value="1">搜索引擎</option>
                    <option value="2">朋友圈</option>
                    <option value="3">朋友推广</option>
                    <option value="4">广告投放</option>
                </select>
        </div>
        <div class="onelist">
            <input type="submit"value="提交">
        </div>
       

    </form>
    <script type="text/javascript">
        function checkpassword(){
      
      
            var pass1=document.getElementById("Password"),
            pass2=document.getElementById("Repassword");
            if(pass1.value!=pass2.value){
      
      
                pass2.setCustomValidity("两次密码输入不一致");
            }else{
      
      
                pass2.setCustomValidity("致");
            }
        }
    </script>
</body>
</html>

3.4 默认气泡修改演示

等我学完js回来再看看？？

哈哈哈我就是乏了

猜你喜欢

目录

热门文章