<!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>
