本例主要是使用div+css实现了简单的用户注册表单模块，给广大同学学习div+css制作表单一个良好范例代码。下面请看青岛星网：div+css实现简单表单。
<div class="m-form">
<form name="" action="#" method="get">
<fieldset>
<legend>欢迎注册账户</legend>
<div class="formitm">
<label class="lab">账号：</label>
<div class="ipt">
<input type="text" class="u-ipt"/><span class="domain">@163.com</span>
<p>6~8个字符，包括字母，数字，下划线以字母开头，字母或数字结尾</p>
</div>
</div>
<div class="formitm">
<label class="lab">初始密码：</label>
<div class="ipt">
<input type="text" class="u-ipt"/>
<p>6~8个字符，区分大小写</p>
</div>
</div>
<div class="formitm">
<label class="lab">确认密码：</label>
<div class="ipt">
<input type="text" class="u-ipt"/>
<p>再次输入密码</p>
</div>
</div>
<div class="formitm">
<label class="lab">验证码：</label>
<div class="ipt">
<input type="text" class="u-ipt"/><img class="code-img" src="http://reg.email.163.com/mailregAll/regvf1/verifyCodeImgF.jsp?env=488381217144&type=en&t=1333003692444" alt="验证码"/><a href="#" class="f-ib">换一张</a>
<p class="tip"><input type="checkbox" id="agree"/><label for="agree">同意“服务条款”和“隐私权保护和个人信息利用政策”</label></p>
</div>
</div>
<div class="formitm formitm-1"><button class="u-btn" type="button">立即注册</button></div>
</fieldset>
</form>
</div>/* 简易表单 */
.m-form{line-height:29px;color:#555;}
.m-form legend{font-size:14px;font-weight:bold;}
.m-form .formitm{padding:20px 0 0;line-height:30px;}
.m-form .formitm-1{padding-left:100px;}
.m-form .lab{float:left;width:90px;margin-right:-90px;text-align:right;font-weight:bold;}
.m-form .ipt{margin-left:100px;}
.m-form .ipt *{vertical-align:middle;}
.m-form .ipt a,.m-form .ipt a:hover{text-decoration:none;color:#3891eb;}
.m-form .ipt img{height:32px;margin:0 15px 0 5px;}
.m-form .ipt .domain{margin:0 0 0 5px;font-weight:bold;color:#777;}
.m-form .ipt p{height:22px;line-height:22px;color:#999;}
.m-form .tip{padding-top:10px;}
.m-form .tip input{margin:0 5px 3px 0;}
/* 文本输入框 */
.u-ipt{width:180px;padding:5px;height:17px;border:1px solid #D9D9D9;border-top-color:#c0c0c0;line-height:17px;font-size:14px;color:#777;background:#fff;}
/* 文本输入框-窄 */
.u-ipt-1{width:90px;}
/* 文本输入框-出错 */
.u-ipt-err{border-color:#c00 #e00 #e00;}
/* 通用自定义按钮-默认蓝色 */
.u-btn{display:inline-block;*display:inline;*zoom:1;*overflow:visible;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;padding:0 12px;height:28px;line-height:28px;border:1px solid #2d88bf;font-size:12px;letter-spacing:1px;word-spacing:normal;text-align:center;vertical-align:middle;cursor:pointer;background:#54aede;}
button.u-btn{*height:30px;_line-height:25px;}
.u-btn,.u-btn:hover{color:#fff;text-decoration:none;}
.u-btn:hover,.u-btn:focus{background:#399dd8;}
.u-btn::-moz-focus-inner{padding:0;margin:0;border:0;}
.u-btn .btntxt{margin-right:3px;_vertical-align:middle;}
.u-btn .btnsel{display:inline-block;*display:inline;*zoom:1;width:0;height:0;overflow:hidden;vertical-align:middle;border-style:solid dashed dashed;border-width:4px 4px 0;border-color:#fff transparent transparent;}
在线QQ：
