web程序设计（前端）实验⼆——表单设计
实现以下注册⽹站的设计。
设计要求：
（1）整个页⾯采⽤div布局，宽度500px，并且⽹页居中，以上控件放在⼀个表单内，每个控件必须设置name属性；采⽤label标签，使得点击左边字体时，右边控件能够获得焦点，⽹页字体⼤⼩采⽤14px；
（2）当⽹页中4个输⼊⽂本框在获得焦点时，显⽰粉红⾊背景，当失去焦点，则恢复原样，⽂本框⾼度都是30px。
（3）左边第⼀个下拉框只需要显⽰北京市、⼴州市、上海市、深圳市；第⼆个下拉框只需显⽰海淀区、东城区、海珠区、越秀区、福⽥区、黄浦区即可；（暂时不需要做联动）
（4）单选按钮“男”与“⼥”只能选中⼀个，并且当选中“男“或”⼥“的⽂字时，也能进⾏选择，同样的，当点击其他⽂本框的左端⽂字时，同样焦点可以⾜交到相应的⽂本框；
（5）需要设置⽹页载⼊后，⾃动焦点设置在”⼿机号码“的⽂本框；
（6）“昵称”与“⼿机号”是个必填字段，如果不填⼊昵称，点击提交按钮“⽴即开通”，则出现默认提⽰“请填写该字段”；
（7）”昵称“与“⼿机号”⽂本框，在⽆⽤户输⼊时，分别显⽰灰⾊的提⽰⽂字“输⼊⼿机号码”与“输⼊昵称”；
（8）提交按钮图⽚在pdf的附件中，如下图的第三张图⽚（“⽴即开通”）；
（9）当⿏标移动在提交按钮上⽅时，⿏标变⼿型，并显⽰下图的第四张图⽚。
参考代码：
注意：程序中所需的图⽚根据个⼈爱好进⾏改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单设计</title>
<style type="text/css">
.div1 {/*最⼤的div*/
width:550px;/*设置宽度*/
html radio点击变颜margin:0px auto;/*div在浏览器中居中显⽰*/
border: gray 5px double;/*设置边框*/
font-size:14px;/*设置字体⼤⼩*/
font-size:14px;/*设置字体⼤⼩*/
}
.div2,.div3 {
padding-top:10px;/*设置每个⼩div距离上⼀个div10px*/ }
.div3 {
text-align: center;/*设置按钮居中对齐*/
}
.span1 {
display: inline-block;/*设置类选择器*/
text-align: right;/*右边对齐*/
width:150px;/*宽度*/
line-height:30px;/*span的⾼度*/
}
.span3 {
color: gray;/*设置颜⾊*/
}
input {
line-height:30px;/*设置⾼度*/
color: gray;/*设置颜⾊*/
}
.input1 {
width:200px;
line-height:30px;/*设置⾼度*/
margin:0px auto;/*居中对齐*/
color: black;/*设置颜⾊*/
}
.input1:hover {
background-color: pink;/*悬浮变化颜⾊*/
}
.input2 {
color: black;/*设置颜⾊*/
}
.alert {
width:150px;/*设置宽度*/
line-height:20px;/*设置⾼度*/
vertical-align: middle;/**/
position: relative;/*设置标签关系*/
top:5px;/**/
font-size:10px;/*设置字体⼤⼩*/
background: #FFFECC;/*设置背景颜⾊*/
font-family: Arial simhei;/*设置字体类型*/
border:1px #aaa solid;/*设置边框*/
display: inline-block;
}
.btn {
background-image:url("images/123.jpg");/*添加图⽚*/            background-position:-410px -0px;/*背景位置*/
width:153px;/*宽度*/
height:52px;/*⾼度*/
border:0 none;/*边框*/
cursor: pointer;/**/
margin-top:10px;/*距离顶部*/
}
.btn:hover {
background-position:-565px -0px;/*悬浮变化后的图⽚的位置*/
}
</style>
</head>
<body>
<div class="div1">
<form action="" method="post">
<div class="div2">
<label>
<span class="span1">*我的⼿机号码：</span>
<input class="input1" type="text" name="user" size="25" autofocus="autofocus"
required="required" pattern="^1[3-9]\d{9}" title="你输⼊的⼿机号码不对" placeholder="输⼊⼿机号码"/> <input class="input2" type="button" value="免费获取验证码"/>
</label>
</div>
<div class="div2">
<span class="span1"></span>
<span class="span3">完成注册后，⼿机号码为你的微博登录号</span>
</div>
<div class="div2">
<label>
<span class="span1">*创建密码：</span>
<input class="input1" type="password" name="psd" size="25">
<span class="alert">为了你的账户安全，请使⽤与其他⽹络不同的密码。</span>
</label>
</div>
<div class="div2">
<label>
<span class="span1">*昵称：</span>
<input class="input1" type="text" name="text1" size="25" placeholder="输⼊昵称"
required="required">
</label>
</div>
<div class="div2">
<span class="span1">*性别：</span>
<label>
<input type="radio" name="sex" value="1"/>男
</label>
<label>
<input type="radio" name="sex" value="1"/>⼥
</label>
</div>
<div class="div2">
<span class="span1">*所在地：</span>
<select name="city" size="1">
<option value="1">北京市</option>
<option value="2">⼴州市</option>
<option value="3">上海市</option>
<option value="4">深圳市</option>
</select>
<select name="area" size="1">
<option value="1">海淀区</option>
<option value="2">东城区</option>
<option value="3">海珠区</option>
<option value="4">越秀区</option>
<option value="5">福⽥区</option>
<option value="6">黄埔区</option>
</select>
</div>
<div class="div2">
<span class="span1">*⼿机验证码：</span>
<span class="span1">*⼿机验证码：</span>
<label><input class="input1" type="text" name="validation" size="5"></label> </div>
<div class="div3">
<input class="btn" type="submit" value=""/>
</div>
</form>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。