码迷,mamicode.com
首页 > 其他好文 > 详细

注册表单

时间:2018-09-15 14:38:20      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:pre   orm   密码   back   出现   size   eset   点击   name   

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

技术分享图片

 

 

 

注册表单

标签:pre   orm   密码   back   出现   size   eset   点击   name   

原文地址:https://www.cnblogs.com/zhangjiayimy/p/9650766.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!