转到CSS教程学习与交流平台首页DIV+CSS自学教程网

CSS - DivCss5您的位置：主页 > DIV+CSS模块 >

css form实例 用CSS实现表单form布局实例

用CSS实现表单form布局实例，css form实例

很多时候我们遇到Form表单，左边是文字标题，右边是表单input空，对于新手来说是非常麻烦的事，好了接下来我们将奉送一段div+css代码关于Form表单布局实例及源代码。

Form表单实例达到效果图
 

CSS form表单布局实例效果图
div css的Form表单效果图

Css form表单css源代码如下：

 <style type="text/css">
<!--
/* www.divcss5.com之css form实例 */
label{float: left;width: 80px;line-height:25px;}
form{margin:0px}
input{width: 180px;border:1px solid #808080;}

textarea{width: 250px;height: 150px;}

#sbutton{margin-left: 80px;margin-top: 5px;width:80px;}

br{clear: left;}
-->
</style>


 

 

Css form表单html源代码如下：

 <form action="" method="post">

<label for="user">姓名:</label>
<input type="text" id=user name="user" value="" /><br />

<label for="email">邮件:</label>
<input type="text" id=email name="email" value="" /><br />

<label for="comment">备注:</label>
<textarea id=comment name="comment">
</textarea><br />

<input type="submit" id="sbutton" value="确定" /><br />
</form>


 

 

希望div+css网站总结的css form表单样式案例对你有帮助。
查看CSS FORM表单在线演示-点我查看

更多

 

DIV+CSS教程基础

如对文章有任何疑问请提交到DIV CSS论坛，或有任何网页制作CSS问题立即到CSS论坛发贴求解。
DIV+CSS作者：DIVCSS5     CSS修订日期：2010-04-13    点击: 次
本文WWW.DIVCSS5.COM(DIV CSS) DIVCSS5版权所有，未经书面批准转载法律必究。

 

最新更新CSS教程与内容

 

关于我们 - 联系我们 - DIV CSS - DIV+CSS - CSS网站地图 - CSS - RSS订阅 - 最新CSS教程列表 -- TOP

© 2011 DIVCSS5 www.divcss5.com  CSS教程学习与交流平台