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

學生表單案例