学生表单案例

最新推荐文章于 2022-09-13 09:50:33 发布

weixin_33971977

最新推荐文章于 2022-09-13 09:50:33 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lujieting/p/10116679.html

本文介绍了一个用于收集学生基本信息的HTML表单设计，包括姓名、手机号、邮箱、所属学院、入学成绩、基础水平、入学及毕业日期等字段，通过表单元素如input、label、datalist、meter和script实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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