本例主要是使用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;}