表單

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

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

示例圖：

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

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

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

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

表單組件介紹

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

表單的標簽是<form>，有一點要注意的是：在表單里不要再嵌套表單，這么做沒有任何意義。

<form>標簽屬性介紹：

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

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

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

enctype屬性，enctype指定了HTTP請求的Content-Type。簡單來說就是指定數(shù)據(jù)提交的類型，通常來說有兩種類型：一種是帶有文件的數(shù)據(jù)提交，一種是不帶有文件的數(shù)據(jù)提交。在默認情況下，HTML的form表單中的enctype屬性默認指定的是：application/x-www-form-urlencoded類型，也就是不帶有文件的數(shù)據(jù)提交類型。enctype屬性里另一個關(guān)鍵字為：multipart/form-data，這就是指定帶有文件提交的類型，所以一般使用到enctype屬性也就只會用到multipart/form-data關(guān)鍵字，因為默認就是application/x-www-form-urlencoded關(guān)鍵字，何必多此一舉，示例：

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

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

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

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

type屬性常用組件介紹：

1. date日期選擇，示例：

運行結(jié)果：

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

2. file文件選擇，示例：

運行結(jié)果：

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

運行結(jié)果：

1. color顏色選擇，示例：

運行結(jié)果：

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

運行結(jié)果：

1. time選擇一個時間，示例：

運行結(jié)果：

1. range拉動條，示例：

運行結(jié)果：

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

運行結(jié)果：

1. radio單選框，示例：

運行結(jié)果：

按鈕組件：

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

運行結(jié)果：

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

運行結(jié)果：

1. button 普通按鈕，示例：

運行結(jié)果：

文本組件：

1. search搜索框，示例：

運行結(jié)果：

1. text文本框，示例：

運行結(jié)果：

1. email自動驗證email文本框，示例：

運行結(jié)果：

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

運行結(jié)果：

1. password 密碼框，示例：

運行結(jié)果：

1. tel電話號碼框，示例：

運行結(jié)果：

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

運行結(jié)果：

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

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

運行結(jié)果：

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

運行結(jié)果：

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

運行結(jié)果：

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

運行結(jié)果：

autofocus屬性，讓組件獲得焦點，示例：

運行結(jié)果：

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

運行結(jié)果：

不常用屬性：

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

運行結(jié)果：

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

運行結(jié)果：

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

運行結(jié)果：

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

運行結(jié)果：

要注意的一點是，在html5之前這種寫法不支持，只能用select標簽完成。

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

運行結(jié)果：

min，指定組件的最小值

運行結(jié)果：

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

運行結(jié)果：

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

運行結(jié)果：

重置按鈕示例：

運行結(jié)果：

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

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

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

廣告

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