学生表单案例

标签：ali   list   mit   leave   lis   ace   phone   action   datetime   

<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>

学生表单案例

标签：ali   list   mit   leave   lis   ace   phone   action   datetime   

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