前端(三)——HTML之表单
生活随笔
收集整理的這篇文章主要介紹了
前端(三)——HTML之表单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 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: 默認選中
- option: 選項
(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之表单的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端(二)——HTML之列表、表格、媒体
- 下一篇: 2017年html5行业报告,云适配发布