学生表单案例

<form action="">    <fieldset>        <legend>学生档案</legend>        <label for="userName">姓名：</label>        <input type="text" name="userName" id="userName" placeholder="请输入您的姓名"/>        <label for="userPhone">手机号码：</label>        <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"/>        <label for="email">邮箱地址：</label>        <input type="email" required name="email" id="email" pattern="^1\d{10}$"/>        <label for="school">所属学院：</label>        <input  type="text" name="school" id="school" list="college"/>        <datalist id="college">            <option>html</option>            <option>css</option>            <option>javascript</option>        </datalist>        <label for="score">入学成绩：</label>        <input type="number" name="score" id="score" max="100" min="0" value="0"  />        <label for="level">基础水平：</label>        <meter max="100" min="0" id="level" low="59" high="89" />        <label for="inTime">入学日期：</label>        <input type="datetime-local" name="inTime" id="inTime" />        <label for="leaveTime">毕业日期：</label>        <input type="datetime-local" name="leaveTime" id="leaveTime"/>        <input type="submit"/>    </fieldset></form><script>    document.getElementById("score").oninput=function () {        document.getElementById("level").value=this.value;    };</script>

原文地址：https://www.cnblogs.com/lujieting/p/10116679.html