html注册栏网页练习代码

html

body>

    <form action="#" method="get">

        <div>

            <label for="yonghu">用户名<span> * </span></label>

            <input type="text" placeholder="" name="username" id="yonghu" required>

            <span>请使用邮箱的电子邮箱</span>

        </div>

        <div>

            <label for="mima">密码<span> * </span></label>

            <input type="password" placeholder="" name="pwd" id="mima" required>

            <span class="qiangdu">密码强度：

                <span>弱</span>

                <span>中</span>

                <span>强</span>

            </span>

        </div>

        <div>

            <label for="queren">确认密码<span> * </span></label>

            <input type="password" name="pwd" id="queren" required>

        </div>

        <div>

            <label for="mubiao">注册目标<span> * </span></label>

            <input type="radio" name="xiangmu" value="huiyuan" required checked> 会员 <span>（快速卖出或买进农产品）</span>

            <div>

                <input type="radio" name="xiangmu" value="nongyejingjiren"

                    required> 农业经纪人 <span>（为广大会员服务，促成农产品交易）</span>

            </div>

            <div>

                <input type="radio" name="xiangmu" value="qudaolianmeng" required> 渠道联盟 <span>（成为我们的合作伙伴）</span>

            </div>

            <div>

                <input type="radio" name="xiangmu" value="xinxiyuan" required> 信息员 <span>（采集发布热点农业信息）</span>

            </div>

            <div>备注：Lorem ipsum dolor si Consectetur, dolorum.</div>

        </div>

        <div>

            <label for="xingming">姓名<span> * </span></label>

            <input type="text" placeholder="" name="myname" id="xingming" required>

            <span>真实姓名（与身份证信息一致）</span>

        </div>

        <div>

            <label for="shouji">手机<span> * </span></label>

            <input type="text" placeholder="" name="mobile" maxlength="11" id="shouji" required>

            <span>真实姓名（与身份证信息一致）</span>

        </div>

        <div>

            所在区域<span> * </span>

            <select name="area" id="area" required>

                <option value="guojia">中国</option>

                <option value="tajike">塔吉克斯坦</option>

            </select>

            <select name="area1" id="area1" required>

                <option value="diqu">---地区---</option>

                <option value="meiguo">---美国---</option>

            </select>

            <span>选择所在的省/市</span>

        </div>

        <div>

            <label for="yanzhengma">验证码<span> *  </span></label>

            <input type="text" placeholder="" name="yanzheng" id="yanzhengma" required>

            <a href="#">看不清，换一张</a>

        </div>

        <div class="yidong">

            <button class="tijiao">同意以下条款并注册</button>

            <a href="#">登入</a><a href="#">找回密码</a>

        </div>

        <textarea name="" id="" cols="50" rows="5"></textarea>

    </form>

</body>

</html>

css

form {

    width: 800px;

    margin: auto;

}

form>div {

    margin: 10px 0;

}

label {

    font-size: 16px;

    font-weight: bold;

}

form>div>label {

    display: inline-block;

    width: 100px;

    text-align: right;

}

label>span:first-child {

    color: red;

}

div>span:last-of-type {

    font-size: 12px;

    color: cadetblue;

}

a {

    display: inline-block;

    text-decoration: none;

    margin: 0 10px;

}

form>div:nth-child(4)>div {

    margin-left: 104px;

}

form>div:nth-child(4)>div>span {

    display: inline-block;

    width: 300px;

    text-align: left;

}

.qiangdu>span {

    display: inline-block;   

    color: red;

    padding: 0 5px;

}

.qiangdu>span:nth-child(2) {

    color: black;

}

.qiangdu>span:last-child {

    color: green;

}

form>div:nth-child(7){

    margin-left:25px;

    font-size: 16px;

    font-weight: bold;

   

}

form>div:nth-child(7)>span:first-child{

   color: red;

  

}

.tijiao{

    display: inline-block;

    padding: 10px;

    border-radius: 10px;

    text-align: center;

    background-image: linear-gradient(orange);

}

.yidong{

    margin-left: 100px;

   

}