[TOC] > 1. 一个完整的表单是由`<form></form>`标签和form包含的多个表单控件组成的 > 2. label表签为表单控件起到标记的作用，给用户良好的体验 ## 1. label与表单元素关联 有两种方法建立联系，联系的主要体现是点击两者有一样的效果 ### 1.1 显示地建立联系 label标签同for属性=表单元素id建立联系 ~~~ <label for="image-input" class="btn btn-danger btn-sm" >更换头像</label> <input type="file" id="image-input" style="display: none;" onchange="changImg(event)" > ~~~ ### 1.2 隐式建立联系 通过label包裹表单元素标签 ~~~ <label>更换头像11<input type="file"></label> ~~~ ## 2. label与表单元素关联的作用 1. 点击label和点击输入框（input）一样，都可以使光标聚焦在输入框，不绑定则不能 2. 点击label和点击按钮（button）一样，可以出发按钮的事件 ~~~ <input type="text" id="userName" placeholder="请输入用户名"> <br> <label for="image-input" >更换头像</label> <input type="file" id="image-input" onchange="changImg(event)"> <script type="application/javascript"> function changImg() { alert("选择图片！") } </script> ~~~ 点击“更换头像”和点击“预览”是一样的效果，我们可以将input框隐藏，改改label的样式  ~~~ <label for="image-input" class="btn btn-danger btn-sm" >更换头像</label> <input type="file" id="image-input" style="display: none;" onchange="changImg(event)" > ~~~ 只留一个可控好看的按钮即可  ## 3. 常用的表单元素 ~~~ 1. <form> 表示了文档中的一个区域，表单的框架 2. <input>输入文本框，根据其特性，也可能是按钮型显示 3. <button>按钮 4. <lable>为input标签定义一个属性定义一个标记 5. <option>：定义下拉悬着 6. <select>：下拉框悬着性的东西 7. ` <textarea>` ：文本区，文字是可以换行的，相对input可以展示的东西更多 ~~~