表单制作是在进行CSS网页布局时候经常会遇到同时表单制作也是项比较头疼问题我们今天学习个CSS表单例子我个人认为效果挺不错www.52css.com原创转载请注明出处
　　看下面效果:



　　首页我们进行整体规划:

　　建立个容器将表单元素及其它相关元素起扔进去
　　设置标签h1放置UserLogin
　　设置标签h2放置“请输入您用户名和密码”
　　设置“Username”和“Password”表单提示文字容器
　　设置表单输入框
　　设置密码找回文字链接
　　最终我们设置提交表单按钮图片

　　我们形成如下xhtml代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<divid=\"\">
    <h1id=\"title\">UserLogin</h1>
    <h2id=\"login\">请输入您用户名和密码</h2>
    <p=\"formt\">Username</p>
    <p><inputname=\"Username\"type=\"text\"=\"username\"></p>
    <p=\"formt\">Password</p>
    <p><inputname=\"Password\"type=\"password\"=\"password\"></p>
    <pid=\"forget\"><ahref=\"http://www.52css.com/\"target=\"_blank\">ForGetPassword?</a></p>
    <pid=\"button\"><inputtype=\"image\"src=\"http://www./Files/BeyondPic/2007-5/24/0752416083419404.g\"=\"imgbutton\"/></p>
</div>


　　下面我们开始进行CSS代码编写实现这款表单效果

　　我们发现h2元素title和表单提示文字类formt除了背景色区别其它属性是相同我们将它们合并起来编写在后面我们单独定义类formt和title区别的处进步简化代码

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#title,.formt{width:208px;height:26px;line-height:26px;text-indent:5px;font-family:verdana,tahoma,sans-ser;font-size:10px;background:#ddd;}
.formt{display:block;font-weight:800;background:#fff;}


　　title和formt共同属性:
　　　高度和宽度为208px、26px
　　　行高26px文字缩进5px
　　　定义了字体及文字大小
　　　设置背景色为#ddd浅灰色
　　类.formt进行单独定义:
　　　设置为块元素文字加粗
　　　由于title是h1标签浏览器默认为加粗所以不必再单独定义
　　　设置formt背景色为#fff白色www.52css.com原创转载请注明出处

接下来我们设置h2“请输入您用户名和密码”

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#login{width:208px;height:24px;padding-top:11px;background:url(warning.g)no-repeat9px8px;text-indent:28px;font-size:12px;color:#666;font-weight:100;}


　　高度和宽度为208px、24px进行上填充调整设置背景图片文字缩进以及字体加粗为100等

　　同上面情况类似表单输入框类.username和类.password除了小图标区别其它属性是相同进步简化代码我们也将它们合并编写

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
.username,.password{
    background:#fff;
    border:1pxsolid#ccc;
    color:#000;
    font-family:verdana,tahoma,sans-ser;
    font-size:12px;
    width:196px;
    height:22px;
    margin-left:6px;
    padding-left:20px;
    line-height:20px;


}


　　背景色为#fff白色边框1px、实线、#ccc灰色
　　设置文字颜色字体及大小
　　设置输入框高度和宽度196px、22px
　　由于想要和提示文字左对齐我们设置左边距为6px
　　为了给小图标留下足够空间我们内容左填充为20px
　　输入框input内文字可能和小图标不能水平对齐我们预调行高为20px

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
.username{background:url(username.g)no-repeat2px2px;}
.password{background:url(password.g)no-repeat2px2px;}


　　上面代码分别给类.username和类.password定义小图标需要你注意是背景图片为不重复定位在距左、距顶均为2px地方由于我们在上面代码中已定义了左填充为20px小图标有足够空间显示出来而不用担心输入表单文字会遮盖它

　　下面我们定义忘记密码链接和表单按钮图片www.52css.com原创转载请注明出处

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#forgeta{width:208px;height:20px;line-height:20px;text-indent:3px;font-family:verdana,tahoma,sans-ser;font-size:10px;color:#f60}
#button{width:208px;height:28px;}
.imgbutton{margin-top:7px;margin-left:132px;}


　　有关忘记密码链接进行简单定义就可以了当然你也可以完善它定义链接hover属性
　　我们设置按钮图片容器button宽度和高度208px、28px
　　表单提交按钮我们在xhtml中是这样编写:inputtype=\"image\"src=\"http://www./Files/BeyondPic/2007-5/24/0752416083419404.g\"
　　这样编写好处在于我们输入完用户名和密码以后除了可以用鼠标点击提交直接按回车就可以提交表单增强用户易用性
　　类imgbutton对表单按钮进行了设置让它处在合适位置顶边距和左边距设置下就可以了

　　我们来看完整CSS代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
*{margin:0;padding:0;}
#{width:208px;margin:50px;}
#title,.formt{width:208px;height:26px;line-height:26px;text-indent:5px;font-family:verdana,tahoma,sans-ser;font-size:10px;background:#ddd;}
#login{width:208px;height:24px;padding-top:11px;background:url(warning.g)no-repeat9px8px;text-indent:28px;font-size:12px;color:#666;font-weight:100;}
.formt{display:block;font-weight:800;background:#fff;}
.username,.password{
    background:#fff;
    border:1pxsolid#ccc;
    color:#000;
    font-family:verdana,tahoma,sans-ser;
    font-size:12px;
    width:196px;
    height:22px;
    margin-left:6px;
    padding-left:20px;
    line-height:20px;
}
.username{background:url(username.g)no-repeat2px2px;}
.password{background:url(password.g)no-repeat2px2px;}
#forgeta{width:208px;height:20px;line-height:20px;text-indent:3px;font-family:verdana,tahoma,sans-ser;font-size:10px;color:#f60}
#button{width:208px;height:28px;}
.imgbutton{margin-top:7px;margin-left:132px;}


　　我们完成了这个表单xhtml和css代码编写从这个小例子中你应该能够掌握背景图片灵活运用这种应用方式在CSS网页布局中是非常重要有很多效果是通过这种方式来实现

　　我们看最终运行效果:www.52css.com原创转载请注明出处

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]
<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; char<img src='/icons/1088set.gif' />=gb2312\" /> <br/> <br/> <title>www.52css.com</title><style type=\"text/css\">* { margin:0; padding:0;}#<img src='/icons/1088main.gif' /> { width:208px; margin:50px;}#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-ser<img src='/icons/1088if.gif' />; font-size:10px; background:#ddd;}#login { width:208px; height:24px; padding-top:11px; background:url(attachments/month_0704/392/warning.g<img src='/icons/1088if.gif' />) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}.formt { display:block; font-weight:800; background:#fff;}.username,.password { background:#fff; border:1px solid #ccc; color:#000; font-family:verdana, tahoma, sans-ser<img src='/icons/1088if.gif' />; font-size:12px; width:196px; height:22px; margin-left:6px; padding-left:20px; line-height:20px;}.username { background:url(attachments/month_0704/392/username.g<img src='/icons/1088if.gif' />) no-repeat 2px 2px;}.password { background:url(attachments/month_0704/392/password.g<img src='/icons/1088if.gif' />) no-repeat 2px 2px;}#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-ser<img src='/icons/1088if.gif' />; font-size:10px; color:#f60}#button { width:208px; height:28px; }.imgbutton {margin-top:7px; margin-left:132px; }</style></head><body> <h1 id=\"title\">User Login</h1> <h2 id=\"login\">请输入您<img src='/icons/1088de.gif' />用户名和密码</h2> Username<br/><br/> <input name=\"Username\" type=\"text\" <img src='/icons/1088class.gif' />=\"username\"><br/><br/> Password<br/><br/> <input name=\"Password\" type=\"password\" <img src='/icons/1088class.gif' />=\"password\"><br/><br/> ForGet Password ? <br/><br/> <input type=\"image\" src=\"http://www./Files/BeyondPic/2007-5/24/0752416083447463.g<img src='/icons/1088if.gif' />\" <img src='/icons/1088class.gif' />=\"imgbutton\" /><br/><br/><br/>52CSS.com原创<img src='/icons/1088dou.gif' />转载请注明出处<img src='/icons/1088dou2.gif' /><br/><br/></body></html>
=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]