html5新增表单元素和属性的案例

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        max-width:600px;
        margin: 0 auto;
    }
    form{
        width:100%;
    }
    form fieldset{
        padding:20px 20px 10px;
    }
    form fieldset label{
        font-weight:bold;
        line-height:20px;
    }
    form input,
    form meter{
        width:100%;
        margin:10px 0;
        display: block;
        height:30px;
        border: 1px solid #ccc;
        padding-left:5px;
    }
    form meter{
        width:100%;
        border: none;
        padding-left:0;
    }
    .btn{
        width:100%;
        height: 40px;
        margin-top: 20px;
    }
</style>
b)结构
<body>
<form action="">
    <fieldset>
        <legend>学生档案</legend>
        <label for="userName">姓名:</label>
        <input type="text" name="userName" id="userName" placeholder="请输入姓名" required>
        <label for="phone">手机号码：</label>
        <input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$">
        <label for="email">邮箱地址：</label>
        <input type="email" name="email" id="email">
        所属学院：
        <input type="text" list="school" name="college" id="college" placeholder="请选择">
        <datalist id="school">
            <option>移动与前端开发学院</option>
            <option>IOS</option>
            <option>andriod</option>
            <option>c++</option>
        </datalist>
        <label for="score">入学成绩:</label>
        <input type="number" max="100" min="0" step="1" name="score" id="score" value="0">
        <label for="level">基础水平</label>
        <!--通过low/high的值来设置meter的颜色-->
        <meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></meter>
        <label for="inTime">入学日期</label>
        <input type="date" name="inTime" id="inTime">
        <label for="leaveTime">毕业日期</label>
        <input type="date" name="leaveTime" id="leaveTime">
        <input type="submit" name="submit" id="submit" class="btn">
    </fieldset>
</form>
<script>
    /*通过score成绩的输入，动态修改meter的颜色*/
    document.getElementById("score").oninput=function(){
        document.getElementById("level").value=this.value;
    }
</script>
</body>
这里写图片描述
html5新增表单元素和属性的案例

猜你喜欢
