网页表单的Web标准解决方案

2016-02-19 20:34 11 1 收藏

有了下面这个网页表单的Web标准解决方案教程,不懂网页表单的Web标准解决方案的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - Web开发 】

进入eYou.com后,马上就给新版的邮件界面转化成XHTML+CSS的工作,还好平时基本功还够扎实,有条不紊的干了下来。当然会遇到新的问题,比如,平时做网页,因为没有跟程序打过什么交道,较少使用表单。还好,世界还有Google,让我可以轻松应对新挑战。一些经验,写出来大家分享。

基于易用性(accesibility)的考虑,表单的标准写法应该在form和/form之中包含fieldset和legend(说明),让用户明白该表单域的内容概要。简单的结构如下:

form
fieldset
legend/legend
......
/fieldset
/form

在某些场合或许你不愿意让也许fieldset和legend影响你的设计方案中的美观,好办,在CSS中把fieldset的border设置为0,legend的display设置为 none就行了。

在绝大多数情况下,表单的布局分两列,左边是标记(label),右边是输入框(input type="text"...)。如此简单的两列布局,我强烈建议不要使用表格。参考http://stylephreak.frogrun.comhttp://img.warting.com/source/cssform.php和http://www.aplus.co.yu/css/forms/?css=1(绝对有价值的两个参考,你已经可以不必往下看了),我们发现,Web标准通用的解决方法是,为label和input type="text"...的外围加上一个div,并把把该div的display设置为block。把label设为float: left;(这也是要把div设置为display: block;的原因)之后就可以让标记跟输入框同一行上了。让label 对齐的一个小窍门是,固定label的宽度,然后根据需要使用text-align向左或者向右对齐。设定宽度的小窍门是,使用单位em根据标记的最大字数来定宽度,不必辛苦测试px。

为了使我的阐述更容易理解,我简单写些代码:

XHTML:(部分)

form
 fieldset
 legend表单实例/lengend
  divlabel for="name"姓名:/labelinput type="text" id="name" //div
  divlabel for="etc"其他等等:/labelinput type="text" id="etc" //div
  div class="submit"input type="submit" value="提交" //div
 /fieldset
/form

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

CSS:(部分)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  body {/*跟表单无关,设置页面的显示效果*/
   width: 400px;
   margin: 20px auto;
   font: 14px/1.5 Serif;
   }
  fieldset {
   border: none;
   border-top: 1px solid #ccc;
   }
  legend {
   padding: 2px;
   border: 1px solid #ddd;
   background: #ececed;
   }
  div {
   display: block;
   padding: 5px 0;
   }
  label {
   float: left;
   width: 6em;
   text-align: right;
   }
  .submit {
   margin-left: 6em;
   }
  .submit input {
   padding: 2px;
   border: 1px solid #ccc;
   background: #ececec;
   }

来源:http://www.tulaoshi.com/n/20160219/1624022.html

延伸阅读
标签: Web开发
首先建立语言档,在项目中加入.resx文件 例如: message.zh-cn.resx '简体中文 message.zh-tw.resx '繁体中文 message.en '英文 .............. ========================================= 然后利用Name --Value 键值对 填入你要在页面上显示的语言 如: name value message.zh-cn.resx中: res_loginbname 登陆名 : message.zh-tw.resx中: ...
标签: Web开发
我是从去年初开始学习web标准的,两年下来也有些心得。最近跳槽了正好闲在家里,写一些出来和大家交流一下。 1 对于web标准和W3C XHTML规范的理解 按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论“^_^)。但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性。web标准...
标签: Web开发
一、使用iframe,通过document.write产生历史 代码如下: !DOCTYPE html html head meta charset="utf-8"/ title0/title /head body input type="button" value="加1" onclick="add()" / div id="info" style="border:red 1px solid;width:200px;padding:10px;margin:5px;"0/div /body /html script src="history-0.1.js"/script ...
随着中小企业在我国的蓬勃发展,越来越多的网络服务器会逐步进入千千万万的中小企业,与此同时,很多大的企业、机构随着业务的扩充分支机构也不断增加,这些用户需要购置网络服务器来满足业务发展的需要。但是这些用户受企业状况、资金预算的限制往往无法购置价格昂贵的基于SCSI接口的网络服务器,他们通常会选择性能较差、无冗余支持的ID...

经验教程

952

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部