实例:应用CSS实现表单form布局(博主:http://www.bm777.com/post/32.html)
2011-03-10 15:59
1336 查看
<style type="text/css">
label{
float: left;
width: 80px;
}
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>
<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>
效果为
label{
float: left;
width: 80px;
}
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>
<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>
效果为
相关文章推荐
- Javascript实现HTML表单form多个HttpPost请求
- 经典用CSS实现form表单布局
- 纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
- 纯div+css实现下拉菜单 http://www.zhangmeigong.cn/post/xiala.html
- 用CSS实现表单form布局
- 实例详解html的form表单和php的_POST数组,并用fiddler抓包来玩玩------走进Web、Server开发的世界
- 用CSS实现表单form布局
- ajax XMLHTTP Post Form时的表单乱码综合解决
- HTML CSS + DIV实现局部布局
- 用form表单实现Ajax---post提交
- 多种实例解析HTML表单form的使用方法
- HTML初级,用基本CSS+JS实现表单验证
- CSS布局应用到XML文档和HTML文档
- Http Post请求的三种常见方式form表单 io流等
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- 《HTML 5+CSS 3网站布局应用教程》图书推荐
- HTTP协议与HTML表单(再谈GET与POST的区别)
- HTML中Form表单提交时,采用 get和post的区别
- 利用HTML和CSS实现常见的布局
- 使用HTML+CSS实现如图布局,border-width:5px,格子大小是50px*50px,hover时 边框变成红色,需要考虑语义化。