前端二向箔05-HTML表格表单和ARIA

05 HTML表格表单和ARIA

本篇博客大致回忆下表单表格的特点, 用法和注意事项. 还有重点复盘下ARIA系统的概念.

为什么不建议用要表格?

感兴趣可以先上StackOverflow查看这个当时table正火的帖子:

Why not use tables for layout in HTML? [closed]

你要是看了高赞的分析, 估计对table的弊端有大致的了解了. 个人认为web的发展并没有改变多少table的本质.

html的 table 元素表示表格数据 — 即通过二维数据表表示的信息 --MDN

table本意就是拿来渲染表格数据的, 按道理来说没什么问题, 各司其职. 但是主要涉及三个问题:

• SEO和语义化问题, 事实上, table 并没有很好地语义化, 想象下, 大量的table 数据内容混杂, 用户搜索自然也不会集中到数据本身, 搜索权重自然就小. 而且本身的阅读性不是很好, 设计太过朴素难以突出重点, 特别是现在花里胡哨的网站中.
• 可访问性(Accessibility)差, 特别在屏幕阅读和视障人群地使用中, 遇上大量数据很难阅读和被正确地识别. 基本措施是<caption>\ <summary>进行表格数据描述, 或是设置scope属性等.
• 浏览器渲染性能问题, table 的性能一直被人们诟病. 特别是在渲染方面, 需要表格加载完毕才开始渲染布局, 会有明显的割裂感和延迟. 主要和浏览器的渲染算法有关, 特别应对大量数据时, 缓存也是个问题.

HTML设计思想是内容样式分离的, 使用CSS样式表来管理样式. 而这个table 却是兼具两者, 所以在浏览器行为方式不同也可以理解, 而且CSS更容易缓存. 目前table 的大量全局属性被抛弃^MDN🔗 , 建议使用CSS管理样式, 也说明了W3C正在分解table .

不论怎样, 目前都是不建议使用table 进行布局的, 要我说直观点就是排版麻烦不好看, 还有各种小毛病XD.

基本用法可以参考阮一峰 表格标签🔗.

表单

表单可以说是学习web中第一个碰到交互最多的组件.

name 和id 的疑惑, 刚开始学习HTML的时候, 觉得name 和id 在大多数情况下的用途是一样的, 为什么不合并呢? 而在学习了form 之后, 才了解这样设计的部分原因.

• label标签对应一个input, 关联的是input的id属性, 而非name属性, 此外除了常用的并列排布, 还可以包裹, 这是可以省略for和id属性:

  <label>用户名：
    <input type="text" name="user">
  </label>
  

• name 属性是关系到服务器的字段信息获取, 需要通过name来获取属性.
  此外表单的单选操作中会设置同个name .