html-学生档案案例

最新推荐文章于 2023-07-27 18:05:24 发布

cnkeysky

最新推荐文章于 2023-07-27 18:05:24 发布

阅读量2.1k

点赞数 2

分类专栏： html/css 文章标签： html css

本文链接：https://blog.csdn.net/cnkeysky/article/details/86707993

版权

html/css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>HelloWorld</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        form {
            width: 600px;
            margin: 20px auto;
        }
        form > fieldset {
            padding: 10px;
        }
        form > fieldset > meter,
        form > fieldset > input {
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin: 10px 0;
            padding-left: 5px;
            border-radius: 4px;
            border: 1px solid #cccccc;
            outline: none;
            box-sizing: border-box;
            font-size: 16px;
        }
        form > fieldset > meter {
            padding-left: 0;
        }
    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>学生档案</legend>
        <label for="userName">姓名：</label>
        <input type="text" id="userName" name="userName" placeholder="请输入用户名">
        <label for="userPhone">手机号：</label>
        <input type="text" id="userPhone" name="userPhone" pattern="^(\+86)?\d{11}">
        <label for="userEmail">邮箱地址</label>
        <input type="email" id="userEmail" name="userEmail" required>
        <label for="academy">所属学院：</label>
        <input type="text" placeholder="请选择" id="academy" name="academy" list="aList">
        <datalist id="aList">
            <option value="PHP"></option>
            <option value="Java学院"></option>
            <option value="C++学院"></option>
        </datalist>
        <label for="score">入学成绩</label>
        <input type="number" name="score" id="score" min="0" max="100" value="0">
        <label for="level">基础水平：</label>
        <meter id="level" name="level" min="0" low="59"   high="90" max="100" value="0" optimum="95"></meter>
        <label for="enrollment-date">入学日期：</label>
        <input type="date" name="enrollment-date" id="enrollment-date">
        <label for="graduation-date">毕业日期：</label>
        <input type="date" name="graduation-date" id="graduation-date">
        <input type="submit" value="提交">
    </fieldset>
</form>
<script>
    let score = document.getElementById("score");
    score.oninput = function () {
        let level = document.getElementById("level");
        level.value = this.value;
    };
</script>
</body>
</html>