表单H5新增标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单项目</title>
<style>
*{
margin: 0;
padding: 0;
}
form{
width: 420px;
height: 510px;
margin: 0 auto;
background: #ccc;
}
form h2{
padding: 28px 33px 12px 0;
font-size: 12px;
font-weight: 500;
text-align: right;
line-height: 12px;
}
form fieldset{
border: 0;
border-top: 1px solid black;
font-size: 12px;
}
fieldset legend{
margin-left: 7px;
padding: 0 3px;
}
.f1>div{
margin: 13px 0 0 30px;
}
.f1{
margin: 0 25px;
}
.f1>legend{
font-weight: 900;
}
.f2 fieldset{
margin: 0 5px;
}
.f2 div{
float: left;
margin: 6px 0 0 30px;
}
.f2 fieldset div label{
position: relative;
top: -2px;
left: 3px;
}
.f2 textarea{
display: block;
width: 220px;
height: 115px;
margin: 5px 25px;
resize: none;
}
.f2 .btn{
display: block;
width: 115px;
height: px;
margin-left: 120px;
}
</style>
</head>
<body>
<form action="">
<h2>*号所在项为必填项</h2>
<fieldset class="f1">
<legend>个人信息</legend>
<div>
<label for="name">姓名*</label>
<input type="text" id="name">
</div>
<div>
<label for="url">地址*</label>
<input type="text" id="url">
</div>
<div>
<label for="s1">出生*</label>
<select name="" id="s1">
<option value="">26</option>
<option value="">24</option>
<option value="">23</option>
<option value="">22</option>
<option value="">21</option>
</select>
<select name="" id="s1">
<option value="">26</option>
<option value="">24</option>
<option value="">23</option>
<option value="">22</option>
<option value="">21</option>
</select>
<select name="" id="s1">
<option value="">26</option>
<option value="">24</option>
<option value="">23</option>
<option value="">22</option>
<option value="">21</option>
</select>
</div>
<div>
<label for="sex">性别*</label>
<select name="" id="sex">
<option value="">男</option>
<option value="">女</option>
</select>
</div>
</fieldset>
<fieldset class="f1 f2">
<legend>其他信息</legend>
<fieldset>
<legend>你喜欢这个表单吗</legend>
<div><input type="radio" name="rad" id="ra1"> <label for="ra1">喜欢</label></div>
<div><input type="radio" name="rad" id="ra2"> <label for="ra2">不喜欢</label></div>
</fieldset>
<fieldset>
<legend>你喜欢什么运动</legend>
<div><input type="checkbox" name="cke" id="che1"> <label for="che1">足球</label></div>
<div><input type="checkbox" name="cke" id="che2"> <label for="che2">篮球</label></div>
<div><input type="checkbox" name="cke" id="che3"> <label for="che3">乒乓球</label></div>
</fieldset>
<fieldset>
<legend>请写下你的建议</legend>
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="提交个人信息" class="btn">
</fieldset>
</fieldset>
</form>
</body>
</html>
浙公网安备 33010602011771号