表單簡(jiǎn)介

Form表單主要用于用戶與Web應(yīng)用程序進(jìn)行數(shù)據(jù)的交互，它允許用戶將數(shù)據(jù)發(fā)給web應(yīng)用程序，網(wǎng)頁(yè)也可以攔截?cái)?shù)據(jù)的發(fā)送以便自己使用。form通常由一到多個(gè)表單元素組成，這些表單元素是單行/多行文本框，下拉菜單，按鈕，復(fù)選框，單選按鈕，時(shí)間表單元素時(shí) 一般要配合label標(biāo)簽，用于描述其目的。其可用屬性如下。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的民豐網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

action　　 用于處理表單信息的應(yīng)用程序的地址。
method 　　　瀏覽器用來(lái)提交表單的HTTP方法。
get 對(duì)應(yīng)于Http協(xié)議的GET方法，表單數(shù)據(jù)被附加在uri上，使用"?"分隔
post 對(duì)應(yīng)于Http協(xié)議的POST方法，表單數(shù)據(jù)包含在HTTP協(xié)議的請(qǐng)求報(bào)文的體部。
name 　　設(shè)定表單的名稱
target 　　表示瀏覽器接收到form的提交信息后在哪里顯示回應(yīng)。
_self，_blank，_parent，_top這些值和超鏈接的相同

表單數(shù)據(jù)的內(nèi)容類型

通過(guò)enctype屬性設(shè)定表單數(shù)據(jù)的內(nèi)容類型

1. application/x-www-form-urlencoded

在發(fā)送前編碼所有字符（默認(rèn)）使用到的編碼方式：

1）控件的名稱和值都被轉(zhuǎn)義，空白字符使用【+】替換，保留的字符一般都是用來(lái)實(shí)現(xiàn)特定的目的，例如（: / ? ; @ = & 等）。非數(shù)字和字母的字符使用%HH（這里 HH表示兩個(gè)十六進(jìn)制數(shù)字，代表該字符的ASCII碼）進(jìn)行轉(zhuǎn)換，

2）控件的"名稱/值"對(duì)按照它們?cè)谖臋n數(shù)據(jù)流中出現(xiàn)的順序列出來(lái)。"名稱""值"使 用"="分割，兩個(gè)"名稱/值"之間使用&隔開(kāi)。

2. multipart/form-data

不對(duì)字符編碼。在使用包含【文件上傳控件】的表單時(shí)，必須使用該值。數(shù)據(jù)分成多個(gè)部分，每個(gè)部分代表一個(gè)結(jié)構(gòu)良好的控件，作為文檔數(shù)據(jù)流的一部分，每一 個(gè)部分都按照它們?cè)谖臋n數(shù)據(jù)流中出現(xiàn)的順序依次發(fā)送到服務(wù)器端，并且，每一部分的邊界不會(huì)出現(xiàn)在數(shù)據(jù)中。每一部分有一個(gè)content-desposition標(biāo)題頭，它的值的格式是： Content-Disposition:form-data;name="myControl"

3. text/plain

空格轉(zhuǎn)換為 "+" 加號(hào)，但不對(duì)特殊字符編碼。

表單組件

input組件用于接受來(lái)自用戶的數(shù)據(jù)，其可用屬性如下

1、type 用于設(shè)定組件類型

text 單行文本框
password 密碼框，輸入的內(nèi)容將會(huì)被遮擋。
checkbox 復(fù)選框，必須使用value屬性來(lái)描述該組件所提交的值，使用checked屬性默認(rèn)選 中。
radio 單選按鈕，必須使用value屬性來(lái)描述該組件所提交的值，使用checked屬性默認(rèn) 選中。一個(gè)單選按鈕組中所有組件都應(yīng)該具有相同的name值，這樣，每次只能選中按鈕組中的 某一個(gè)組件
submit 提交按鈕
reset 重置按鈕
file文件按鈕，該組件用于選中文件系統(tǒng)中的某個(gè)文件
hidden 隱藏域，該組件不顯示在頁(yè)面中，但是其值會(huì)被提交。
image 圖像按鈕，必須使用src來(lái)加載圖片，使用alt來(lái)聲明替換文本。
button 普通按鈕

2、name 用于設(shè)定組件類型

3、value 用于設(shè)定初始化，可選。 　　

4、checked 單選框，復(fù)選框默認(rèn)選中屬性

5、disabled 表示禁用組件，禁用組件的值也不能被提交

6、size 當(dāng)前控件的初始寬度，這個(gè)寬度以像素為單位。除非控件類型是text, password，這時(shí)寬度是整數(shù)值，表示字符的數(shù)目，默認(rèn)為20

7、maxlength 指定可以輸入的字符的最大值。適用于控件類型為text,password。

fieldset組件用于在一個(gè)web表單中對(duì)多個(gè)控件和標(biāo)簽進(jìn)行分組

1、disabled 禁用filedset元素，該屬性會(huì)影響的fieldset的子元素

2、name fieldset元素的名稱

fieldset的標(biāo)題由標(biāo)簽提供

web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）



    
    


    

        

            
Title
            
            click me
        
    

input/button按鈕組件用于接受來(lái)自用戶的數(shù)據(jù)，其可用屬性如下

按鈕控件

1、input的type 指定控件類型：button，submit，reset

2、input的name 按鈕名稱。

3、input的value 按鈕所關(guān)聯(lián)的值，會(huì)與name的值一同被提交

label組件用于表示某一表單組件的標(biāo)題 其可用屬性如下

1、for 與為設(shè)定標(biāo)題的表單組件的ID值一致，上面的代碼實(shí)例有

select組件用于表示下拉列表或列表，其可用屬性如下

1、multiple 指定控件類型 布爾類型的值，表示是否允許多選，如果select元素不包含屬性size和屬性 multiple時(shí)，表單類型顯示為菜單（組合框），如果使用了屬性size和屬性multiple中 的任意一個(gè)，則表單類型顯示為列表框。

2、size 顯示的行數(shù) 當(dāng)要表示一個(gè)可以滾動(dòng)的列表時(shí)候，size表示同時(shí)展示的行數(shù)。默認(rèn)值為0。表 示非列表顯示

3、disabled 表示禁用組件，禁用組件的值也不能被提交

4、name 用于指定該組件的名字，會(huì)與其option子元素的value值組成鍵值對(duì)隨其他表單數(shù)據(jù)一齊被提交

option組件用于表示選項(xiàng)，常包含、中，其可用的屬性如下

1、disabled 表示禁用組件，禁用組件的值也不能被提交

2、value 定義控件的初始值。提交表單時(shí)，初始值會(huì)被提交給服務(wù)器。

3、selected 表示該選項(xiàng)默認(rèn)被選中

北京 上海 廣州

optgroup組件用于表示option的選項(xiàng)組，常包含在中，其可用的屬性如下

1、disabled 表示禁用組件，禁用組件的值也不能被提交

2、label 表示選項(xiàng)組的名稱

3、selected 表示該選項(xiàng)默認(rèn)被選中

廣州 深圳 蘇州 鹽城

textarea組件用于表示多行文本框，沒(méi)有value屬性，其值被包含在標(biāo)簽內(nèi) 其可用屬性如下

1、rows 定義文本框的行數(shù)

2、cols 定義文本框的列數(shù)

3、warp 表示是否自動(dòng)換行

? off 不自動(dòng)換行

? hard自動(dòng)硬回車換行，換行元素一同被傳送到服務(wù)器中

? soft自動(dòng)軟回車換行，換行元素不會(huì)傳到服務(wù)器中

4、disabled 表示禁用組件，禁用組件的值也不能被提交

5、readonly 表示該組件只讀，其值依然會(huì)被提交

6、name 用于指定該組件的名字，會(huì)隨著其值一同被提交到后臺(tái)

新增表單組件

progress組件用于表示任務(wù)的完成情況，常用于進(jìn)度條 其可用的屬性如下

1、max 定義進(jìn)度元素所要求的任務(wù)的工作量，默認(rèn)值為1

2、value 定義已經(jīng)完成的工作量，如果max值為1，該值必須是介于0~1之間的小 數(shù)。

output 組件用于表示用戶動(dòng)作產(chǎn)生的結(jié)果 其可用的屬性如下

1、name 定義元素的名稱

2、for 其他元素的id列表，表明這些元素為計(jì)算提供了輸入值(或其他影響)。

    
    


    

        +
        =
        

    

meter元素表示規(guī)定范圍內(nèi)的數(shù)量值。呈現(xiàn)的效果有一個(gè)類似于進(jìn)度條

例如：磁盤使用量，某個(gè)候選者的投票人數(shù)占 總投票人數(shù)的比例等

1、value :在元素中特地表示出來(lái)的實(shí)際值，該值在min與max之間，如果未指定 ，該值默認(rèn)為1

2、min :指定規(guī)定范圍時(shí)允許使用的最小值，默認(rèn)為0

3、max :指定規(guī)定范圍時(shí)允許使用的最大值，默認(rèn)為1

4、low :規(guī)定范圍的下限值必須小于或等于high屬性的值

5、high :規(guī)定范圍的上限值（表示較高危險(xiǎn)的意思）

6、optimum :最佳值

web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）



    
    


    
He got a Bon this exam

datalist組件表示其他控件可用的值，其值通過(guò)作為datalist的子元素存在

    
    


     choose a browser from this list:
    
    

新增表單屬性

type：在H5中，對(duì)input的type進(jìn)行了擴(kuò)展，可以有更多的取值

1、date 日期控件（年，月，日，不包含時(shí)間）

2、datetime-local 日期時(shí)間控件

3、time 時(shí)間控件

4、month 日期插件（年，月）

5、week 日期插件（年，周），注意：以上只能被chrome,opera支持

6、number 數(shù)字控件（只能輸入數(shù)字）

7、range 范圍控件（通過(guò)控制條可以調(diào)整取值）

8、search 搜索控件，

9、tel 電話控件

10、url 地址控件

11、color 顏色控件

12、email email控件