表单布局的一个例子 DIV+CSS

css

这是昨天作的一个布局时的测试!感觉表单布局是很麻烦的事,想用最少的代码去解决问题是比较难!

这是一个例了,不知道有没有更好的解决办法,贴上来,随便看吧!

 程序代码body{font-size:12px; line-height:1.9; text-align:center;}
#info{border:1px solid #006699; background:#F9EBBB; text-align:left; margin:10px auto; width:300px; padding:10px 10px 10px 110px;}
#info label{ width:100px;display: block; float:left; text-align:right; margin-left:-100px!important; margin-left:-50px;}
#info input{ border:1px solid #666699;height:19px;}
#info h1{font-size:12px; margin:0px;}
#info em{color:#FF0000; padding:0 5px;}
#info div{color:#FF0000; border:1px solid #FF0000; padding:0 5px; background:#FCF9E2; margin:2px 0;width:140px;}
.bx{ margin:3px;}

 程序代码<div id="info">

  <h1>表单布局的一个测试</h1>
  <label>您的名字:</label>
  <input name="" type="text" />
  <em>*</em>这是必需要填写的!<br />
  
  <label></label>
  <div>用户名不合法!</div>
  
  <label>电子邮件:</label>
  <input name="" type="text" />
  <em>*</em>这是必需要填写的!<br />
  
  <label></label>
  <div>电子邮件错误!</div>
  
  <label>地址:</label>
  <input name="" type="text" />
  <em>*</em>这是必需要填写的!<br />
  
  <label>网址:</label>
  <input name="" type="text" />
  <em>*</em>这是必需要填写的!<br />
  
  <input type="button" class="bx"  value="提交" />
  
</div>

 HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>表单例子</title><style>/*zishu.cn*/body{font-size:12px; line-height:1.9; text-align:center;}#info{border:1px solid #006699; background:#F9EBBB; text-align:left;margin:10px auto; width:300px; padding:10px 10px 10px 110px;}#info label{ width:100px;display: block; float:left; text-align:right;margin-left:-100px!important; margin-left:-50px;}#info input{ border:1px solid #666699;height:19px;}#info h1{font-size:12px; margin:0px;}#info em{color:#FF0000; padding:0 5px;}#info div{color:#FF0000; border:1px solid #FF0000; padding:0 5px;background:#FCF9E2; margin:2px 0;width:140px;}.bx{ margin:3px;}</style></head><body><div id="info"> <h1>表单布局的一个测试</h1><label>您的名字:</label> <input name="" type="text" /><em>*</em>这是必需要填写的!<br /> <label></label><div>用户名不合法!</div> <label>电子邮件:</label><input name="" type="text" /><em>*</em>这是必需要填写的!<br /> <label></label><div>电子邮件错误!</div> <label>地址:</label> <inputname="" type="text" /> <em>*</em>这是必需要填写的!<br /><label>网址:</label> <input name="" type="text" /><em>*</em>这是必需要填写的!<br /> <input type="button"class="bx" value="提交" /> </div></body></html>

时间: 2024-12-08 11:30:12

表单布局的一个例子&nbsp;DIV+CSS的相关文章

jquery validation插件表单验证的一个例子_jquery

messages_cn.js <!--验证国际化,中文--> (不引用messages_cn.js是英文的提示,用了是中文) 复制代码 代码如下: required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a va

div css表单布局的五个小技巧

核心提示:div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入 代码到 <textarea> 中,一切就会变得简单多了,如: <textarea name=textarea wrap=virtual rows=2 cols=22 >Input Englis

BootStrap智能表单实战系列(四)表单布局介绍_javascript技巧

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是根据autoLayout来决定使用的栅格,通过设置autoLayout:'1,2,1,2,2,4' 表示 第一.二列占3格

Bootstrap表单布局_javascript技巧

Bootstrap 提供了下列类型的表单布局: •垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: •内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖排. •水平表单 -> 用栅格系统控制显示 一.垂直表单 垂直表单使用的标准步骤 1.<form> 元素添加 role="form". 2.把标签和控件放在一个带有"form-group"的<div> 中,获取最佳间距. 3.向所有的文

Bootstrap表单布局样式源代码_javascript技巧

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单创建垂直或基本表单:•·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-control 内联表单:内联表单中所有元素都向左对齐,标

Bootstrap三种表单布局的使用方法_javascript技巧

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单  创建垂直或基本表单: •·向父 <form> 元素添加 role="form".  •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的.  •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-control <form role=&q

第七篇Bootstrap表单布局实例代码详解(三种表单布局)_javascript技巧

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

表单设计:以表单布局与填写反馈为例

表单,主要是负责数据采集的功能,需要访问者自己去填写,如访问者的姓名.邮箱.性别.地址.留言建议.设置密码.管理个人账户等等.时下表单无处不在,成功的表单设计不仅能提高用户的满意度,更能收集更加精确的数据,相反失败的表单设计只会收集到错误杂乱的信息,可能会最终导致潜在用户的流失. 一.组织表单的内容,给用户一个友好的引导 首先要明确的告之用户填的是一个什么性质的表单以及填完后能做些什么?哪些问题是一定要问的?有没有别的途径可以获取用户的资料?大致表单的布局分为三种类型:纵向排列.逐步填写(多页显

Bootstrap表单布局样式代码_javascript技巧

废话不多说了,直接给大家贴代码了. <form class="form-horizontal" role="form"> <fieldset> <legend>配置数据源</legend> <div class="form-group"> <label class="col-sm-2 control-label" for="ds_host"&