真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

HTML表單和組件

表單

創(chuàng)新互聯(lián)IDC提供業(yè)務(wù):成都服務(wù)器托管,成都服務(wù)器租用,成都服務(wù)器托管,重慶服務(wù)器租用等四川省內(nèi)主機(jī)托管與主機(jī)租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機(jī)房,BGP機(jī)房,電信機(jī)房,移動(dòng)機(jī)房,聯(lián)通機(jī)房。

基本所有的網(wǎng)頁(yè)無(wú)非就是在做兩件事情:1.呈現(xiàn)數(shù)據(jù)給客戶看,2.接收用戶輸入的數(shù)據(jù)。所以表單就是用來(lái)收集用戶輸入的數(shù)據(jù),然后提交給服務(wù)器

示例圖:

HTML表單和組件

表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能,一個(gè)表單有三個(gè)基本組成部分:

1.表單標(biāo)簽:這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。

2.表單域:包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。

3.表單按鈕:包括提交按鈕、復(fù)位按鈕和一般按鈕;用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入,還可以用表單按鈕來(lái)控制其他定義了處理腳本的處理工作。

表單組件介紹

表單組件就是用來(lái)讓用戶輸入信息、接收用戶輸入信息的組件,我們經(jīng)常會(huì)在網(wǎng)頁(yè)上看到的文本框、按鈕、單選框、復(fù)選框等等,這些就是所謂的組件。當(dāng)我們注冊(cè)某個(gè)網(wǎng)站的用戶時(shí),就能看到一堆的組件,讓我在這些組件里輸入、選擇相關(guān)的信息,然后點(diǎn)擊提交按鈕后,這些信息就會(huì)提交到服務(wù)器上,這就是組件的一個(gè)主要作用,收集組件里的數(shù)據(jù)并提交到服務(wù)器上這是表單的作用,所以組件是在表單里面的。

表單的標(biāo)簽是

,有一點(diǎn)要注意的是:在表單里不要再嵌套表單,這么做沒有任何意義。

標(biāo)簽屬性介紹:

在表單標(biāo)簽里有一個(gè)action屬性,這個(gè)屬性用于指定收集的數(shù)據(jù)提交到哪個(gè)服務(wù)器的接收頁(yè)面上,示例:

HTML表單和組件

method屬性,這個(gè)屬性用于指定數(shù)據(jù)提交時(shí)會(huì)不會(huì)在URL上顯示,這個(gè)屬性有兩個(gè)關(guān)鍵字,一個(gè)是get一個(gè)是post,get表示在URL上顯示提交,post則是隱藏提交,示例:

HTML表單和組件

target屬性,這個(gè)屬性用于指定數(shù)據(jù)提交完成后用哪個(gè)窗口顯示,它的用法和超鏈接標(biāo)簽里的target用法是一樣的,示例:

HTML表單和組件

enctype屬性,enctype指定了HTTP請(qǐng)求的Content-Type。簡(jiǎn)單來(lái)說(shuō)就是指定數(shù)據(jù)提交的類型,通常來(lái)說(shuō)有兩種類型:一種是帶有文件的數(shù)據(jù)提交,一種是不帶有文件的數(shù)據(jù)提交。在默認(rèn)情況下,HTML的form表單中的enctype屬性默認(rèn)指定的是:application/x-www-form-urlencoded類型,也就是不帶有文件的數(shù)據(jù)提交類型。enctype屬性里另一個(gè)關(guān)鍵字為:multipart/form-data,這就是指定帶有文件提交的類型,所以一般使用到enctype屬性也就只會(huì)用到multipart/form-data關(guān)鍵字,因?yàn)槟J(rèn)就是application/x-www-form-urlencoded關(guān)鍵字,何必多此一舉,示例:

HTML表單和組件

accept-charset屬性,此屬性用于指定表單的字符集編碼,示例:

HTML表單和組件

novalidate屬性,這個(gè)屬性表示表單中所有的組件信息都不需要驗(yàn)證,例如我有一個(gè)email組件,這個(gè)組件在數(shù)據(jù)提交時(shí)會(huì)經(jīng)過(guò)一個(gè)判斷驗(yàn)證一下email信息是否正確,但是加上了novalidate屬性就不會(huì)有這一步的驗(yàn)證。這個(gè)屬性就只有一個(gè)關(guān)鍵字:novalidate,所以不寫關(guān)鍵字也可以。示例:

HTML表單和組件

表單組件之引入組件

標(biāo)簽引入的組件用于收集用戶輸入的內(nèi)容,例如文本框、單選框復(fù)選框、密碼框等等,這個(gè)標(biāo)簽最主要的屬性是type,這個(gè)屬性用于選擇你需要使用什么樣的組件,type的關(guān)鍵字很多,因?yàn)榻M件很多,每一個(gè)關(guān)鍵字表示著一個(gè)組件。

type屬性常用組件介紹:

  1. date日期選擇,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. datetime,也是時(shí)間選擇,但是大部分瀏覽器不支持

  2. file文件選擇,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

在file組件里有一個(gè)multiple屬性,加上這個(gè)屬性就可以選擇多個(gè)文件,不加的話只能選擇一個(gè)文件,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. color顏色選擇,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. week選擇一個(gè)日期顯示第幾周,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. time選擇一個(gè)時(shí)間,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. range拉動(dòng)條,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. checkbox復(fù)選框,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. radio單選框,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

按鈕組件:

  1. submit表單提交按鈕,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. reset 重置表單數(shù)據(jù)按鈕,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. button 普通按鈕,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

文本組件:

  1. search搜索框,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. text文本框,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. email自動(dòng)驗(yàn)證email文本框,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. number 數(shù)字框,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. password 密碼框,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. tel電話號(hào)碼框,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

  1. hidden 隱藏域,隱藏域在網(wǎng)頁(yè)上是看不到的,只有在代碼里看得到,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

以上就是type屬性里常用的組件

name屬性,當(dāng)數(shù)據(jù)提交到服務(wù)器時(shí)會(huì)讀取這個(gè)屬性里的數(shù)據(jù)。這個(gè)屬性還有一個(gè)作用,在使用單選框要實(shí)現(xiàn)單選時(shí)也需要使用這個(gè)屬性,如果沒有加上這個(gè)屬性的話,就無(wú)法實(shí)現(xiàn)單選,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

value屬性,這個(gè)屬性可以給組件加上一個(gè)值,這個(gè)值會(huì)提交給服務(wù)器的,value屬性還可以作為默認(rèn)值使用,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

require屬性,表示必填項(xiàng),這個(gè)屬性的關(guān)鍵字也只有一個(gè),所以不寫值也可以,如果這個(gè)加上這個(gè)屬性的組件沒有填寫信息的話,表單就不會(huì)進(jìn)行提交,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

placeholder屬性,加上此屬性可以提示組件需要填寫些什么信息,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

autofocus屬性,讓組件獲得焦點(diǎn),示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

pattern屬性,這個(gè)屬性的值可以填寫正則表達(dá)式,聲明了此屬性的組件,數(shù)據(jù)內(nèi)容必須符合正則表達(dá)式里的規(guī)定,例如我寫了一個(gè)正則表達(dá)式規(guī)以數(shù)字開頭以字母結(jié)尾,但是我填寫的時(shí)候卻是以字母開頭數(shù)字結(jié)尾,看看提交時(shí)會(huì)發(fā)生什么,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

不常用屬性:

checked,這個(gè)屬性在單選框或者復(fù)選框上使用,哪個(gè)單選框或者復(fù)選框上聲明了這個(gè)屬性,那么就會(huì)默認(rèn)選擇聲明了此屬性的組件,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

disabled,此屬性用于禁用某個(gè)組件,組件聲明了這個(gè)屬性后就不能使用了,并且禁用組件里的數(shù)據(jù)也不會(huì)提交給服務(wù)器,示例;

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

readonly,聲明此屬性表示此組件只能夠讀取,不能夠進(jìn)行修改或者輸入:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

list,要實(shí)現(xiàn)下拉框之類功能的組件可能會(huì)使用到這個(gè)屬性,這屬性是用來(lái)提供多項(xiàng)數(shù)據(jù)給用戶選擇的,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

要注意的一點(diǎn)是,在html5之前這種寫法不支持,只能用select標(biāo)簽完成。

max,指定組件的最大值,示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

min,指定組件的最小值

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

step,指定只能輸入某一個(gè)整數(shù)的倍數(shù),示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

date組件使用value屬性設(shè)置默認(rèn)值格式示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件

重置按鈕示例:

HTML表單和組件

運(yùn)行結(jié)果:

HTML表單和組件


新聞名稱:HTML表單和組件
鏈接分享:
http://weahome.cn/article/pgsejh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部