HTML表單和組件-創(chuàng)新互聯(lián)

表單

創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)服務(wù)器托管機(jī)柜，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。

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

示例圖：

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

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

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

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

表單組件介紹

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

表單的標(biāo)簽是<form>，有一點(diǎn)要注意的是：在表單里不要再嵌套表單，這么做沒有任何意義。

<form>標(biāo)簽屬性介紹：

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

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

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

enctype屬性，enctype指定了HTTP請(qǐng)求的Content-Type。簡(jiǎn)單來說就是指定數(shù)據(jù)提交的類型，通常來說有兩種類型：一種是帶有文件的數(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)鍵字，何必多此一舉，示例：

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

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

表單組件之<input />引入組件

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

type屬性常用組件介紹：

1. date日期選擇，示例：

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

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

2. file文件選擇，示例：

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

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

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

1. color顏色選擇，示例：

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

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

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

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

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

1. range拉動(dòng)條，示例：

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

1. checkbox復(fù)選框，示例：

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

1. radio單選框，示例：

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

按鈕組件：

1. submit表單提交按鈕，示例：

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

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

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

1. button 普通按鈕，示例：

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

文本組件：

1. search搜索框，示例：

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

1. text文本框，示例：

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

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

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

1. number 數(shù)字框，示例：

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

1. password 密碼框，示例：

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

1. tel電話號(hào)碼框，示例：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

不常用屬性：

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

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

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

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

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

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

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

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

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

max，指定組件的大值，示例：

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

min，指定組件的最小值

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

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

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

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

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

重置按鈕示例：

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：HTML表單和組件-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://muchs.cn/article16/dpecdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、ChatGPT、微信公眾號(hào)、小程序開發(fā)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)