用CSS实现表单form布局
出处:http://blog.donews.com/dodo/archive/2005/06/18/434979.aspx
在TABLE布局中设计Form,一般都是用2个td来布局,如果不用table,用CSS怎么做呢?看看下面的代码
<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>
相关推荐
-
用CSS实现表单form布局
出处:http://blog.donews.com/dodo/archive/2005/06/18/434979.aspx 在TABLE布局中设计Form,一般都是用2个td来布局,如果不用table,用CSS怎么做呢?看看下面的代码 <style type="text/css"> label{float: left;width: 80px;}form{margin:0px}input{width: 180px;border:1px solid #808080} texta
-
Bootstrap表单Form全面解析
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布局,一切都是那么的完整与完美! 普通表单 我们需要将表单元素包裹到form-group类里,一般以<div class="
-
Jquery基于Ajax方法自定义无刷新提交表单Form实例
本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos
-
用JS动态改变表单form里的action值属性的两种方法
方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">
-
如何防止INPUT按回车自动提交表单FORM
form中的input只有一个,input获得焦点时按回车会form自动提交: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action="http://blog.csdn.net/gnail_oug" method=&qu
-
微信小程序 表单Form实例详解(附源码)
微信小程序 表单Form实例 表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件
-
Vue 实现把表单form数据 转化成json格式的数据
目的:Vue 中 把表单form数据 转化成json格式的数据 第一步:创建一个数据集(就是你表单需要的数据) 如果你表单都是一些正常的数据,比如 text 什么的.你定义好数据集,就去用 v-model 绑定数据.这样就可以实现数据同步了. 数据集 v-model绑定 如果你的数据不全是这种可以用 v-model 绑定的数据,比如我这个里面需要获取一个 img 的 src 的值.那么下面就需要你想办法把数据给绑定上去了 第二步:转化json 上面第一步,我们已经通过 自动 + 手动 的方式把我
-
用 Javascript 验证表单(form)中多选框(checkbox)值
本文介绍了一个较为通用的获取 checkbox 值的方法,希望对新手有用. 复制代码 代码如下: <script type="text/javascript"> // 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值 // 作者: CodeBit function getCheckboxValue(checkbox) { if (!checkbox.length && checkbox.type.toLowerCase(
-
Jquery提交表单 Form.js官方插件介绍
先说说常用的Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2.Form插件下载 form.js 3.Form插件的简单入门 第一步:先增加一个表单 代码: 复制代码 代码如下: <form id="myForm" action="comment.php" method="post"> Name: <inpu
-
表单Form的submit事件不响应的解决方法
一.问题描述 类比一下,我用input.select()做了测试,却能响应select事件.这个原因先放一边,我们看看先怎么把眼下的问题解决了. 不响应事件的代码示例: var form = document.getElementById('form1'); form.onsubmit = function() { alert(1); }; form.submit(); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 实际运行,不会有alert出来. 虽然用submit方法来提交表单
随机推荐
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- android中Invalidate和postInvalidate的更新view区别
- JQuery AJAX参数详解补充附示例
- SQLite优化方法
- 电脑端口基础知识
- 远程分析IIS设置
- Spring MVC 文件上传的示例代码
- iOS实现代码只执行一次
- js实现鼠标悬浮给图片加边框的方法
- Nginx下配置pathinfo及ThinkPHP的URL Rewrite模式支持
- 快速解决eclipse中注释的代码依然会执行的问题
- PHP第三方登录—QQ登录实现方法
- Java使用设计模式中的工厂方法模式实例解析
- package.json文件配置详解
- MyBatis拦截器实现分页功能的实现方法
- 浅谈jQuery构造函数分析
- js 键盘记录实现(兼容FireFox和IE)
- node.js中的fs.rename方法使用说明
- Java设计模式之建造者模式实例详解
- C++设计模式之装饰模式