<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>练习学生的表单</title>
<link rel="stylesheet" href="../demo/Formcss.css" target="_blank" rel="external nofollow" >
</head>
<body>
<form action="">
<!-- 主要就是写那个边框的fieldset的这个单词 -->
<fieldset>
<legend>学生的档案</legend>
<label for="userName">姓名: </label>
<input type="text" name="userName"
id="userName" placeholder="请输入用户名">
<label for="userphone">手机号：</label>
<input type="text" name="userphone"
id="userphone">
<!-- required这个主要就是修饰邮箱的名字-->
<label for="email">邮箱地址：</label>
<input type="email" required name="email" id="email">
<label for="collage">所属的学院</label>
<input type="text" name="collage" id="collage" list="clist" placeholder="请选择">
<datalist id="clist">
<option value="前端开发学院"></option>
<option value="后端开发学院"></option>
<option value="数据库学院"></option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" id="score">
<label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter>
<label for="intime">入学日期:</label>
<input type="date" id="inTime" name="inTime">
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime">
<input type="submit">
</fieldset>
</form>
<script>
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
</html>
还有接下来就是css的样式的代码
*{
padding: 0;
margin: 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;
border: none;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
padding-left: 5px;
/*width=内容+padding+border*/
box-sizing: border-box;
}
form > fieldset > meter{
padding-left:0px;
}
- 说明：
1.<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
2. legend 元素为 fieldset 元素定义标题（caption）。
![APP强制更新(uni-app)项目要求：解决思路：效果图：具体代码：总结[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)