<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新增表单元素和属性的案例
最新推荐文章于 2022-03-14 21:57:23 发布