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; }

轉載于:https://www.cnblogs.com/zhuxinpeng-looking/p/10583777.html

總結

以上是生活随笔為你收集整理的html注册栏网页练习代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。