前端第十課–表單
**表單：**網頁註冊登錄頁面、信息調查問卷、搜索引擎的輸出框
**form表單域:**瀏覽器在網頁山專門用來劃分出來一個用來劃分出一個用來存儲表單元素的區域
1.form是塊元素
2.form標籤的action屬性內部是一個鏈接，只想的是提交表單時向哪個服務器地址發送表單數據。
3.form標籤的method屬性內部存儲着該表單向目標服務器傳輸數據時採用的哪種法式,有get和post兩種，post可以保密，get達不到信息會出現在地址欄；
**input元素：**在元素中使用，用來展示用戶可以輸入數據的元素。input標籤最終的表現形式和傳輸至服務器的數據類型，取決於type屬性。
1.input是行內元素；
2.input標籤的type屬性內部是存儲着該input元素輸入信息的類別（如文字，單選，郵箱，電話號碼，多選框等）
3.form標籤的name屬性內部存儲着該input元素的名稱，此處的名稱與class不同。
type的常見種類：
text（文本框）:出現一個橫框，但只能顯示一行；
password(密碼框)；
text,password的附加屬性：
1.maxlength:11;控件可輸入數據的最大長度；
2.佔位符：placeholder=“請輸入密碼”；作用是在用戶端文輸入信息時，在輸入框中顯示提示信息，該信息在用戶點擊輸入任一信息後會自動消失；
3.設置value：自己設置的字符會出現在輸入框中；
radio(單選按鈕)：
1.另外得給每個radio加一個附加屬性name：zs;(名字相同時實現單選)，後加一個checked可默認選中該元素；
2.value:是該選項所對應的數據以另一種字符形式傳給後端；
checkbox(複選按鈕)：
name值不一樣，後端接受的是鍵值對：name===value，value的值是on；
type不常用種類：
**range(數字信息輸入)：**此時input的展示形式爲一個滑塊，滑塊中間有一個暗示按鈕，該按鈕可點擊拖拽，以次改變用戶輸入的數字。
1.最大值max=“10000”；數字上限是10000，大於10000就改寫成10000；
2.最小值min=“0”;數字的下限時0，小於0就改寫成0；
3.步長:step=“10”;它的作用是當用戶左右拖拽中間的指示按鈕，數字每次加減的數字，比如step=“10”,n那麼每次點擊就是±10；
4.默認值：value=“0”;當用戶沒有輸入數字時，指示按鈕默認顯示的數字；
number(數字信息輸入)：
1.input展示的是一個可以上下調整的按鈕，可以用來選擇具體的數字
2.step=“10”;用戶點擊上下調整的按鈕時，數字每次加減的數字，比如step=““10”,那麼每次點擊就是±10；
3.max:選擇的最大值。 4.min:可選擇的最小值。 5.value=“0”;當用戶沒有輸入數字時，input框默認顯示的數字
date(日期)：
此時input的展示形狀爲選項框，點擊選項會彈出一個日期的選擇頁面，可選擇具體的時間，也可以自行輸入；
time(時間)：顯示形狀爲選項框，可以調整時間，也可以自行輸入；
month(月份)：會彈出一個日期的選擇界面，可選擇具體時間也可以自行輸入，不精確到天。
week(周度)：
**dadetime-local:**可選擇具體日期和時間，日期和時間都會保留。
**color:**展示形狀爲按鈕狀，點擊按鈕會彈出顏色值的選擇頁面，可選擇顏色值，不同的操作系統提供的顏色值的選擇界面不同；
**file：**展示形狀是按鈕狀，按鈕右側有提示文字，點擊按鈕後會彈出操作系統的資源管理器，讓用戶選擇目標文件的內容，選擇之後，該文件的名字會替代提示文字；
多文件信息輸入：type=“file” multuple 此時用戶可選擇多個文件，提示文件會提示用戶選中選中多少個文件
**button(普通按鈕)：**可點擊得到按鈕，無默認值，按鈕中的文字有元素標籤內部value屬性中的文字決定。
**submit(提交按鈕)😗*value默認值是提交，提交之後可將信息傳送給服務器。
**label標籤：**擴大用戶選擇中的input元素的區域，
1.將兩者關聯的方式是：for屬性的存儲對應input元素的id名稱；label關聯的input元素可以改變樣式。
2.擴大單選的選中範圍：把與之關聯的input元素後的內容寫在label標籤裏面，可實現範圍的擴大；
**button標籤：**因爲在不同的瀏覽器中可能提不同的按鈕置，所以不常用button標籤，使用html表單中創建按鈕；
**select(下拉選項)：**創造一個下拉選項列表，selet中的name值表示這個下啦選項的名稱；
**option元素：**創造一個下拉選項列表中的具體選項，option中的value值表示用戶 選擇這個選項後，表單向服務器發送的數據，。
**optgroup:**將option元素寫在裏面作爲選項，但自身是不能被選中的；
**textarea（文本域）：**創造一個文本輸入區域。
1.rows屬性表示這個文本輸入區域默認的高，cols屬性表示這個文本輸入區域默認的寬，這裏的寬高值是字符；文本輸入時會自動換行，
2.樣式：寬高可以設置爲像素；去掉文本域的手動擴大，樣式中加入resize:none;
**fieldset:**標籤可以將表單內的相關元素分組，會在相關表單元素周圍繪製邊框。
legend標籤爲fieldset元素定義標題
dset:**標籤可以將表單內的相關元素分組，會在相關表單元素周圍繪製邊框。
legend標籤爲fieldset元素定義標題
[外鏈圖片轉存中…(img-nzwDjZyi-1582272291524)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-e09QOFHZ-1582272291524)(C:\Users\李輝輝\AppData\Roaming\Typora\typora-user-images\image-20200221154002939.png)]