html5表单应用实例 1 <!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta charset=”UTF-8″> 5 <title>表单案例</title> 6 <link rel=”stylesheet” href=”https://www.cnblogs.com/olivia-xia/css/formcss.css”> 7 </head> 8 <body> 9 <form action=””> 10 <fieldset> 11 <legend>学生档案</legend> 12 <label for=”userName”>姓名：</label> 13 <input type=”text” name=”userName” placeholder=”请输入用户名” id=”userName”> 14 <label for=”userPhone”>手机号码：</label> 15 <input type=”tel” name=”userPhone” id=”userPhone” pattern=”^1d{10}$”> 16 <label for=”userEmail”>邮箱地址：</label> 17 <input type=”email” name=”userEmail” id=”userEmail” required > 18 <label for=”col”>所属学院：</label> 19 <input type=”text” id=”col” list=”School” placeholder=”请选择”> 20 <datalist id=”School”> 21 <option value=”前端学院”></option> 22 <option value=”Java学院”></option> 23 <option value=”C++学院”></option> 24 <option value=”人工智能学院”></option> 25 </datalist> 26 <label for=”score”>入学成绩：</label> 27 <input type=”number” max=”100″ min=”0″ id=”score”> 28 <label for=”level”>基础水平：</label> 29 <meter id=”level” value=”0″ max=”100″ min=”0″ low=”59″ high=”90″></meter> 30 <label for=”inTime”>入学日期：</label> 31 <input type=”date” id=”inTime”> 32 <label for=”leaveTime”>毕业日期</label> 33 <input type=”date” id=”leaveTime”> 34 <input type=”submit”> 35 </fieldset> 36 </form> 37 38 <script> 39 document.getElementById(“score”).oninput = function () { 40 document.getElementById(“level”).value=this.value; 41 42 } 43 document.getElementById(“userPhone”).oninvalid=function () { 44 this.setCustomValidity(“请输入11位手机号！”) 45 } 46 </script> 47 </body> 48 </html>
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/55745.html
