<!DOCTYPE html>
<html lang="en">
<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>Practice student forms</title>
<link rel="stylesheet" href="../demo/Formcss.css">
</head>
<body>
<form action="">
<!-- It's mainly about the border fieldset The word -->
<fieldset>
<legend>Student files</legend>
<label for="userName">Full name: </label>
<input type="text" name="userName"
id="userName" placeholder="enter one user name">
<label for="userphone">Cell-phone number:</label>
<input type="text" name="userphone"
id="userphone">
<!-- required This is mainly to modify the name of the mailbox-->
<label for="email">e-mail address:</label>
<input type="email" required name="email" id="email">
<label for="collage">College</label>
<input type="text" name="collage" id="collage" list="clist" placeholder="Please choose">
<datalist id="clist">
<option value="Front end development College"></option>
<option value="Back end development College"></option>
<option value="Database College"></option>
</datalist>
<label for="score">Admission score:</label>
<input type="number" max="100" min="0" id="score">
<label for="level">Basic level:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter>
<label for="intime">Date of enrollment:</label>
<input type="date" id="inTime" name="inTime">
<label for="leaveTime">Graduation date:</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>And then there's the css style code
*{
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=Content + padding+border*/
box-sizing: border-box;
}
form > fieldset > meter{
padding-left:0px;
}
- Explain:
1. < fieldset > tags package a part of the form content to generate a set of related form fields. When a group of form elements are placed in the < fieldset > tag, the browser displays them in a special way, they may have special boundaries, 3D effects, or even create a subform to handle these elements.
2. The legend element is fieldset element Define the caption.