<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
fieldset{
width: 500px;
padding: 20px;
border-radius: 10px;
text-align: center;
}
legend{
text-align: center;
font-size: 20px;
}
label{
display: flex;
width: 100%;
margin: 20px 0;
height: 24px;
line-height: 24px;
border: 1px solid #ccc;
border-radius: 12px;
}
span{
flex: 1;
text-align: center;
}
input{
border-radius: 3px;
outline: none;
border: 0;
width: 100%;
flex: 4;
border-radius: 12px;
padding-left: 10px;
}
input::-webkit-input-placeholder{
color: #ccc;
}
select{
flex: 4;
outline: none;
border: 0;
border-radius: 12px;
}
#btn{
width: 100px;
height: 24px;
line-height: 24px;
color: #fff;
margin-right: 20px;
background: blue;
}
button{
width: 100px;
height: 24px;
border-radius: 12px;
border: 0;
background: blue;
}
a{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<fieldset>
<legend>学生档案</legend>
<form action="www.baidu.com" method="post">
<label for="name"><span>姓名:</span><input type="text" placeholder="请输入姓名" id="name" name="name" autofocus required></label>
<label for="tel"><span>电话:</span><input type="tel" placeholder="请输入电话号码" id="tel" name="tel" maxlength="11" required></label>
<label for="email"><span>邮箱:</span><input type="email" placeholder="请输入email" id="name" name="email" required></label>
<label for="date"><span>出生日期:</span><input type="date" id="date" name="date" required></label>
<label for="school">
<span>选择学校:</span>
<select name="school" id="school">
<option value="北京大学">北京大学</option>
<option value="清华大学">清华大学</option>
<option value="浙江大学">浙江大学</option>
</select>
</label>
<label for="number"><span>成绩:</span><input type="number" placeholder="请输入成绩" id="number" name="number" maxlength="3" required></label>
<label for="date"><span>入学时间:</span><input type="date" id="date" name="date" required></label>
<label for="date"><span>毕业时间:</span><input type="date" id="date" name="date" required></label>
<input id="btn" type="submit" value="提交">
<button><a href="index.html">重置</a></button>
</form>
</fieldset>
</body>
</html>
h5 表单
最新推荐文章于 2024-07-29 00:36:24 发布