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; /*设置宽度*/margin: 0px auto; /*div在浏览器中居中显示*/border: gray 5px double; /*设置边框*/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><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>

web程序设计（前端）实验二——表单设计相关推荐

web表单设计:点石成金_如何设计安全的Web表单：验证，清理和控制
web表单设计:点石成金 While cybersecurity is often thought of in terms of databases and architecture, much of ...
web表单设计:点石成金_设计复杂的用户表单：12个UX最佳实践
web表单设计:点石成金 It's been a few years that I've been taking interest in designing complex user forms, w ...
33个与众不同的Web表单设计
表单在web设计中很重要,因为它具有直接的用户交互.创新?有趣?富有色彩?设计一个交互,需要设计师关注登陆/注册表单的设计元素. 这里有33个与众不同的web表单设计,希望能使你获得设计灵感. 1. ...
html表单标签与表单设计
html表单标签与表单设计 1.form标签及其属性 2.input标签及其属性 ①文本域:text ②密码域:password ③单选按钮:radio ④复选按钮:checkbox ⑤提交按钮:su ...
B 端设计师必不可少的表单设计（上）
本文将我自己踩过的坑整理出来,目的是为了帮助那些刚迈入职场的设计师,对表单能有一个更好的了解,从而避免在工作中进入误区. 本文共计11000个字,阅读大约需要30分钟,请合理安排时间,看得快的当我没说 ...
B端设计师必不可少的表单设计（上）
本文由作者陈志强CHETChan 于社区发布本文将我自己踩过的坑整理出来,目的是为了帮助那些刚迈入职场的设计师,对表单能有一个更好的了解,从而避免在工作中进入误区.也希望能给PM们提供一些思路. ...
移动应用表单设计秘籍
By elya妞 on 2012年04月16日原文地址:http://elya.cc/2012/04/16/mobile-form/ 一直想写一篇文章,关于移动应用表单设计的,可惜最近项目很忙,忙到 ...
html5中单选框被选中把值传给后台_HTML5的表单设计
使用过Delphi的程序员,对Form这个词应该比较熟悉.在Delphi中,Form被翻译为"界面.窗口",作用是:为用户提供界面,供用户输入信息,向用户展示处理结果. HTML5 ...
B端页面——详细表单设计流程
一.什么是表单? 表单设计是B端产品设计的基础页面,想要做好表单设计首先要搞清楚表单的应用场景. 表单是用户采集数据信息的核心场景,同时又通过表单向用户展示数据信息,简而言之表单是用户与数据库之间的桥 ...

web程序设计（前端）实验二——表单设计

web程序设计（前端）实验二——表单设计相关推荐

最新文章

热门文章