HTML小知识点总结

一、label和input

在单独的input框中，用户想要输入内容时只能点击输入框才可以使输入框获取焦点。

<inputid="account"name="account"/>

如果在input的周围加一个label，那么点击label显示的文字时，焦点也会自动集中在输入框中。具体的使用方法是label的for=“输入框的id”

<labelfor="account">账号</label><inputid="account"name="account"/>

label和input两种绑定方式：

1、label包裹input,这个时候点击文字可以选中当前项。

此时如果给label绑定点击事件，点击label的时候会触发两次，这是因为label与其绑定元素的关系，当点击label时，浏览器会自动给被绑定元素也执行点击事件的行为，解决方法是用e.preventDefault()阻止默认行为。

//<label for="">  注意此处label里不能写for,不然就必须给input加id，按照第二种方式绑定关系，

//否则点击文字不能默认选中当前选项

<label>

   <input type="checkbox"  id="agree1">

   选项1

</label>

2、label和input写在同一层级，此时想要实现点击文字选中当前选项的功能，必须给label的for属性和input的id绑定相同值

<input type="checkbox"  id="option1"> <label for="option1">选项一</label>