首先說一下 HTML 表單是什么续誉,為什么需要使用它。
form表單用于用戶在頁面中輸入一些信息(通過<input>標簽等),瀏覽器將該信息打包傳送給服務器涕蜂,由服務器的后端程序進行下一步處理:如返回給用戶一些信息或者更新服務器數(shù)據(jù)庫的內(nèi)容等。
常用的input標簽:
<input name="" type="text"> // 小段文字框
<input name="" type="checkbox" value=""> // 復選框
<input name="" type="email"> // Email輸入框
<input name="" type="file"> // 選擇本地文件控件
<input name="" type="hidden"> // 隱藏框映琳,當表當被提交時也會提交內(nèi)容机隙,用戶不可見
<input name="" type="image" src="" alt="" height="" width=""> // 帶圖片的提交按鈕
<input name="" type="password"> // 密碼輸入框
<input name="" type="radio" value=""> // 單選框
<input type="reset"> // 表單重置按鈕
<input type="submit"> // 表單提交按鈕
<textarea name="" rows="" cols=""></textarea> // 大段文字框
比如我們想做一個注冊頁面,用戶需要填寫自己的用戶名萨西、密碼有鹿、個人信息等军拟,最后點提交吸耿。這就是一個form表單早抠。
還有我們想做一個用戶調(diào)查表刀诬,收集用戶對產(chǎn)品的反饋遣耍,也需要用到表單狡逢。
總之表單的用處很多逻谦,基本上需要收集用戶信息的地方都能用得上表單刷晋。
表單使用起來也很簡單咸产。
首先矢否,整個表單必須被包裹在一個<form></form>標簽里
然后必須在表單最下面有一個提交按鈕<input type="submit">或<button></button>
然后根據(jù)你表單的目的加入各種<input>輸入框、控件脑溢、按鈕等僵朗,每一個<input>都需要一個name屬性赖欣,有一個value屬性(如果是直接輸入內(nèi)容的輸入框,如<input type="text">就可以不用加value屬性)验庙。
這樣做是為了對每個<input>形成一個key:value對顶吮,這樣整個表單信息形成一個object數(shù)據(jù)類型,傳給后臺服務器上的程序進行處理粪薛。如果沒有name和value悴了,那么表單信息相應的input內(nèi)容無法傳給服務器,等于你白填了這個input
-
最后违寿,對每個<input>最好都加上一個<label>標簽湃交,這樣做有三個好處:
用戶可以通過<label>里的內(nèi)容知道這個<input>是干什么的
用戶可以點擊<label>里的文字內(nèi)容直接focus該<input>
對于使用屏幕閱讀器的視力障礙人士,可以方便的知道每個<input>是做什么的