0
点赞
收藏
分享

微信扫一扫

html5表单验证

NicoalsNC 2022-01-16 阅读 51
  • 1、基本表单验证特性介绍

2、代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- <form action="" method="post" novalidate> -->
    <!-- <form action="" method="post" autocomplete="on"> -->
        <form action="" method="post" >
        <input type="file"><br><br>

        <label for="">用户名</label>
        <!--
            1、required:表示该项必须填写,不然提交不了 
            2、autofocus:自动获取焦点
            3、novalidate:在form上加,表示提交表单不验证
            4、formnovalidate:在submit上加,表示提交表单不验证
            5、正则^\d{5}[imooc]$:^\d以数字开头;{5}:五个数字;
                [imooc]$以这五个字母的一个为结尾(总共6位;例如:12345c)
            6、autocomplete:为on,输入一次,下一次再输入会自动提示;off则不是
        -->
        <input type="text" name="user" placeholder="请输入用户名" 
required="required" autofocus><br><br>

        <label for="">工号</label>
        <input type="text" name="gonghao" placeholder="请输入工号" 
pattern="^\d{5}[imooc]$"><br><br>

        <input type="text" list="tips">

        <datalist id="tips">
            <option value="abc1"></option>
            <option value="abc2"></option>
            <option value="abc3"></option>
        </datalist>
        <br><br>
        <input type="submit" value="按钮">
        <input type="submit" value="formnovalidate" formnovalidate>

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

效果图:

 

3、label中for的补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
        <form action="" method="post" >
        <!-- 
            1、for 属性规定 label 与哪个表单元素绑定。 
               作用是 在点击label 时 会自动将焦点移动到绑定的元素上
        -->
        <label for="man">男</label>
        <input type="radio" name="sex" id="man">
        <label for="woman">女</label>
        <input type="radio" name="sex" id="woman">
    </form>
</body>
</html>

效果图: 

 4、html5约束验证API

 5、html自带验证美化(这块就是加css样式了,之后就没看)

举报

相关推荐

0 条评论