html input表单笔记

caption在h5中被废除使用css caption

table标签实现表单排版可以放弃很难受

input.radio name需要不一样进行区分

label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。如下图，点击文字和点击前面的单选框效果相同，即加大了控件的可点击区域。

lable显示关联与隐式关联

label标签和特定表单元素关联方式

label标签的关联方式主要有两种，显示关联和隐式关联：

方式1：显式关联

显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name。如：

爱好：
<input type='checkbox' name='basket' id='basketball'>   
<label for="basketball">篮球</label>
<input type='checkbox' name='football' id='football'>   
<label for="football">足球</label>

• 1
• 2
• 3
• 4
• 5

效果图： 

隐式关联

隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。如下：

<label>点击我可以使文本框获得焦点
    <input type='text' name='theinput' id='theinput'>
</label>

• 1
• 2
• 3

效果图如下，点击文字便能是文本框获得焦点：