form元素
#
除此之外還包括action(指定當單機表內確定按鈕時,該表單跳到該位址)、method(指定提交表單時發送何種類型請求,值可以為get或post )、enctype(指定對錶達內容進行編碼所使用的字元集)、name(指定表單的唯一名稱)、target(指定個適用哪種方式開啟目標URL)。 【建議:HTML影片教學】
input元素
元素是表單控制項元素中功能最豐富的,以下是幾種input元素生產的:
密碼輸入框:
1 |
|
隱藏域:
1 |
|
單選框
1 |
|
複選框
1 |
|
圖片網域
1 |
|
檔案上傳網域
1 |
|
#提交按鈕
1 |
|
重設按鈕
1 |
|
無動作按鈕
1 |
|
的一些焦點屬性
#checked:設定單選方塊、複選框初始是否處於被選取狀態。
disabled:設定首次載入時用此元素。
maxlength:此屬性是一個數字,指定在文字方塊中所允許輸入的最大數字。
readonly:指定文字方塊內的值不允許使用者修改(可使用js腳本修改)。此屬性是支援boolean值的屬性,表示該元素的值是唯讀的。
size:此屬性值是一個數字,指定鈣元素的寬度。
src:指定影像域所顯示影像的URL.
width:指定影像域所顯示影像的寬度。
heigeht:指定影像域所顯示影像的高度。
label元素可以指定id、class、style等核心屬性,也可以指定onclick等事件屬性。除此之外,還可以指定一個for屬性,該屬性指定該標籤與該表單控制項關聯。用法為for="",引號內為相關控制項的id。
disabled:指定是否停用此按鈕。
name:制定該按鈕的唯一名稱,該屬性名稱應與id一致。
type:指定該按鈕屬於那種按鈕,該屬性值只能是button、reset或submit其中之一。
value:指定該按鈕的初始值。可以透過js腳本進行更改。
除此之外,
disabled:設定停用該列錶框和下拉式選單。該屬性的值只能是disabled或省略屬性值。
multiple:設定該列錶框和下拉式選單是否允許多重選擇。一旦設定允許多選
在
:用於定義清單項目或選單項目。該元素裡只能包含文字內容作為該選項的文字。
:用於定義清單項目或選單線組。該元素只能包含
除此之外還可以定義以下幾種元素。
disabled:指定停用該選項,該屬性的值只能為disabled。
selected:指定該流標箱初始狀態是否處於被選取狀態。該屬性的值只能是selected。
value:指定該選項對應的請求參數值。
label:指定該選項組的標籤。這個屬性必填。
disabled:設定停用該選項群組裡的所有選項。該屬性值只能是disabled或省略該屬性值。
cols:指定文字域的寬度,屬於必填項。
rows:指定文字的高度,屬於必填項。
disabled:指定停用該文字域。該屬性值只能為disabled。
readonly:指定文字域只讀。該屬性值只能為readonly。
maxlength:設定該多行文字域最多可以輸入的字元數。
wrap:指定多行文字域是否要新增換行符號。此屬性支援soft和hard兩個屬性值。如果將屬性值設為hard,則必須指定cols屬性,如果輸入的字元超過了cols指定寬度導致文字換行,那麼提交該表單時該多行文字域將會自動在換行處新增換行符。
name:指定該
html5為所有表單控制項都新增了form屬性,因此在頁面上定義表單控制項時更加靈活,可以隨意的防止、排列表單控件,這位頁面佈局提供了更大的靈活性。
html5為處理同一表單中同時包含註冊、登入兩個按鈕的問題,對於sumit、reset、image都可以指定formaction,該屬性即可動態的讓表單提交到不同的URL。
formxxxx屬性類似formaction屬性,對於sumit、reset、image都可以指定formenctype、formmethod、formtarget等屬性,其中:
#formenctype :此屬性可以讓按鈕動態的變成enctype屬性。
formmethod:此屬性可以讓按鈕動態的變成method屬性。
formtarget:此屬性可以讓按鈕動態的變成target屬性。
這是一個非常常用的屬性,功能就是在開啟網頁的時候自動聚焦到對應的位置。用法為加入對應的程式碼中,如:<input type="password" name="name" autofocus />
該程式碼中autofocus的作用就是在開啟網頁時自動聚焦到該密碼框。
這個屬性也非常的常用,作用就是在使用者為輸入資料的文字方塊中給予對應的提示,如:<input type="text " name="username" palceholder="請輸入使用者名稱" />;
該程式碼中palceholder的作用就是在使用者未在文字方塊中輸入資料是顯示請輸入使用者名稱,使頁面更加的人性化。
該屬性也非常的實用,在html5規範之前html表單屬性是沒有有類似ComboBox的元件的。 html5的list屬性剛好彌補了這個不足,list屬性的值應該是一個
此輸贏用於控制在點擊文字方塊時是否自動顯示先前的填寫歷史記錄,瀏覽器預設啟動該功能,該屬性支援兩個屬性值:
on:開啟autocomplete,文字方塊下方會顯示下拉式選單。
off:關閉autocomplete,文字方塊下方不會顯示下拉式選單。
html5為
表單元素與
html5為單行文字方塊和多行文字域新增了一個selectionDirection只讀屬性,該屬性用於傳回文字方塊內的文字方向。
HTML5為元素新增瞭以下幾種可能的類型。
color:產生一個顏色選擇器,value的值為形如#xxxxxx的顏色值。
date:產生一個日期選擇器。
time:產生一個時間選擇器。
datetime-local:產生一個本機日期、時間選擇器。
week:產生一個供使用者選擇第幾週的文字方塊。
month:生活猜呢個一個月份選擇器。
max:指定日期時間的最大值。
step:指定日期、時間的步長。
email:產生一個E-mail輸入框,瀏覽器會自動檢查輸入的E-mai是否符合格式。
multiple:此屬性支援boolean類型,如果指定了該屬性值,則表示允許輸入多個E-mail位址,用英文逗號隔開。
tel:產生一個輸入電話號碼的文字方塊。
ur:產生一個輸入URL的文字框,瀏覽器會自動檢查輸入的URL是否符合格式。
number:產生一個只能輸入數字的文字方塊。
min:指定數值的最小值。
max:指定數值的最大值。
step:指定數字的步長。
range:產生一個拖曳條,還會有如下的屬性:
min:該拖曳條的最小值。
max:該拖曳條的最大值。
step:指定拖曳條的步長。
search:產生一個專門用來輸入搜尋關鍵字的文字方塊。
HTML5新增了
for:該屬性煞車該元素將會顯示那個或那些元素的值。
HTML5也新增了
value:指定計數儀表的目前值。預設為0.
min:指定計數儀表的最小值,預設為0.
max:指定計數儀表的最大值。預設為1.
low:指定計數儀表指定範圍的最小值,必須大於等於min的值。
high:指定計數儀表指定範圍的最大值,必須小於等於max的值。
optimum:指定個計數儀表有效範圍的最佳值。
HTML5為表單控制項新增瞭以下幾種校驗屬性。
required:此屬性指定該表單控制項必須填入。
pattern:此屬性指定該表單控制項的值必須符合指定的正規表示式。
min、max、step:這三個屬性只對數值類型、日期類型的元素有效,這個元素必須在min~max之間,並且符合step步長。
如果表單對i昂呼叫checkValidity()方法傳回true,則表示該表單內的所有表單元素的輸入有效
如果表單物件呼叫checkValidity()方法傳回true,則表示該表達詶的所有表單元素都通過輸入檢定。
為
為submit、button元素設定formnovalidate屬性,當使用者透過該提交按鈕提交表單時,該表單將關閉校驗功能。
以上是全方位整理與form表單相關的元素!的詳細內容。更多資訊請關注PHP中文網其他相關文章!