<!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=)