快速业务通道

关于网页表单实现和网页布局如何运用表单

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-01

引言

HTML表单一文中介绍了关于表单的创建和样式化的基础内容。本文提供了关于表单元素和样式的更多详细内容,以及在真实的web应用程序设计中表单是如何运用的。

本文中引入的概念

这一部分提供了关于表单实现和界面布局的新信息。

规则和标记超载

大量使用class和id标记是违反KISS(保持简洁)准则的(在CSS盒模型与基础布局一文中已经解释过了)。然而,难度大的布局却经常会在级联上遇到很多冲突——这些冲突最简单的解决方法就是在元素中添加标记,以及编写包含若干选择符的样式表规则。

难度最大的布局中到处都是边缘情况,对这些边缘情况最好的处理办法就是给元素赋一个id,来定义一个狭义而唯一的环境。

新表单域元素

通常一个实际的表单所需要的不仅仅是按钮和文本输入区域,因为我们常常会需要按照选项来构建用户响应。HTML为有这种要求的设计人员提供了若干选项。

表单设计原则

对于网站来说,表单常常是用户交互和数据搜集的焦点所在。因此,表单对于一个网站的成功与否是非常关键的,这就要求我们对表单的设计给予高度的关注。

三分法则

最容易吸引网站用户的注意力的是浏览器画布(以及穿过布局的线条)上的四个特定点。本文将向你介绍这种现象,并提供一些建议,告诉你如何通过CSS来最大程度地利用这种现象。

Grids栅格

前面的文章中我们介绍了如何确保排版的一致性以及最大化地利用空白。本文中我们会更进一步地阐述如何利用em单位来实现一定程度的布局一致性,这种一致性只有通过CSS才能实现。

平台支持等级

商业项目中常见的一种要求是,一个被认可的网站设计应当在一种或多种浏览器上渲染效果一致。本文将会对这种要求的原因,效果,以及用于满足这种要求的处理方法进行简要的探讨。

一张简单的联系表单

通过联系表单,网站访客可以直接将e-mail发送到站内信箱中,联系表单的使用是非常普遍的,这是因为:只要用户具有激活的e-mail地址,他就可以使用联系表单,而且联系表单可以很方便地结合到专门的邮件文件夹中。

在前面的表单一文中,所涉及到的标记就是用来创建这样的表单的,我们还对这个表单进行了一些修饰:

标记

<form id="contactForm" method="post" action="/cgi-bin/service_email_script.php">
  <ul>
    <li id="nameField" class="required"><label for="realname">Name:</label><input type="text

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号