描述：
form表单的使用，编写一个基本信息的填写的form表单。
效果图：
代码展示：
<!DOCTYPE html>
<html>
<head>
<title>form表单的使用</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
form{
width: 1200px;
height: 800px;
background-color: aqua;
margin: 50px auto 30px;
border-radius: 20px;
}
p{
/* background-color: antiquewhite; */
height: 50px;
margin-bottom: 10px;
font-size: 30px;
padding: 20px 200px;
}
p > input{
background: none;
}
p.p1 input{
width: 600px;
height: 30px;
margin:0 10px;
display: inline-block;
outline: medium;
border: none;
padding-left: 30px;
border-bottom: 2px solid rgb(170, 164, 164);
}
p.p2 input{
width: 30px;
height: 30px;
}
p.p3 input{
width: 200px;
height: 60px;
background-color: rgb(191, 191, 196);
color: antiquewhite;
margin: 0 100px;
font-size: 30px;
border-radius: 10px;
outline: none;
border: none;
}
form p input:hover{
background-color: rgb(247, 245, 243);
}
form > h3{
height: 50px;
text-align: center;
font-size: 35px;
line-height: 50px;
padding-top: 30px;
}
</style>
<body>
<form>
<h3>个人信息填写</h3>
<p class="p1">
姓名：<input type="text" name="username" />
</p>
<p class="p1">
年龄：<input type="number" name="age" />
</p>
<p class="p1 p2">
性别：<input type="radio" name="gender" />男
<input type="radio" name="gender"/>女
<input type="radio" name="gender"/>保密
</p>
<p class="p1 p2">
爱好：<input type="checkbox" name="hobby" />篮球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>羽毛球
</p>
<p class="p1">
生日：<input type="datetime-local" name="birthday"/>
</p>
<p class="p1">
备注：<input type="text" name="remarks" />
</p>
<p class="p3">
<input type="submit" value="提交"><input type="reset" value="重置"/>
</p>
</form>
</body>
</html>
