HTML5表单验证案例

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表单小案例</title>
  <style>
    form {
        width: 100%;
        max-width: 600px;
        margin: 20px auto;
        font-family: "微软雅黑";
        font-size: 18px;
    }
    input,meter,progress {
        width: 100%;
        height: 25px;
        display: block;
        padding-left: 5px;
    }
  </style>
 </head>
 <body>
    <form action = "" >
        <fieldset>
            <legend>学生档案</legend>
            <label for = "">
                姓名:<input type = "text" placeholder = "请输入姓名" required>
            </label>
            <label for = "">
                手机号码:<input type = "tel" required pattern = "^(\+86)?1[3,5,8](\d{9})$">
            </label>
            <label for = "">
                邮箱地址:<input type = "emil">
            </label>
            <label for = "">
                所属学院:<input type = "text" list = "crl">
                <datalist id= "crl">
                    <option>安卓</option>
                    <option>ios</option>
                    <option>window phon</option>
                </datalist>
            </label>
            <label for = "">
                入学成绩:<input type = "number">
            </label>
            基础水平:<meter max = "100" value = "30"></meter>
            <label for = "">
                入学时间:<input type = "date">
            </label>
            <label for = "">
                毕业时间:<input type = "month">
            </label>
                    课程进度:<progress max = "100" min = "0" value = "30"></progress>
            
            <input type = "submit">
        </fieldset>
    </form>
 </body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » HTML5表单验证案例

分享到:更多 ()

发表评论 0