[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可以展示的東西更多 ~~~