saber 酱的抱枕

Fly me to the moon

01/17
2020
学习

HTML 表单小细节

1. 如果把单选、复选按钮隐藏,但又要让它能被 tab 到,则不能使用常规的 display: none; 或者 visibility: hidden; 隐藏,这会导致它不能被 tab 到。应该设置宽高为 0,透明度为 0。

2. 单选按钮可以用空格键选中,但再按空格不能取消选中。

那么当它选中之后,再按空格,会发生什么?表面上看什么都没发生,但实际上浏览器会把这个按钮的 checked 先变成 fasle,然后再变成 true。也就是按空格时,浏览器总会把它从未选中变成选中,走一次流程。

不过这个知识点实在有些冷……也很少能用到。

3. label 标签不要包裹 input 标签

给 label 标签指定一个 for 属性,然后给 input 加上对应的 id,这样点击这个 label 里的文字,就会激活对应的 input 元素。

<label for="txt">姓名:</label> <input type="text" id="txt" />

正常来说就是上面这样,label 标签和 input 标签分开。但有时候为了省事(不写 for、id),或者为了实现 css 样式效果更方便,就用 label 标签包裹了 input 标签。

<label>姓名: <input type="text" /></label>

这样做浏览器是许可的,然而这会带来一些潜在问题,例如点击 label 可能会触发两次“点击 input 事件”,又或者 css 效果会出现异常。

假设表单里一行有多个行内元素,我设置了垂直居中对齐:

    p *{
      vertical-align: middle;
    }

观察上面两个图片,会发现第一个图片的复选框和文字并没有对齐,复选框靠下了。这就是 label 包裹了 input 导致的。把 input 移出 label,结果正常(第二张图片)。

HTML 表单小细节