表單標簽form: form /form //相當于一張記錄用戶信息的單子
常用屬性:method:表單的提交方式,常用的值有兩個
(1)post:安全提交方式
(2)get:非安全提交方式
舉例: form method= post /from
action:設置表單提交到哪
舉例: form method= post action= 提交到的頁面地址 /form
表單中包含表單元素inout標簽,用來讓用戶輸入內容
需要注意表單元素要寫在form標簽之間,不要寫在form外面
常用的表單元素:
(1) input type= text / :文本框,可以輸入內容
表單元素還可以設置默認值value屬性:value= 123
(2) input type= password / :密碼框,輸入的內容會隱藏
每個表單元素一定要設置name屬性,name屬性用來標識表單元素的名字
(3) input type= subimt value= 提交 / :提交按鈕,點擊后會提交表單
表單元素通過type設置是什么類型的輸入框或按鈕
(4) input type= reset value= 重置 / :重置按鈕, 點擊會讓表單中的輸入框回到初始狀態
(5) input type= radio name= sex value= 男 / :單選按鈕,
同一組單選按鈕只能選擇一個,使用name來分組,比如性別:name都是sex,如果name值不同,說明不是同組。提交的時候提交的是value值,
(6) input type= checkbox name= like value= swim / 多選框,使用name分組,可以多選,提交的時候提交的是value值
ps: 單選按鈕和多選按鈕可以通過設置checked屬性來設置默認選中項
(7) select name= year
option value= 1 列表項1 /option
option value= 2 列表項2 /option
option value= 3 列表項3 /option
/select 年
列表框,通過下拉框選擇列表項,提交的時候提交的是value值, 通過設置列表項的selected屬性來設置默認選中項
(8) input type= image src= 圖片路徑 / 圖片按鈕
讓按鈕變成圖片的樣子,點擊會提交表單
(9) input type= button value= 顯示文字 / 普通按鈕
一個沒有任何作用的按鈕,以后會很常用
注意:不設置type屬性的話,默認type屬性為text
(10) textarea rows= 顯示的行數 cols= 顯示的列數 / /textarea 文本域,可以顯示多行內容或者輸入
(11) input type= file / 文件域,可以選擇一個文件上傳
上傳文件還需要設置form標簽中的enctype屬性為multipary/form-data.
(12) input type- email / 郵箱框,必須輸入一個正確的郵箱格式才可以提交表單
錯誤會有提示
(13) input type= url / 網址框,必須輸入一個完整的網址,列如:http://www.baidu.com
(14) input type= number max= 最大數字 min= 最小數字 step= 合法倍數 / 數字框,只能輸入數字,
輸入其他字符就提交不了表單。
(15) input type= range max= 最大值 min= 最小值 setp= 增量 / 滑塊,可以左右滑動
(16) input type= search / 搜索框,不同瀏覽器會有你不同的樣式顯示
(17) input type= color / 可以選擇顏色
(18) input type= datetime / 格式為時間格式的輸入框
表單初級驗證:placehoder提示內容,require非空判斷
pattern正則表達式驗證
栗子: input type= text placehoder= 請輸入姓名 /
input type= text require/ //這個輸入框提交時不能為空
表單的高級應用:
隱藏域: input type= hidden name= hid value= /
隱藏域是用戶看不到的內容,可以用來區分表單,
只讀: input type= text readonly/
設置只讀屬性之后,輸入框內容不能被更改
但是會獲取光標,也可以被選中
禁用: input type= text disabled/
設置禁用屬性之后,元素不能使用,變灰不能獲取光標,不可選中
表單標注:點擊文字時,相對應的表單元素獲取焦點,增強鼠標的可用性
栗子: label for= pwd /lable
inout type= password id= pwdl /
注意:for屬性里面要寫相對應元素的id值
相關推薦:
HTML中列表、表格和媒體元素的介紹
HTML的格式及標簽介紹
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答