IT技术江湖   操作系统   安全技术   平面设计   Web开发   数据库   互联网   搜索引擎   网络广告   
引擎技术江湖  BLOG  合作联系
本站
Google
IT技术江湖
首页>Web开发>网站设计> 网页表单的Web标准解决方案
  • IT技术江湖
  • 网页表单的Web标准解决方案
    http://www.hack1st.com 来源: 2008-03-22 阅读: 评论

     进入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.com/uploads/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>
     <div><label for="name">姓名:</label><input type="text" id="name" /></div>
     <div><label for="etc">其他等等:</label><input type="text" id="etc" /></div>
     <div class="submit"><input type="submit" value="提交" /></div>
    </fieldset>
    </form>

      CSS:(部分)

     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;
      }

    上一篇:全世界的专家给网站开发人员的一些建议  
    下一篇:复杂网站重新设计的简单方法

    ·网友互动--用户名: (新注册) 密码: 匿名评论 [所有评论]
    评论内容:(用户发表意见仅代表其个人意见,评论内容与本站立场无关,请自觉遵守互联网相关政策法规)
    关注此文读者还看过
    • ·如何制作一个网站?做网站必备六步
      ·策划设计制作网站应该注意的九大原则
      ·网页设计之视觉信息传达分析
      ·复杂网站重新设计的简单方法
      ·网页表单的Web标准解决方案
      ·全世界的专家给网站开发人员的一些建议
      ·详细讲解网站制作中关于链接的制作方法
      ·对于网页制作中的乱码问题的解决
      ·怎么系统的学习Web标准?
      ·Vista般漂亮!Live Spaces中文首页更新
    最新更新
    • ·如何制作一个网站?做网站必备六步
      ·策划设计制作网站应该注意的九大原则
      ·网页设计之视觉信息传达分析
      ·复杂网站重新设计的简单方法
      ·网页表单的Web标准解决方案
      ·全世界的专家给网站开发人员的一些建议
      ·详细讲解网站制作中关于链接的制作方法
      ·对于网页制作中的乱码问题的解决
      ·怎么系统的学习Web标准?
      ·Vista般漂亮!Live Spaces中文首页更新
    文章关注度排行
    ·网页设计之视觉信息传达分析
    ·详细讲解网站制作中关于链接的制作方法
    ·对于网页制作中的乱码问题的解决
    ·网页表单的Web标准解决方案
    ·网站站长:网站改版应注意的事项
    ·新鲜视觉体验——另类网站版式设计欣赏
    ·互动网站设计需知
    ·复杂网站重新设计的简单方法
    热点推荐
    网站站长:网站改版应注意的事项
    网站站长:网站改版应注
    新鲜视觉体验——另类网站版式设计欣赏
    新鲜视觉体验——另类网
    企业网站英文版制作几个关键注意事项
    企业网站英文版制作几个
    网页也需要呼吸 设计中的留白讨论
    网页也需要呼吸 设计中
    八种不能建设的个人网站
    八种不能建设的个人网站
    GOOGLE官方对网站设计方案的一些建议
    GOOGLE官方对网站设计方
    频道推荐
    • ·网站站长:网站改版应注意的事项
    • ·新鲜视觉体验——另类网站版式设计欣赏
    • ·互动网站设计需知
    • ·企业网站英文版制作几个关键注意事项
    • ·网页也需要呼吸 设计中的留白讨论
    • ·八种不能建设的个人网站
    • ·GOOGLE官方对网站设计方案的一些建议
    • ·界面设计表达需要注意尺度
    • ·谈谈做网站的经验
    • ·一名网站设计师的自我修养
    本站精华
    网站站长:网站改版应注意的事项
    网站站长:网
    一名网站设计师的自我修养
    一名网站设计
    网页也需要呼吸 设计中的留白讨论
    网页也需要呼
    • ·新鲜视觉体验——另类网站版式
    • ·企业网站英文版制作几个关键注
    • ·Web的内容、结构与表现漫谈
    • ·八种不能建设的个人网站
    • ·GOOGLE官方对网站设计方案的一
    • ·网页也需要呼吸 设计中的留白
    • | 网站导航 | 联系QQ | 编辑邮箱 | RSS订阅 | 友情链接 | 官方blog
    • 版权所有:IT技术江湖 @2007-2008
    • powered by www.hack1st.com online services. all rights reserved.京ICP备07005766号