这篇博客展示了如何利用HBuilder设计一个开心网的注册页面，包括输入电子邮箱、创建密码、选择性别和生日、填写现状和居住地，以及同意服务条款的表单过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>开心网</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
margin-left: 500px;
margin-top: 100px;
}
#b1{
margin-left: 100px;
font-size: 13px;
color:gray ;
}
#b1 a{
text-decoration:none;
color: deepskyblue;
}
div p{
margin: 20px;
}
</style>
</head>
<body>
<div>
<h2>还没有开心网账号？赶紧注册吧</h2>
<form action="1" method="post">
<p>电子邮箱：<input style="height: 30px; width: 200px;" type="email"></p>
<p id="b1">如果没有邮箱，你可以用<a href="1">账号注册</a></p>
<p>创建密码：<input style="height: 30px; width: 200px;" type="password"></p>
<p>姓 名：<input style="height: 30px;width: 200px;" type="text"/></p>
<p>
性 别：<input type="radio" name="sex" />男
<input type="radio" name="sex" />女</p>
<p>
生 日：
<select>
<option value="1">2018</option>
<option value="1">2017</option>
<option value="1">2016</option>
<option value="1">2015</option>
<option value="1">2014</option>
<option value="1">2013</option>
<option value="1">2012</option>
<option value="1">2011</option>
</select>年
<select>
<option value="2">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="2">4</option>
<option value="2">5</option>
<option value="2">6</option>
<option value="2">7</option>
<option value="2">8</option>
<option value="2">9</option>
<option value="2">10</option>
<option value="2">11</option>
<option value="2">12</option>
</select>月
<select>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>日</p>
<p>
我现在：<input type="radio" name="zhuantai" />在工作
<input type="radio" name="zhuantai" />在上学
<input type="radio" name="zhuantai" />其它
</p>
<p> 居住地：<input style="height: 30px;width: 200px;" type="text" /></p>
<p style="margin-left:100px ;">
<input type="checkbox" name="yes"/>同意<a style="text-decoration: none; color:deepskyblue; ;" href="1">开心网服务条款</a>
</p>
<p style="margin-left:100px ;">
<input style="height: 40px; width: 180px; color: white; background: seagreen;" type="submit" value="立即注册"/></p>
</form>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>开心网</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
margin-left: 500px;
margin-top: 100px;
}
#b1{
margin-left: 100px;
font-size: 13px;
color:gray ;
}
#b1 a{
text-decoration:none;
color: deepskyblue;
}
div p{
margin: 20px;
}
</style>
</head>
<body>
<div>
<h2>还没有开心网账号？赶紧注册吧</h2>
<form action="1" method="post">
<p>电子邮箱：<input style="height: 30px; width: 200px;" type="email"></p>
<p id="b1">如果没有邮箱，你可以用<a href="1">账号注册</a></p>
<p>创建密码：<input style="height: 30px; width: 200px;" type="password"></p>
<p>姓 名：<input style="height: 30px;width: 200px;" type="text"/></p>
<p>
性 别：<input type="radio" name="sex" />男
<input type="radio" name="sex" />女</p>
<p>
生 日：
<select>
<option value="1">2018</option>
<option value="1">2017</option>
<option value="1">2016</option>
<option value="1">2015</option>
<option value="1">2014</option>
<option value="1">2013</option>
<option value="1">2012</option>
<option value="1">2011</option>
</select>年
<select>
<option value="2">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="2">4</option>
<option value="2">5</option>
<option value="2">6</option>
<option value="2">7</option>
<option value="2">8</option>
<option value="2">9</option>
<option value="2">10</option>
<option value="2">11</option>
<option value="2">12</option>
</select>月
<select>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>日</p>
<p>
我现在：<input type="radio" name="zhuantai" />在工作
<input type="radio" name="zhuantai" />在上学
<input type="radio" name="zhuantai" />其它
</p>
<p> 居住地：<input style="height: 30px;width: 200px;" type="text" /></p>
<p style="margin-left:100px ;">
<input type="checkbox" name="yes"/>同意<a style="text-decoration: none; color:deepskyblue; ;" href="1">开心网服务条款</a>
</p>
<p style="margin-left:100px ;">
<input style="height: 40px; width: 180px; color: white; background: seagreen;" type="submit" value="立即注册"/></p>
</form>
</div>
</body>
</html>
扫一扫
4166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
