H5表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$$</title>
    <style>
        form{
            width: 600px;
            margin: 20px auto 0;
        }

        meter,
        input{
            width: 100%;
            margin: 10px 0;
            border:none;
            border:1px solid #cccccc;
            border-radius: 4px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            padding-left: 10px;
            box-sizing: border-box;


        }

        meter{
            padding: 0;
        }
    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>学生档案</legend>
        <label for="name">姓名：</label><input type="text" name="name" id="name" autocomplete="off" autofocus placeholder="请输入用户名">
        <label for="phone">手机号码：</label><input type="tel" name="phone" id="phone">
        <label for="email">邮箱地址：</label><input type="email" name="email" id="email">
        <label for="text">所属学院：</label><input type="text" name="text" id="text" list="collage">
        <datalist id="collage">
            <option value="文学院"></option>
            <option value="商学院"></option>
            <option value="工学院"></option>
            <option value="美学院"></option>
            <option value="医学院"></option>
        </datalist>
        <label for="score">入学成绩：</label><input type="number" name="score" id="score" min="0" max="100" value="0">
        <label for="basic">基础水平：</label><meter id="basic" max="100" min="0" low="59" high="89" value="0"></meter>
        <label for="enter">入学日期：</label><input type="date" name="enter" id="enter">
        <label for="leave">入学日期：</label><input type="date" name="leave" id="leave">
        <input type="submit" value="提交">
    </fieldset>
</form>
<script>
   document.getElementById("score").oninput = function(){
       document.getElementById("basic").value = this.value;
   }
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容