HTML表單作用

HTML表單是什么？

簡單來說，HTML表單就是：能夠讓用戶輸入具體內容的信息表，比如郵箱注冊

163的注冊頁面

HTML表單的作用？

所以，HTML表單主要用于采集和提交用戶輸入的信息（向服務器提交）

- 表單是一個包含表單元素的區域；
- 表單元素是允許用戶在表單中輸入內容的；
- 表單元素指的是不同類型的 input 元素，比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選（checkboxes)、提交按鈕（button）等等。

HTML表單元素

• form標簽---定義被用戶輸入的標簽

當點擊表單提交按鈕后，只有被form標簽包裹的內容才會提交給服務器，所以要將表單內所有元素放在 form 標簽對中，如下所示：

 <form action="/DICM" method="get">
      <label for="username">賬戶</label>
        <input type="text" name="username" id="username">
      <label for="password">密碼</label>
        <input type="password" name="password" id="password">
      <input type="submit" value="登錄">
 </form>

上述代碼示例

form標簽有兩個屬性如下：

• action —— 規定當提交表單時向何處發送表單數據
• method —— 規定用于發送表單數據的 HTTP 方法

瀏覽器向服務器傳輸數據、發送請求的方式有兩種 get、post

兩者的區別主要由三點：請求方式不同、安全性不同、傳輸數據量不同

• get：將所有的請求數據拼接成key=value的形式連接一起，組裝到URL上
• post：請求的URL不會發生變化，但是數據會通過瀏覽器傳輸給后臺

兩者的使用場景:

 - 當向后臺傳送數據或者安全性要求更高時選擇post
 - 當向后臺索要數據或者簡單的安全性要求低是選擇get

• label標簽---為 <input> 元素定義標注（標題）

 <label>用戶名</label>
 <input type="text" name="username" >

“ 用戶名 ” 三個字就是 label 標簽展示的效果

也可以這樣寫

 <label for="username">用戶名</label>
 <input type="text" name="username" id="suername">

只不過 for 把 label 標簽綁定在了 input 元素上，即：當選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上
將 for 屬性的值設置為相關元素的 id 屬性的值即可完成綁定

此時點擊用戶名等于點擊輸入框

• input標簽---定義輸入域

 一般格式為：     <input type="?" name="?" value="?">

注：name 屬性為 input 重要屬性，若不設置 name 屬性，瀏覽器則不會向服務器提交該類型信息

• 1. 單行文本輸入框（text）

當 type=text 時為 “單行文本輸入框”，用戶名輸入框 代碼如下所示：

 <input type="text" name="username" >

沒看錯，就是一個輸入框條

注：文本框中只有一行文本，敲擊回車鍵文本不會換行

如何在文本輸入框中顯示提示性默認語句？

使用 placehodler 即可，例如在 用戶名輸入框 中顯示 “請輸入用戶名” 字樣，代碼如下所示：

 <input type="text" name="username" id="username" placeholder="請輸入用戶名">

看，輸入框中多了幾個字，但不影響你輸入字符

• 2. 密碼輸入框（password）

當 type=password 時為 “密碼字段”，密碼輸入框 代碼如下所示：

 <input type="password" name="password" >

密碼輸入框

注：在文本框輸入字符后，字符并不顯示字符原本的樣子，而是顯示為 “ ● ”

• 3. 復選框（checkbox）

當 type=checkbox 時為 “復選框”，代碼如下所示：

 <input type="checkbox" name="food" value="米飯" >米飯
 <input type="checkbox" name="food" value="面條" >面條
 <input type="checkbox" name="food" value="饅頭" >饅頭

老板上菜單！

注：同一組選項，name屬性推薦保持一致，便于歸類分組

如何設置默認選中選項？

使用 checked="checked" 即可，例如默認選中 米飯+饅頭，代碼如下所示：

<input type="checkbox" name="food" value="米飯" checked="checked">米飯
 <input type="checkbox" name="food" value="面條" >面條
 <input type="checkbox" name="food" value="饅頭" checked="checked">饅頭

還差一碗湯！

• 4. 單選框（radio）

當 type=radio 時為 “單選框”，代碼如下所示：

 <input type="radio" name="sex" value="男" >
 <input type="radio" name="sex" value="女" >

只能選一個，你該選哪個

注：同一組選項，name屬性必須保持一致；
因：name 屬性相同則屬同一組選項，name屬性不同則屬于多組選項

如何設置默認選中選項？

使用 checked="checked" 即可，例如默認選中 男，代碼如下所示：

 <input type="radio" name="sex" value="男" checked="checked">男
 <input type="radio" name="sex" value="女" >女

原來和復選框是一樣的方法

• 5. 文件上傳（file）

當 type=file 時為 “上傳文件框”，代碼如下所示：

 <input type="file" name="file" accept="image/png" >

上傳文件：點擊按鈕打開選擇文件對話框

注： < accept="image/png" > 意思是 可上傳文件的類型為 “ png格式的圖片 ”，即 < accept="?" > 屬性的意思是 規定可上傳文件的類型。

• 6. 隱藏（hidden）

當 type=hidden 時為 “隱藏”，代碼如下所示：

 <input type="hidden" name="保存的屬性名" value="保存的屬性值" >

空白一片什么都沒有

注：此條信息不做展示，所以用戶不會看到；hidden 用于暫存信息、安全校驗

• 7. 按鈕（button）

 <input type="button" value="Buttom" > 

我是button，點我點我，反正我不會提交表單信息！

注：點擊按鈕不會向服務器提交表單數據信息

• 8. 提交表單（submit）

 <input type="submit" value="submit" > 

確定提交信息嗎？會提交的哦！

注：點擊按鈕會向服務器提交表單數據信息

• 9. 重置表單（reset）

 <input type="reset" value="reset" > 

會清空填寫的信息，回到初始默認狀態

注：點擊按鈕會清空表單內填寫的信息，即重置表單為初始默認狀態（reset 必須放到 form 標簽中，否則 reset 按鈕不生效）

• select標簽---下拉菜單

<select name="city">
      <option value="beijing">北京</option>
      <option value="shanghai" >上海</option>
      <option value="hangzhou">杭州</option> 
</select>

正常狀態

點開狀態

如何設置下拉菜單默認選項？ 使用selected即可，默認選擇 上海 如下所示：

<select name="city">
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="hangzhou">杭州</option> 
</select>

正常狀態

點開狀態

• textarea標簽---多行文本

<textarea name="article">這是一個5行的段落,字數多到數不清楚</textarea>

敲回車會換行的啊

謹記：表單元素一定要放入 form 標簽對中，才會被提交給服務器

本文章著作權歸饑人谷_蠻力拳貓和饑人谷所有，轉載須說明來源！