FORM
HTML的重頭戲
from標簽 的三個最重要的屬性action enctype method
action:發送form數據到目的地址
本身可以帶參數表達式,如:
action = "b.jsp?id=5&name=ABC"
注意,參數表達式是用&隔開,而且參數沒有type,就是說id=5,name=ABC,中的5,ABC沒有類型之分。
method:就是發送,一般用的是發送(POST),因為get這個方法接收參數會地址欄顯示傳送的數據,換句話說就是不保密。另外好像上面action中的id=5,name=ABC,不會傳送。(有待進一步證實)
enctype:拆開來看就是encode type,就是重編碼,明文變密文,具體的算法不用關心,只要關心它可以讓人看不懂就是了。它的三個屬性值是:
1. application/x-www-form-urlencoded -- 窗體數據被編碼為名稱/值對.這是標準的編碼格式.
2. multipart/form-data -- 窗體數據被編碼為一條消息,頁上的每個控件對應消息中的一個部分.
3. text/plain -- 窗體數據以純文本形式進行編碼,其中不含任何控件或格式字符.
下面介紹form標簽內常用的標簽:
input 標簽 -- 代表HTML表單的單行輸入域
input標簽是單獨出現的,<input />
屬性.
Common -- 一般屬性
type -- 代表一個輸入域的顯示方式(分為輸入型,選擇型,點擊型)
maxlength -- 輸入域最多可以輸入文字的長度
src -- 當使用圖片來表示按鈕時,代表圖片的位置(URI)
alt -- 代表表單的提示文字,當鼠標停留時
size -- 輸入域的長度
value -- 輸入域的值
accesskey -- 表單的快捷鍵訪問方式
checked -- 如果是選擇型的輸入域,代表已經被選擇
disabled -- 輸入域無法獲得焦點,無法選擇,以灰色顯示,在表單中不起任何作用
readonly -- 輸入域可以選擇,但是無法修改
tabindex -- 輸入域的"tab"鍵遍歷順序
input---type 屬性 -- 代表HTML表單,單行輸入域(框)的表現方式
type 屬性取值:
text -- 文字輸入域(輸入型)
password -- 也是文字輸入域,但是輸入的文字以密碼符號'*'顯示(輸入型)
file -- 可以輸入一個文件路徑(輸入型)
checkbox -- 復選框.可以選擇零個或多個(選擇型)
radio -- 單選框.只可以選擇一個而且必須選擇一個(選擇型)
hidden -- 代表隱藏域,可以傳送一些隱藏的信息到服務器
button -- 按鈕(點擊型)
image -- 使用圖片來顯示按鈕,使用src屬性指定圖像的位置(就像img標簽的src屬性)(點擊型)
submit -- 提交按鈕,表單填寫完畢可以提交,把信息傳送到服務器.可以使用value屬性來顯示按鈕上的文字(點擊型)
reset -- 重置按鈕,可以把表單中的信息清空(點擊型)
說明
輸入型包括text,password,file
選擇型包括checkbox,radio
點擊型包括button,image,submin,reset
textarea 標簽 -- 代表HTML表單多行輸入域
textarea標簽是成對出現的,以<textarea>開始,以</textarea>結束
屬性:
Common -- 一般屬性
cols -- 多行輸入域的列數
rows -- 多行輸入域的行數
alt -- 代表表單的提示文字,當鼠標停留時
accesskey -- 表單的快捷鍵訪問方式
disabled -- 輸入域無法獲得焦點,無法選擇,以灰色顯示,在表單中不起任何作用
readonly -- 輸入域可以選擇,但是無法修改
tabindex -- 輸入域,使用"tab"鍵的遍歷順序
select 標簽 -- 選擇列表標簽
select標簽是成對出現的,以<select>開始,以</select>結束
此標簽中的每對option標簽代表一個選擇項
屬性:
Common -- 一般屬性
size -- 選擇域的高度
multiple -- 可以有多個選擇
disabled -- 輸入框無法獲得焦點,無法選擇,以灰色顯示,在表單中不起任何作用
tabindex -- 使用"tab"鍵的遍歷順序
option 標簽 -- 代表選擇列表的一個選擇項
option標簽是成對出現的,以<option>開始,以</option>結束
屬性:
Common -- 一般屬性
label -- 說明選擇項
value -- 說明選擇項的值
selected -- 此選擇項已經被選擇
disabled -- 輸入框無法獲得焦點,無法選擇,以灰色顯示,在表單中不起任何作用
tabindex -- 使用"tab"鍵的遍歷順序
optgroup 標簽 -- 代表分組選擇項的類別名(此類別名不能選擇)
optgroup標簽是成對出現的,以<optgroup>開始,以</optgroup>結束
屬性:
Common -- 一般屬性
label -- 說明選擇項
說明,在optgroup標簽中最好帶著label屬性,因為你肯定不想別人選擇的是什么分類都不知道。
label 標簽
提示表單的含義(標簽說明)
label標簽是成對出現的,以<label>開始,以</label>結束
兩個label之間的內容,是要顯示的文字
屬性:
Common -- 一般屬性
for -- 與此label描述的表單的id
accesskey -- 表單的快捷鍵訪問方式
說明
可以使用label標簽和for屬性連接一個表單元素
標簽可以被某些可視化瀏覽器渲染成可以點擊的,點擊后光標會顯示在關聯的表單元素內.
label標簽是標準網頁設計中重要的組成部分,起到了對表單進行語義化的作用.
現在開始表單分組
如果一個頁面的表單項太多,我們最好把它們分組顯示,就像使用p標簽分開段落一樣,可以使用fieldset與legend標簽對表單內容分組.fieldset 標簽 -- 對表單進行分組
fieldset標簽是成對出現的,以<fieldset>開始,以</fieldset>結束
一個表單可以有多個<fieldset>,每對<fieldset>為一組,每組內容的描述可以使用legend標簽說明
屬性:
Common -- 一般屬性
說明
legend的內容一般顯示在左上角
通過CSS可以改變fieldset邊框顯示方式,也可以改變legend的顯示方式.
legend 標簽 -- 對表單的每組內容進行說明
legend標簽是成對出現的,以<legend>開始,以</legend>結束
此標簽在<fieldset>標簽內
屬性:
Common -- 一般屬性
accesskey -- 表單的快捷鍵訪問方式。
表單的學習基本上是要多練習,一些平時很少用的標簽以及屬性在關鍵時刻可以幫你節省不少的時間和開發難度。