AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

重构之美－走在Web标准化设计的路上[复杂表单]3 9 Update

2017-10-18 1345
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

最近突然遭遇许多复杂表单，于是干上了。

一直有种说法：table用于数据表，对于复杂表单，table也是最好的选择，由于一直没有遇见过也就没有认真去研究，到底复杂表单是否应该使用table。

好了，机会来了，我拿着复杂表单的图样，看来看去都觉得不应该用table呀，除非是有行标和列标的数据表表单。反而类似于登陆这种简单表单，我倒是一直使用table，理由是能够在纯文档的时候对齐文本与输入框，但是对于复杂表单就不一样了，复杂表单涉及到页面布局了。

为什么要研究？因为我希望程序员不要涉及到界面的任何部分，对于页面，他只需要关注结构，而复杂表单如果采用table，很容易就将程序员带进对布局的操作中去。

好，经过一阵艰苦奋斗，还算好，xhtml部分自己觉得还算摸清了一些规律，页面的分析信手捻来，div结构下的复杂表单真是漂亮，但是但是……css部分……我靠，真是难搞，干了几个复杂表单的css都没摸清规律，太JB麻烦了，尤其是文本长度不一致，表单控件又各种各样交错，还有错误提示隐藏的文本，时不时中间又加个按钮……迷茫了……算了，继续干css，希望最后能得出结论，对于复杂表单到底用table还是div?

先给一个对于登陆界面这样简单的表单，我最常用的xhtml代码，使用table，理由见上：

< div >
     < h3 >< span > 用户登陆 </ span ></ h3 >
     < table >
         < tr >
             < td >< label  for ="name" > 用户名 </ label ></ td >
             < td >< input  id ="name"   />
         </ tr >
         < tr >
             < td >< label  for ="pw" > 密码 </ label ></ td >
             < td >< input  id ="pw"   /></td>
         </ tr >
     </ table >
     < p >< button  /></ p >
</ div >

另外不使用table的如下：

< div >
     < h3 >< span > 用户登陆 </ span ></ h3 >
     < div >
        < label  for ="name" > 用户名 </ label >
        < input  id ="name"   />
     </ div >
     < div >
         < label  for ="pw" > 密码 </ label >
         < input  id ="pw"   />
     </ div >
     < p >< button  /></ p >
</ div >

怎么说呢？第一种我视这样的简单表单为2行2列数据，用了table。第二种则是div模块化操作。一般我都使用第一种，除非文本长度一样（比如姓名，密码）才用第二种。当然我觉得第二种是正确的，所以我会优先在文案上先做文章使之长度一致。为什么？因为只有模块化，才能固定xhtml而通过css随意布局，比如形式上为一行四列之时，第一种就做不到（其实FF可以正确解释对tr的浮动操作，例如2列tr，但是ie不支持，一个tr怎么都得占table的一行。）。

好了，复杂表单的图样和xhtml部分在公司，明天上班发上，现在睡觉问梦去。

这份表单够份量不？

这里是xhtml部分，做了些必要的删除，没破坏结构就好了。留意我补充的部分，比如h2、h3。

< h1 > 大便蛔虫的表单标题 </ h1 >
< div >
     < h2 > 导航 </ h2 >
     < div >
         < button > 新增 </ button >
         < button > 刷新 </ button >
     </ div >
     < div >
         < h3 > 当前批次采用的标准为 </ h3 >
         < div >
             < label > 本人补贴 </ label >
             < asp:label  id =""  Runat ="server" ></ asp:label >
         </ div >
         < div >
             < label > 本人工龄补贴 </ label >
             < asp:label  id =""  Runat ="server" ></ asp:label >
         </ div >
         < div >
             < label > 配偶补贴 </ label >
             < asp:label  id =""  Runat ="server" ></ asp:label >
         </ div >
         < div >
             < label > 配偶工龄补贴 </ label >
             < asp:label  id =""  Runat ="server" ></ asp:label >
         </ div >
         < div >
             < label > 特殊补贴 </ label >
             < asp:label  id =""  Runat ="server" ></ asp:label >
         </ div >
     </ div >
     < iewc:treeview  id =""  ExpandLevel ="1"  runat ="server"  AutoPostBack ="True" ></ iewc:treeview >
</ div >
< div >
     < h2 > 表单内容 </ h2 >
     < div >
         < h3 > 申请人信息 </ h3 >
         < div >
             < label > 本人姓名 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 身份证号码 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 本人工龄（年） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
             < asp:regularexpressionvalidator  id ="REVY"  runat ="server"  Display ="Dynamic"  ValidationExpression ="\d{0,2}"  ErrorMessage ="必须输入整数"
        ControlToValidate ="txt_WorkAge" ></ asp:regularexpressionvalidator >
         </ div >
         < div >
             < label > 工作单位 </ label >
             < asp:label  id =""  Runat ="server" ></ asp:label >
         </ div >
         < div >
             < label > 职务或职称 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
     </ div >
     < div  class ="personinfo" >
         < h3 > 现住房信息 </ h3 >
         < div >
             < label > 现住房地址 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 建筑面积（平方米） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 其中个人按市场价自购面积（平方米） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 现住房性质 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 补贴住房面积标准（平方米） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 申请住房补贴理由 </ label >
             < asp:dropdownlist  id =""  Runat ="server" ></ asp:dropdownlist >
         </ div >
         < div >
             < label > 申请住房补贴标准 </ label >
             < asp:radiobuttonlist  id =""  runat ="server"  RepeatDirection ="Horizontal" >
                 < asp:ListItem > 无房户一次性补贴 </ asp:ListItem >
                 < asp:ListItem > 一次性补面积差 </ asp:ListItem >
             </ asp:radiobuttonlist >
         </ div >
     </ div >
     < div >
         < h3 > 配偶信息 </ h3 >
         < div >
             < label > 配偶姓名 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 配偶身份证号码 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 配偶工龄 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox > 年
             < asp:regularexpressionvalidator  id =""  runat ="server"  Display ="Dynamic"  ValidationExpression ="\d{0,2}"  ErrorMessage ="必须输入整数"
            ControlToValidate ="" ></ asp:regularexpressionvalidator >
         </ div >
         < div >
             < label > 配偶工作单位 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 职务或职称： </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
     </ div >
     < div >
         < h3 > 享受住房分配或货币补贴情况 </ h3 >
         < div >
             < label > （１）已享受房改购房面积（平方米） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > （２）已享受购房补贴（元） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > （３）已享受住房补贴（元） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < asp:button  id =""  Text ="计算"  Runat ="server" ></ asp:button >
             < label > 本次补贴面积（平方米） </ label >
             < cc1:acceptnumber  id =""  runat ="server" ></ cc1:acceptnumber >
         </ div >
     </ div >
     < div >
         < h3 > 住房补贴 </ h3 >
         < div >
             < label > 本人补贴（元） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 本人工龄补贴（元） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 配偶补贴（元） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 配偶工龄补贴（元） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 特殊补贴（元） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 合计（元） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 实际发放补贴（元） </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
     </ div >
     < div >
         < h3 > 请申请人根据不同情况填写 </ h3 >
         < div >
             < label > 现购房地址 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 售房单位 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 偿还贷款帐号 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
         < div >
             < label > 贷款银行 </ label >
             < cc1:xmldropdownlist  id =""  runat ="server"  XmlNodeName =""  XmlPath ="" ></ cc1:xmldropdownlist >
         </ div >
         < div >
             < label > 本人公积金存储号 </ label >
             < asp:textbox  id =""  Runat ="server" ></ asp:textbox >
         </ div >
     </ div >
     < div >
         < asp:button  id =""  Text ="保存"  runat ="server"  CssClass ="button" ></ asp:button >
         < asp:Button  id =""  Text ="退回"  runat ="server"  CssClass ="button" ></ asp:Button >
         < asp:Button  id =""  Text ="删除"  runat ="server"  CssClass ="button" ></ asp:Button >
         < button  id =""  onclick ="javascript:window.close();" > 关闭 </ button >
     </ div >
</ div >

再补充一个，这里有两个部分很明显的表格结构，所以在那里使用了table，而其他部分没有用。

table部分xhtml。css部分还没琢磨出来规律，结论没有，继续琢磨，不过感觉没有用table结构很漂亮也很灵活，但是css确实让人头大，权衡得失中，再补充了。

..
             < div  class ="personinfo" >
                 < h2 >< span > 个人信息 </ span ></ h2 >
                 < div >
                     < h3 >< span > 购房人 </ span ></ h3 >
                     < table >
                         < tr >
                             < td >< span > 选择 </ span ></ td >
                             < td > 姓名 </ td >
                             < td > 性别 </ td >
                             < td > 年龄 </ td >
                             < td > 关系 </ td >
                             < td > 户籍所在地 </ td >
                         </ tr >
                         < tr >
                             < td >< input  type ="checkbox"   /></ td >
                             < td >< select  /></ td >
                             < td >< input  /></ td >
                             < td >< input  /></ td >
                             < td >< select  /></ td >
                             < td >< input  /></ td >
                         </ tr >
                     </ table >
                 </ div >             
                 < div >
                     < h3 >< span > 家庭成员 </ span ></ h3 >
                     < table >
                         < tr >
                             < td >< span > 选择 </ span ></ td >
                             < td > 姓名 </ td >
                             < td > 性别 </ td >
                             < td > 年龄 </ td >
                             < td > 关系 </ td >
                             < td > 户籍所在地 </ td >
                             < td > 工作单位 </ td >
                             < td > 编辑 </ td >
                             < td > 删除 </ td >
                         </ tr >
                         < tr >
                             < td >< input  type ="checkbox"   /></ td >
                             < td >< select  /></ td >
                             < td >< input  /></ td >
                             < td >< input  /></ td >
                             < td >< input  /></ td >
                             < td >< input  /></ td >
                             < td >< input  /></ td

本文转自爆牙齿博客园博客，原文链接：http://yuntian.cnblogs.com/archive/2006/02/23/335863.html ，如需转载请自行联系原作者
文章标签：
.NET
前端开发
Web App开发
数据安全/隐私保护
关键词：
web标准化
web表单
web重构
web update
web设计
吞吞吐吐的
目录
相关文章
vohelon
|
XML JSON 安全
Web服务是通过标准化的通信协议和数据格式
【10月更文挑战第18天】Web服务是通过标准化的通信协议和数据格式
vohelon
373 69
小徐在进步
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法，包括下拉菜单（`&lt;select&gt;` 和 `&lt;option&gt;`）、文本域（`&lt;textarea&gt;`）、标签解释（`&lt;label&gt;`）、各类按钮（`&lt;button&gt;`）及表单重置功能、无语义布局标签（`&lt;div&gt;` 和 `&lt;span&gt;`）以及字符实体的应用。此外，还提供了一个完整的注册信息表单案例，涵盖个人信息、教育经历和工作经历等部分，展示了如何综合运用上述元素构建实用的表单。
小徐在进步
311 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
小徐在进步
|
前端开发 数据安全/隐私保护
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`&lt;input&gt;`标签的基本使用方法及其应用场景，如登录、注册页面和搜索区域。通过设置`type`属性，可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外，还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态，并提供了示例代码与效果展示。
小徐在进步
577 7
土木林森
|
安全 前端开发 PHP
构建与验证表单：传统PHP与Laravel框架的比较分析——探索Web开发中表单处理的优化策略和最佳实践
【8月更文挑战第31天】在 Web 开发中，表单构建与数据验证至关重要。传统 PHP 方法需手动处理 HTML 表单和数据验证，而 Laravel 框架则提供了一种更现代、高效的解决方案。本文通过对比传统 PHP 和 Laravel 的方法，探讨表单构建与验证的最佳实践。Laravel 通过简洁的语法糖、内置的数据过滤和验证机制，显著提升了代码的安全性和可维护性，适用于大型项目或需要快速开发的场景。然而，在追求灵活性的小型项目中，直接使用 PHP 仍是不错的选择。了解两者的优劣，有助于开发者根据项目需求做出最佳决策。
土木林森
166 0
土木林森
|
前端开发 开发者 安全
JSF表单处理大揭秘：数据绑定与事件处理，如何让Web应用更加智能？
【8月更文挑战第31天】在现代Web应用开发中，JSF（JavaServer Faces）框架因强大的表单处理能力而广泛应用。其数据绑定机制可实现表单控件与后端模型的双向传输，降低前后端耦合度，提高代码维护性和类型安全性。事件处理机制则支持丰富的内置与自定义事件，进一步增强应用灵活性。本文通过示例代码展示这些特性，帮助开发者更好地利用JSF构建高效、灵活的Web应用。然而，JSF也存在组件库较小和学习成本较高等局限，需根据具体需求权衡使用。
土木林森
156 0
土木林森
|
开发者 Java Spring
JSF 牵手社交登录，如魔法风暴席卷 Web 世界，开启震撼便捷登录之旅！
【8月更文挑战第31天】在互联网时代，便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点，在各类Web应用中广泛应用。JavaServer Faces（JSF），作为一款流行的Java Web框架，能够轻松集成社交登录功能，显著提升用户体验。本文详细介绍社交登录的优势，并提供两种JSF集成社交登录的常见方法：一是利用Spring Social等第三方库简化开发；二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
土木林森
189 0
土木林森
|
安全 Java 云计算
JSF 应用究竟何去何从？云端部署能否成为其全新突破点？快来一探究竟！
【8月更文挑战第31天】本文介绍了将JavaServer Faces（JSF）应用部署到云平台的过程。首先，根据成本、功能、可靠性和安全性选择合适的云平台。接着，展示了构建简单JSF应用的示例代码。最后，以AWS Elastic Beanstalk为例，详细说明了部署流程。部署至云端可提升应用的可用性、扩展性和安全性。
土木林森
172 0
土木林森
|
开发者 数据管理 Java
表单革命：Vaadin Forms如何重塑你的Web表单体验，打造用户互动新纪元
【8月更文挑战第31天】在现代Web开发中，表单是用户与应用交互的关键。Vaadin框架提供了强大的表单处理工具，简化了高效且用户友好表单的创建。本文深入探讨Vaadin Forms的工作原理，包括数据绑定、验证和事件处理等功能，并通过详细代码示例，帮助开发者掌握其使用方法，从而构建出满足各种需求的表单。
土木林森
168 0
土木林森
|
数据采集 前端开发 开发者
Angular表单控件详解：掌握模板驱动与响应式表单的精髓，让Web应用中的数据采集工作变得高效又简单，彻底告别繁琐的表单处理流程
【8月更文挑战第31天】表单是 Web 应用的关键组件，用于用户登录、注册及信息提交。Angular 作为成熟前端框架，提供了强大的表单处理功能，包括模板驱动与响应式表单。本文通过技术博客形式，详细介绍这两种表单控件，并提供示例代码，展示如何利用它们简化表单处理流程，提高开发效率。首先介绍简单的模板驱动表单，然后讲解基于 RxJS 的响应式表单，适用于复杂逻辑。通过本文，你将学会如何高效地使用 Angular 表单控件，提升应用的用户体验。
土木林森
217 0
郑小健
|
移动开发 前端开发 JavaScript
Web表单(Form)开发实战指南
【7月更文挑战第8天】表单（Form）是Web应用程序中不可或缺的组成部分，用于收集用户输入的数据。本指南将详细介绍HTML表单的基本结构、数据提交方式、表单验证以及如何使用JavaScript和CSS增强表单的交互性和美观性。
郑小健
548 0

热门文章

最新文章

  • 1
    通过Web安全工具Burp suite找出网站中的XSS漏洞实战(二)
  • 2
    重构之美－走在Web标准化设计的路上[复杂表单：Reloaded]
  • 3
    FastAPI 学习之路（一）fastapi--高性能web开发框架
  • 4
    asp.net web.config配置节说明
  • 5
    playwright录制脚本-web自动化测试
  • 6
    RDIFramework.NET ━ 9.10 岗位（职位）管理 ━ Web部分
  • 7
    好程序员web前端培训React中事件的写法总结
  • 8
    技术 | Web前端开发（4）持续更新
  • 9
    08. Web大前端时代之：HTML5+CSS3入门系列~H5 Web存储
  • 10
    运用C#创建一个.Net下的Web Service
  • 1
    基于springboot+vue.js的基于Web教师个人成果管理系统附带文章和源代码设计说明文档ppt
    204
  • 2
    Web LLM 实验：间接注入
    228
  • 3
    Web LLM 实验：利用 LLM 中不安全的输出处理
    328
  • 4
    基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序
    212
  • 5
    Web LLM 实验：利用 LLM API 实现命令注入
    462
  • 6
    Web LLM 实验：利用 LLM API 实现 SQL 注入
    407
  • 7
    构建高效Python Web应用：异步编程与Tornado框架
    242
  • 8
    BUUCTF：Web 解析（一）
    530
  • 9
    阿里云web应用
    190
  • 10
    使用Elixir进行可扩展的Web服务开发
    338

    • 相关课程

    更多
  • Python Web开发基础
  • Java Web开发系列课程 - Spring框架入门
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来
    • 下一篇
    【DataEase】零代码数据可视化分析工具的安装部署保姆级教程