<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>课堂学习</title>
<style>
/*点击会出现”此项必填“字样*/
.span_1,.span_2,.span_3,.span_4{
color: #B8B8B8;
font-size: 15px;
}
#box_1:focus+.span_1:after,#box_2:focus+.span_2:after,#box_3:focus+.span_3:after,#box_4:focus+.span_4:after{
content: "此项必填";
}
#box_1,#box_3,#box_5{
margin-left:35px ;
}
#box_2{
margin-left: 11px;
}
#sex_p>label{
margin-left: 25px;
}
#love_p>label{
margin-left: 5px;
}
#botton>input{
margin-left:40px ;
}
</style>
</head>
<body>
<fieldset>
<legend>注册表单（必填）</legend>
<form method="#">
<p>
<label for="box_1">昵称：</label>
<input type="text" id="box_1" placeholder="请输入昵称" required/><span class="span_1" onfocus="oniput(this,1)"></span>
</p>
<p>
<label for="box_2">QQ邮箱：</label>
<input type="email" id="box_2" placeholder="请输入邮箱" required/><span class="span_2"></span>
</p>
<p>
<label for="box_3">密码：</label>
<input type="password" id="box_3" placeholder="请输入密码" required/><span class="span_3"></span>
</p>
<p>
<label for="box_4">确认密码：</label>
<input type="password" id="box_4" placeholder="确认密码" required/><span class="span_4"></span>
</p>
<p>
<label for="box_5">生日：</label>
<input type="date" id="box_5" /><span class="span_5">
</p>
<p id="sex_p">
选择性别：<label for="man">男</label>
<input type="radio" id="man" name="sex"/>
<label for="woman">女</label>
<input type="radio" id="woman" name="sex"/>
</p>
<p id="love_p">
感兴趣：
<label for="bask">篮球:</label> <input type="checkbox" name="basktball" id="bask"/>
<label for="foot">足球:</label><input type="checkbox" name="football" id="foot"/>
<label for="pp">乒乓:</label><input type="checkbox" name="pp" id="pp"/>
</p>
<p id="botton">
<input type="submit" value="提交"/>
<input type="reset" />
</p>
</form>
</fieldset>
</body>
</html>
![]()
浙公网安备 33010602011771号