簡述form表單

關(guān)于form表單

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

表單標簽：這里面包含了處理表單數(shù)據(jù)所用CGI(Common Gateway Interface辆亏，通用網(wǎng)關(guān)接口)程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法风秤。
表單域：包含了文本框、密碼框扮叨、隱藏域缤弦、多行文本框、復(fù)選框甫匹、單選框甸鸟、下拉選擇框和文件上傳框等惦费。
表單按鈕：包括提交按鈕兵迅、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入薪贫，還可以用表單按鈕來控制其他定義了處理腳本的處理工作恍箭。

下面對表單的三個部分分別進行說明。

一瞧省、表單標簽

功能
表單標簽用于申明表單扯夭，定義采集數(shù)據(jù)的范圍。也就是說< form>和< /form >里面包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件里鞍匾。
標簽格式
基本格式：
<form></form>
基本語法格式：
<form action="URL" method="GET|POST" enctype="MIME" target="_blank|_self|_parent|_top|framename">...</form>
屬性解釋

屬性	值	描述
accept-charset	charset_list	規(guī)定服務(wù)器可處理的表單數(shù)據(jù)字符集交洗。
action	URL	規(guī)定當提交表單時向何處發(fā)送表單數(shù)據(jù)。
autocomplete	on / off	規(guī)定是否啟用表單的自動完成功能橡淑。
enctype	application/x-www-form-urlencoded(默認值)	規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進行編碼构拳。
method	get / post	規(guī)定用于發(fā)送 form-data 的 HTTP 方法。
name	form_name	規(guī)定表單的名稱。
novalidate	novalidate	如果使用該屬性置森，則提交表單時不進行驗證斗埂。
target	_blank / _self / _parent / _top / framename	規(guī)定在何處打開 action屬性的URL。

關(guān)于 HTML <form> 標簽

二凫海、表單域
<input> 標簽用于搜集用戶信息呛凶。
根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式行贪。輸入字段可以是文本字段漾稀、復(fù)選框、掩碼后的文本控件瓮顽、單選按鈕县好、按鈕等等。

文本框
文本框是一種讓訪問者自己輸入內(nèi)容的表單對象暖混，通常被用來填寫單個字或者簡短的回答缕贡，如姓名、地址等拣播。代碼格式如下：

<input type="text" name="..." size="..." maxlength="..." value="...">
<input type="text" name="example1" size="20" maxlength="15" />

type=”text”：定義單行文本輸入框晾咪；
name：定義文本框名稱；要保證數(shù)據(jù)的準確采集贮配，必須定義一個獨一無二的名稱谍倦；
size：定義文本框的寬度，單位是單個字符寬度泪勒；
maxlength：定義最多輸入的字符數(shù)昼蛀；
value：定義文本框的初始值；

多行文本框
多行文本框也是一種讓訪問者自己輸入內(nèi)容的表單對象圆存，只不過能讓訪問者填寫較長的內(nèi)容叼旋。代碼格式如下：

<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>
<textarea name="example2" cols="20" rows="2" wrap="PHYSICAL"></textarea>

name：定義多行文本框的名稱，要保證數(shù)據(jù)的準確采集沦辙，必須定義一個獨一無二的名稱夫植；
cols：定義文本框的寬度，單位是單個字符寬度油讯；
rows：定義文本框的高度详民，單位是單個字符寬度；
wrap：定義輸入內(nèi)容大于文本域時顯示的方式陌兑，可選值如下：
默認值：文本自動換行,當輸入內(nèi)容超過文本域的右邊界時會自動轉(zhuǎn)到下一行沈跨，而數(shù)據(jù)在被提交處理時自動換行的地方不會有換行符出現(xiàn)；
Off：用來避免文本換行兔综，當輸入的內(nèi)容超過文本域右邊界時饿凛，文本將向左滾動隅俘，必須用Return才能將插入點移到下一行；
Virtual：允許文本自動換行笤喳；Physical：讓文本換行为居，當數(shù)據(jù)被提交處理時，換行符也將被一起提交處理杀狡。

密碼框
密碼框是一種特殊的文本域蒙畴，用于輸入密碼。當訪問者輸入文字時呜象，文字會被星號或其它符號代替膳凝，而輸入的文字會被隱藏。代碼格式如下：

<input type="password" name="..." size="..." maxlength="...">
<input type="password" name="example3" size="20" maxlength="15">

type=”password”：定義密碼框恭陡；
name：定義密碼框的名稱蹬音，要保證數(shù)據(jù)的準確采集，必須定義一個獨一無二的名稱休玩；
size：定義文本框的寬度著淆，單位是單個字符寬度；
maxlength：定義最多輸入的字符數(shù)拴疤；

隱藏域
隱藏域是用來收集或發(fā)送信息的不可見元素永部，對于網(wǎng)頁的訪問者來說，隱藏域是看不見的呐矾。當表單被提交時苔埋，隱藏域就會將信息用你設(shè)置時定義的名稱和值發(fā)送到服務(wù)器上。代碼格式如下：

<input type="hidden" name="..." value="...">
<input type="hidden" name="ExPws" value="dd">

type=”hidden”：定義隱藏域蜒犯；
value：定義隱藏域的值组橄；

復(fù)選框
復(fù)選框允許在待選項中選中一項以上的選項。每個復(fù)選框都是一個獨立的元素罚随，都必須有一個唯一的名稱玉工。代碼如下：

<input type="checkbox" name="..." value="...">
<input type="checkbox" name="yesky" value="09">xxxcom
<input type="checkbox" name="Chinabyte" value="08">

單選框

<input type="radio" name="..." value="...">
<input type="radio" name="myFavor" value="1">
<input type="radio" name="myFavor" value="2">

文件上傳框
有時候，需要用戶上傳自己的文件毫炉，文件上傳框看上去和其它文本域差不多瓮栗，只是它還包含了一個瀏覽按鈕削罩。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件瞄勾。
注：在使用文件域以前，請先確定你的服務(wù)器是否允許匿名上傳文件弥激。表單標簽中必須設(shè)置ENCTYPE=”multipart/form-data”來確保文件被正確編碼进陡；另外，表單的傳送方式必須設(shè)置成POST微服。
代碼格式如下：

<input type="file" name="..." size="15" maxlength="100">
<input type="file" name="myfile" size="15" maxlength="100">

type=”file”：定義文件上傳框趾疚；
size：定義文件上傳框的寬度，單位是單個字符寬度；
maxlength：定義最多輸入的字符數(shù)糙麦；

下拉選擇框
下拉選擇框允許你在一個有限的空間設(shè)置多種選項辛孵。示例如下：

<select name="mySel" size="1">
  <option value="1" selected>Try one</option>
  <option value="d2">Try two</option>
</select>

size：定義下拉選擇框的行數(shù)；
name：定義下拉選擇框的名稱赡磅；
multiple：表示可以多選魄缚，如果不設(shè)置本屬性，那么只能單選焚廊；
value：定義選擇項的值冶匹；
selected：表示默認已經(jīng)選擇本選項；

關(guān)于 HTML <input> 標簽
關(guān)于細說 Form (表單)