明輝手游網(wǎng)中心:是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺!

HTML的表單說明

[摘要]這篇文章給大家介紹的文章內(nèi)容是關(guān)于HTML的表單介紹、表格和媒體元素的介紹,有很好的參考價值,希望可以幫助到有需要的朋友。表單標(biāo)簽form:<form></form>//相當(dāng)于一張記錄用戶信息的單子 常用屬性:method:表單的提交方式,常用的值有兩個 ...
這篇文章給大家介紹的文章內(nèi)容是關(guān)于HTML的表單介紹、表格和媒體元素的介紹,有很好的參考價值,希望可以幫助到有需要的朋友。

表單標(biāo)簽form:<form></form>//相當(dāng)于一張記錄用戶信息的單子
常用屬性:method:表單的提交方式,常用的值有兩個
(1)post:安全提交方式
(2)get:非安全提交方式
舉例:<form method="post"></from>
action:設(shè)置表單提交到哪
舉例:<form method="post" action="提交到的頁面地址"></form>
表單中包含表單元素inout標(biāo)簽,用來讓用戶輸入內(nèi)容
需要注意表單元素要寫在form標(biāo)簽之間,不要寫在form外面
常用的表單元素:
(1)<input type="text"/>:文本框,可以輸入內(nèi)容
表單元素還可以設(shè)置默認值value屬性:value="123"
(2) <input type="password"/>:密碼框,輸入的內(nèi)容會隱藏
每個表單元素一定要設(shè)置name屬性,name屬性用來標(biāo)識表單元素的名字
(3)<input type="subimt" value="提交"/>:提交按鈕,點擊后會提交表單
表單元素通過type設(shè)置是什么類型的輸入框或按鈕
(4)<input type="reset"value="重置"/>:重置按鈕, 點擊會讓表單中的輸入框回到初始狀態(tài)
(5)<input type="radio" name="sex" value="男"/>:單選按鈕,
同一組單選按鈕只能選擇一個,使用name來分組,比如性別:name都是sex,如果name值不同,說明不是同組。提交的時候提交的是value值,
(6) <input type="checkbox" name="like"value="swim"/>多選框,使用name分組,可以多選,提交的時候提交的是value值
ps: 單選按鈕和多選按鈕可以通過設(shè)置checked屬性來設(shè)置默認選中項

(7)<select name="year">
<option value="1">列表項1</option>
<option value="2">列表項2</option>
<option value="3">列表項3</option>
</select>年
列表框,通過下拉框選擇列表項,提交的時候提交的是value值, 通過設(shè)置列表項的selected屬性來設(shè)置默認選中項

(8)<input type="image" src="圖片路徑"/>圖片按鈕
讓按鈕變成圖片的樣子,點擊會提交表單
(9)<input type="button" value="顯示文字"/>普通按鈕
一個沒有任何作用的按鈕,以后會很常用
注意:不設(shè)置type屬性的話,默認type屬性為text
(10)<textarea rows="顯示的行數(shù)" cols="顯示的列數(shù)"/></textarea>文本域,可以顯示多行內(nèi)容或者輸入
(11)<input type="file"/>文件域,可以選擇一個文件上傳
上傳文件還需要設(shè)置form標(biāo)簽中的enctype屬性為multipary/form-data.
(12)<input type-"email"/>郵箱框,必須輸入一個正確的郵箱格式才可以提交表單
錯誤會有提示

(13)<input type="url"/>網(wǎng)址框,必須輸入一個完整的網(wǎng)址,列如:http://www.baidu.com
(14)<input type="number" max="最大數(shù)字" min="最小數(shù)字"step="合法倍數(shù)"/>數(shù)字框,只能輸入數(shù)字,
輸入其他字符就提交不了表單。
(15)<input type="range" max="最大值"min="最小值" setp="增量"/>滑塊,可以左右滑動
(16)<input type="search"/>搜索框,不同瀏覽器會有你不同的樣式顯示
(17)<input type="color"/>可以選擇顏色
(18)<input type="datetime"/>格式為時間格式的輸入框
表單初級驗證:placehoder提示內(nèi)容,require非空判斷
pattern正則表達式驗證
栗子:<input type="text" placehoder="請輸入姓名"/>
<input type="text" require/>//這個輸入框提交時不能為空

表單的高級應(yīng)用:
隱藏域:<input type="hidden" name="hid" value=""/>
隱藏域是用戶看不到的內(nèi)容,可以用來區(qū)分表單,
只讀:<input type="text" readonly/>
設(shè)置只讀屬性之后,輸入框內(nèi)容不能被更改
但是會獲取光標(biāo),也可以被選中
禁用:<input type="text" disabled/>
設(shè)置禁用屬性之后,元素不能使用,變灰不能獲取光標(biāo),不可選中
表單標(biāo)注:點擊文字時,相對應(yīng)的表單元素獲取焦點,增強鼠標(biāo)的可用性
栗子:<label for="pwd"></lable>
<inout type="password" id="pwdl"/>
注意:for屬性里面要寫相對應(yīng)元素的id值

相關(guān)推薦:

HTML中列表、表格和媒體元素的介紹

HTML的格式及標(biāo)簽介紹

以上就是HTML的表單介紹的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!


網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。




標(biāo)簽:HTML的表單介紹