文章目錄

• 1. 表單分類
• 2. 基礎表單
• 3. 表單元素
• 4. 表單應用
• 5. 案例練習

1. 表單分類

• 注冊

• 登錄
  
• 搜索框

2. 基礎表單

• form 表單
  action： 提交地址
  method：提交的方式（post）

• 提交請求：
  攜帶的參數
  key: 控件的name。這個屬性不要忘記
  get：攜帶參數，參數可以在url中看到，不安全，大小有限
  https://www.baidu.com/?username=kuangshen&password=123456
  post：參數不可見、安全，大小沒有限制 （表單提交常用方式post）

• 輸入框均要寫在表單內
  input 標簽
  name： 必須寫上
  type：
  text ： 文本框
  password： 密碼框
  submit： 提交按鈕
  reset： 重置

• 案例代碼
  

• 運行結果
  

3. 表單元素

• 所有表單元素都要寫在form表單中，必須加上name屬性，否則提交的時候取不到值。

（1）文本框

• type=“text”
  value ：文本框默認的初始值
  size： 文本框的長度
  maxlength： 文本框的最大輸入長度
  

（2）密碼框

• type=“password”
  size： 密碼框的長度
  

（3）單選按鈕

• type=“radio”
  value： 表單提交的值
  name： 名字相同，則自動分組，必須要分組
  checked： 默認選中
  disabled： 禁用
  注意事項：默認沒有值，需要在input type=“radio” 后增加單選框的屬性
  

（4）多選框

• type=“checkbox”
  name： 必填項，如果是分組，則名稱一致
  value： 表單提交的值
  checked： 默認選中
  disabled： 禁用
  注意事項：默認沒有值，需要再input type=“checkbox” 后增加多選框的屬性
  

（5）下拉列表框

• select
  name： 組件名字 必填
  size: 顯示的數量，默認為1

  • option： 選項
    value 必填
    option標簽中間寫下拉框的值
    selected： 默認選中
    

（6）按鈕

• value：按鈕上的文字
  

（7）文本域

（8）文件域

• 表單，需要支持提交復雜文件
• 當使用文件域file時，必須在form的標簽中說明編碼方式“enctype=“multipart/form-data”。這樣，服務器才能接收到正確的信息。

（9）郵箱

（10）網址

（11）數字

• 商品數量，計數 type=“number”
  最小值 min
  最大值 max
  步長 step

（12）滑塊

（13）搜索框

• 總運行頁面
  

4. 表單應用

（1）隱藏域

（2）只讀和禁用

（3）標注

• 通過 for=“name” 來鏈接到 表單中的指定ID
  
• 運行頁面
  

（4）初級表單驗證

• 進行初級表單驗證的原因
  
• 默認提示
  – placeholder=“必須是url格式” 默認提示，告訴用戶應該這么做
  
• 必填
  –required必須要填寫這個字段
  
• 正則表達式
  
• 運行頁面
  

5. 案例練習

• 人人網的原注冊頁面
  
• 案例代碼
  
• 測試結果
  
  不足：
  （1）生日只能一個個數字手動填寫
  （2）驗證的圖片不會添加

總結

以上是生活随笔為你收集整理的前端(三)——HTML之表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。