<!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表单验证案例