form元素

form元素 (form)，為「區塊」元素，定義表單的全體。form元素本身無法輸入資料，須藉由元素內的input、select、textarea等元素取得資料，資料取得後的資料傳送則是使用action屬性定義。

語法:
<form 屬性 = "屬性值">標籤內容</form>
版本:
HTML4.01(S,T,F) XHTML1.0(S,T,F) XHTML1.1 *1)
內含元素:
「區塊」元素(除form元素)*2)、script元素、「線內」元素(限T、F)、TEXT(限T、F)*3)
屬性:
accept、accept-charset、action、enctype、method、name、target屬性*4)、事件屬性、通用屬性(class、dir、id、style、title、lang、 xml:lang)
Sample Code
<form action="upload_data.cgi" method="post"
accept="image/gif,image/jpeg">
......
</form>
Output

*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。 *2)在XHTML，不能包含自己本身的form元素。 *3)無法直接放入「線內」元素、TEXT的版本，請先放入P、div等「區塊」元素(除form元素)內。 *4)刪除線 → W3C非推薦屬性，建議是用CSS等取代 ，粗體字 → 必要屬性，不可省略。
屬性 適用元素 屬性值 說明
accept form MIME Type 設定當input元素的type屬性值為"file"時，伺服器接受的檔案是哪一種MIME Type。
例) accept = "image/gif,image/jpeg,image/png"
accept-charset form 文字碼 設定傳送對象接收到的資料的文字碼。複數指定時，使用(,)區隔。
accept-charset = "Big5,UTF-8"
action form URI 設定傳送對象URI。一般主要指定對象為CGI程式的URI，指定E-Mail亦可。
例)action = "upload.cgi"，action = "mailto:xxx@xxx.xxx"
enctype form application/x-www-form-urlencoded
multipart/form-data 		method的屬性值"post"時，設定傳送資料的MIME Type。
application/x-www-form-urlencoded → 百分比(%)和英數文字組成的URI Encode形式傳送資料。初期值。
multipart/form-data → multipart(附加書類)形式傳送資料。
method form get(Default)
post 		設定HTTP(Web伺服器和UA間的通訊規格)資料傳送的方式。
get → action屬性所指定的URI加上資料內容後傳送的方式
post → 只傳送資料本身(資料量大時使用)
name form 文字列 設定文件中的書籤連結名稱。半形文字大小寫無區別。在XHTML1.1版本將廢除，建議name和id兩者都設。
例) <h1><a name = "a" id = "a">a</a></h1>
target a、area、base、form、link _blank
_self
_parent
_top
任意Frame名		 設定顯示連結對象的方法。方法有:
_blank→開新視窗
_self→現有視窗
_top→從Frame內連結情形，解除Frame至視窗的頂端
_parent→從Frame內連結情形，解除Frame顯示全體

input元素

input元素 (form input)，為「線內」元素，由輸入欄位、送信/取消等各種按鈕、選擇鍵等Form的控制元件，取得form輸入的資訊。

語法:
<input 屬性 = "屬性值" />
版本:
HTML4.01(F)、XHTML1.0(F) *1)
內含元素:
-
屬性:
accept、align、alt、checked、disabled、ismap、maxlength、name、readonly、size、src、type、usemap、value屬性*2)、事件屬性、通用屬性(accesskey、dir、class、id、tabindex、style、title、xml:lang)
Sample Code
<form name="sample" action="form.html" >
<input type="button" value=" 按鍵"/><br/>
<input type="checkbox" name = "From" value="ezto"/>ezto
<input type="checkbox" name = "From" value="chou-it"/>chou-it<br/>
<input type="file" /><br/>
<input type="hidden" />隱藏看不見<br/>
<input type="image" src="../../../../images/mail.gif"/><br/>
輸入密碼: <input type="password" /><br/>
<input type="radio" name = "opinion" value="good" />非常好
<input type="radio" name = "opinion" value="bed"/>非常不好<br/>
<input type="reset" value="取消"/>
<input type="submit" value="送出"/><br/>
姓名<input type="text"/>
</form>
Output

ezto chou-it

隱藏看不見

輸入密碼:
非常好 非常不好

姓名:
*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。 *2)刪除線 → W3C非推薦屬性，建議是用CSS等取代 ，粗體字 → 必要屬性，不可省略。
屬性 適用元素 屬性值 說明
accept form、input MIME Type 設定當input元素的type屬性值為"file"時，伺服器接受的檔案是哪一種MIME Type。
例) accept = "image/gif,image/jpeg,image/png"
align input left
right
top
middle
bottom 		type屬性指定為"image"時，設定圖像和之後的文字的對齊方式。align為非推薦元素，建議使用CSS的float、margin屬性取代。
left → 圖像靠左，Text在圖像右邊。
right → 圖像靠右，Text在圖像左邊。
top → 1行文字和圖像上方對齊。
middle → 1行文字和圖像垂直中央對齊。
bottom → 1行文字和圖像下方對齊。
readonly input、textarea readonly 設定只可以讀取。無法選取欄位，輸入和修改內容。和disabled屬性不同，所設定value值會被傳送。
例)readonly = "readonly"
size input 整數 設定輸入的欄寬。type屬性值為"password"、"text"時，等於設定文字數。
例)size= "10"
src input URI 當type屬性值為"image"時，設定圖像的URI位置。
例)src= "images/input.jpg"
type input button
checkbox
file
hidden
image
password
radio
reset
submit
text(default) 		當input欄位的形態，初期值為"text"。
button → 通用按鈕
checkbox → 複選核取方塊
file → 檔案選取欄位
hidden → 隱藏欄位
image → 圖片傳送欄位
password → 密碼輸入欄位
radio → 單選按鈕
reset → 重設按鈕
submit → 傳送按鈕
text(default) → 單行輸入欄位
usemap input image map名稱 當type屬性值為"image"時，設定和map元素作成的image map的關聯。image map名稱前須加(#)，利用usemap = "#名稱"形式指定map元素的id值或name值。
例)usemap = "#map"
XHTML1.1 不需加上hash(#)，如usemap = "map"。
widows的IE6、7，Safari沒有對應此功能。
value input 文字列 設定輸入的初期值。TYPE屬性值為"checkbox"、"radio"時，可以省略。
例)<input type = "text" value= "請輸入姓名">

textarea元素

textarea元素 (multi-line text field)，為「線內」元素，製作複數行的文字輸入欄位。輸入的行數可以使用cols屬性來指定，輸入的列數可以使用rows屬性來指定(這兩種屬性都必須指定)。但是，textarea元素沒有像input元素的 maxlength屬性，可以去限制輸入的字數。當輸入的字數超過所設定的範圍時，用戶端的瀏覽器會自動產生卷軸。避免系統發生問題，建議在CGI、Javacript等程式上去限制數字。資料傳送時，name屬性的值和輸入的文字會被傳送。

語法:
<textarea 屬性 = "屬性值" >標籤內容~ </textarea >
版本:
HTML4.01(S,T,F) XHTML1.0(S,T,F) XHTML1.1 *1)
內含元素:
Text
屬性:
cols、disabled、name、readonly、rows、wrap屬性*2)、事件屬性、通用屬性(accesskey、tabindex、class、id、style、title)
Sample Code
<form action="upload_data.cgi" method="post"
accept="image/gif,image/jpeg">
<textarea cols="20" rows="2" name="advise">
請輸入文字，最多40個字。
</textarea>
</form>
Output

*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。 *2)刪除線 → W3C非推薦屬性，建議是用CSS等取代 ，粗體字 → 必要屬性，不可省略。
屬性 適用元素 屬性值 說明
cols textarea 整數(pixels) 設定輸入文字的欄寬(1行可輸入的文字數)。並不代表輸入的文字數有限制，超過字數時會自動產生捲軸或換行。
例) cols = "20"
disabled button、input、optgroup、option、select、texterea disabled 禁止輸入欄位的輸入和選擇。被禁止的輸入欄位的值不會被傳送。
例) disabled= "disabled"
name textarea 文字列 設定輸入欄位的名稱。名稱的半形大小寫沒有區別。
例) name= "area"
readonly input、textarea readonly 設定只可以讀取。無法選取欄位，輸入和修改內容。和disabled屬性不同，所設定value值會被傳送。
例)readonly = "readonly"
rows textarea 整數(pixels) 設定輸入欄位的高度(表示的行數)。並不代表輸入的文字數有限制，超過字數時會自動產生捲軸。
例) rows = "20"
wrap textarea off
soft(Default)
hard 		設定輸入欄位中的資料是否換行。
off → 不換行。實際傳送輸入內容，含強制改行符號。
soft → 換行。實際傳送輸入內容，含強制改行符號，不含自動換行符號。
hard → 換行。實際傳送輸入內容，含自動換行和強制換行符號(%OD%OA)。

select元素

select元素 (option selector)，為「線內」元素，製作選單。使用option元素定義選單的項目，1個option指定1個選項，亦可以使用optfroup元素將其群組化。想要有複數選項可以加入multiple屬性。資料傳送時，select元素的name屬性值(被選項)、option元素的value屬性值會被傳送。size屬性可以指定顯示選單的行數

語法:
<select 屬性 = "屬性值" >標籤內容~ </select>
版本:
HTML4.01(S,T,F) XHTML1.0(S,T,F) XHTML1.1 *1)
內含元素:
1個以上的option元素、optgroup元素
屬性:
disabled、multiple、name、size、wrap屬性*2)、事件屬性、通用屬性(tabindex、class、id、style、title)
Sample Code
<form action="upload_data.cgi" method="post"
accept="image/gif,image/jpeg">
<select name="dictionery" size="9">
<optgroup label="Web標準開發用辭典">
<option value="01_01">HTML辭典</option>
<option value="01_02">CSS辭典</option>
<option value="01_03">javascript辭典</option>
</optgroup>
<optgroup label="OS指令辭典">
<option value="02_01">MS DOS辭典</option>
<option value="02_02">Linux辭典</option>
<option value="02_03">Unix辭典</option>
</optgroup>
</select>
</form>
Output

*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。 *2)刪除線 → W3C非推薦屬性，建議是用CSS等取代 ，粗體字 → 必要屬性，不可省略。
屬性 適用元素 屬性值 說明
disabled button、input、optgroup、option、select、texterea disabled 禁止輸入欄位的輸入和選擇。被禁止的輸入欄位的值不會被傳送。
例) disabled= "disabled"
multiple select multiple 允取從選項中複選。Windows環境按下「Ctrl」鍵，滑鼠按下左鍵選取。
例) multiple = "multiple"
name select 文字列 設定Select名稱。傳送資料為name的屬性值加上option元素的value屬性值。
例) 傳送資料欲為MyName = joy情形
<select name ="MyName">
<option value="joy" selected = "selected ">joy</option ></select>
size select 整數 設定選單的高度(行數)。沒有設定時，選項超過2項會自動產生捲軸。

optgroup元素

optgroup元素 (option group)，為select元素的子元素，將選單群組化。群組的名稱，使用label屬性定義。

語法:
<optgroup 屬性 = "屬性值" >標籤內容~ </optgroup>
版本:
HTML4.01(S,T,F) XHTML1.0(S,T,F) XHTML1.1 *1)
內含元素:
1個以上的option元素
屬性:
disabled、label屬性*2)、事件屬性、通用屬性(class、dir、id、lang、xml:lang、style、title)
Sample Code
<form action="upload_data.cgi" method="post"
accept="image/gif,image/jpeg">
<select name="dictionery" size="9">
<optgroup label="Web標準開發用辭典">
<option value="01_01">HTML辭典</option>
<option value="01_02">CSS辭典</option>
<option value="01_03">javascript辭典</option>
</optgroup>
<optgroup label="OS指令辭典">
<option value="02_01">MS DOS辭典</option>
<option value="02_02">Linux辭典</option>
<option value="02_03">Unix辭典</option>
</optgroup>
</form>
Output

*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。 *2)刪除線 → W3C非推薦屬性，建議是用CSS等取代 ，粗體字 → 必要屬性，不可省略。
屬性 適用元素 屬性值 說明
disabled button、input、optgroup、option、select、texterea disabled 禁止輸入欄位的輸入和選擇。被禁止的輸入欄位的值不會被傳送。
例) disabled= "disabled"
label optgroup 文字列 設定選項群組的名稱。

option元素

option元素 (selectable choice option)，為select、optgroup元素的子元素，定義選單的選項。選項的初期值，可以使用selected屬性指定。

語法:
<option屬性 = "屬性值" >標籤內容~ </option>
版本:
HTML4.01(S,T,F) XHTML1.0(S,T,F) XHTML1.1 *1)
內含元素:
Text
屬性:
disabled、label、selected、value屬性*2)、事件屬性、通用屬性(class、dir、id、lang、xml:lang、style、title)
Sample Code
<form action="upload_data.cgi" method="post"
accept="image/gif,image/jpeg">
<select name="dictionery" size="9">
<optgroup label="Web標準開發用辭典">
<option selected="selected" value="01_01">HTML辭典</option>
<option value="01_02">CSS辭典</option>
<option value="01_03">javascript辭典</option>
</optgroup>
<optgroup label="OS指令辭典">
<option value="02_01">MS DOS辭典</option>
<option value="02_02">Linux辭典</option>
<option value="02_03">Unix辭典</option>
</optgroup>
</form>
Output

*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。 *2)刪除線 → W3C非推薦屬性，建議是用CSS等取代 ，粗體字 → 必要屬性，不可省略。
屬性 適用元素 屬性值 說明
disabled button、input、optgroup、option、select、texterea disabled 禁止輸入欄位的輸入和選擇。被禁止的輸入欄位的值不會被傳送。
例) disabled= "disabled"
label optgroup 文字列 設定選項群組的名稱。
selected option selected 設定最初被選擇的選項。避免UA端不正常的動作，建議設定。例) selected= "selected"
value option 文字列 設定選項的值。傳送資料為name的屬性值加上option元素的value屬性值。
例) 傳送資料欲為MyName = joy情形
<select name ="MyName">
<option value="joy" selected = "selected ">joy</option ></select>

button元素

button元素 (push button)，為「線內」(區塊)元素，製作各種按鈕的Form控制元件。資料傳送時，name屬性(資料名)和value屬性(資料值)的值會被傳送。botton元素和input元素的type屬性值為"buttom"的動作雖然是一樣，但是input元素不可以內含任何元素(為空元素)，botton元素則可以內含img等「線內」元素或其他的「區塊」元素、Text。

語法:
<button 屬性 = "屬性值">標籤內容~</button>
版本:
HTML4.01(F)、XHTML1.0(F) *1)
內含元素:
「線內」、「區塊」元素*2)、Text
屬性:
disabled、name、type、value屬性*3)、事件屬性、通用屬性(accesskey、dir、class、id、tabindex、style、title、xml:lang)
Sample Code
<p>會員登錄</p>
<form name="member" action="form.html" >
姓名<input type="text"/><br/>
輸入密碼: <input type="password" /><br/>
<button type="reset" value="取消">取消</button>
<button type="submit" value="送出">送出</button><br/>
</form>
Output

會員登錄

姓名:
密碼:

*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。 *2)不可包含a、button、fieldset、form、iframe、input、isindex、label、select、textarea元素 *3)刪除線 → W3C非推薦屬性，建議是用CSS等取代 ，粗體字 → 必要屬性，不可省略。
屬性 適用元素 屬性值 說明
disabled button、input、optgroup、option、select、texterea disabled 禁止輸入欄位的輸入和選擇。被禁止的輸入欄位的值不會被傳送。
例) disabled= "disabled"
name button 文字列 傳送資料時的資料名稱。傳送資料的內容包含，name屬性指定的資料名稱和value屬性指定的資料值。
type button button
submit
reset		 設定按鍵的種類。
button → 通用按鈕，利用onclick等事件屬性啟動文稿程式(Script)
submit →  傳送輸入或被選擇的資料內容。
reset →   回歸至原先的設定值。
value button 文字列 設定傳送資料的值。傳送資料的內容包含，name屬性指定的資料名稱和value屬性指定的資料值。

label元素

label元素 (form field label text)，為「線內」元素，設定form元素的控制項目的標籤。控制項目的id屬性值必須和label元素的for屬性值一致。滑鼠點label時，焦點會自動移到控制項目的輸入欄位。

語法:
<label 屬性 = "屬性值">標籤內容~</label>
版本:
HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
內含元素:
「線內」元素*2)、Text
屬性:
for屬性*3)、事件屬性、通用屬性(accesskey、dir、class、id、tabindex、style、title、xml:lang)
Sample Code
<p>會員登錄</p>
<form name="member" action="form.html" >
<label for="name">姓名: <input id ="name" type="text"/></label><br/>
<label for="password">密碼: <input id ="password" type="password" /></label><br/>
<button type="reset" value="取消">取消</button>
<button type="submit" value="送出">送出</button><br/>
</form>
Output

會員登錄




*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。 *2)但是不可包含本身label元素 *3)刪除線 → W3C非推薦屬性，建議是用CSS等取代 ，粗體字 → 必要屬性，不可省略。
屬性 適用元素 屬性值 說明
for label ID值 設定input、textarea等Form子元素的ID名稱。滑鼠點選標籤名稱時，會自動移到輸入欄位內。


Copyright(C)2009超技情報開發研究室 All rights reserved.