1. 程式人生 > >HTML 5 的基礎知識2

HTML 5 的基礎知識2

HTML 5 原有的表單及表單控制元件

form元素
該元素用於生成輸入表單,該元素不會生成視覺化部分。
該元素可以指定 id,style,class,等核心屬性,還可以指定 onclick 等事件屬性。除此之外還可以指定以下屬性。
action:指定當但單擊表格內的 確認 按鈕時,該表單被提交到那個地址。該屬性即可指定一個絕對地址,也可指定一個相對的地址。該屬性必填。
method:指定提交表單時傳送何種請求,該屬性可為get或post,分別用於傳送GET或POST請求。該屬性必填。
enctype:指定對錶單內容進行編碼所使用的字符集。
name:name
input 元素


該元素時表單控制元件元素中功能最豐富的,如下幾種輸入元素都是通過該元素生成的。
單行文字框:type屬性為text
密碼輸入框:type屬性為password
隱祕域:type屬性為hidden
單選框:type屬性為radio
複選框:type屬性為CheckBox
影象域:type屬性為image
檔案上傳域:type屬性為file
提交,重設,無動作按鈕:type屬性分別是 submit ,reset,button。
使用 label 定義標籤
該元素用於在表單元素中定義標籤,這些標籤可以對其他可生成請求引數的表單控制元件元素(如單行文字框,密碼框等)進行說明,該元素不需要生成請求引數,因此不要為該元素指定 value屬性值。
該元素可以指定 id,style,class,等核心屬性,還可以指定 onclick 等事件屬性,除此之外,還可以指定一個for屬性,該屬性指定該標籤與那個表單控制元件關聯。
隱式使用for屬性:指定該元素的for屬性值為所關聯表單控制元件的 id 屬性值。
顯式關聯:將普通文字,表單控制元件一起放在該元素的內部。
使用button 定義按鈕

該元素用於定義一個按鈕,除了id,style, class 等核心屬性外還有以下屬性
disabled:指定是否禁用此按鈕。該屬性只能是 disabled 或者省略屬性值。
name:指定該按鈕的唯一名稱。該屬性應與id 保持一致。
type:只能是 button reset submit
value:指定該按鈕的初始值。
fieldset與 legend 元素
fieldset 元素可用與對錶單內表單元素進行分類,該元素除了可指定一些通用元素外,還可以指定以下幾個
name:名稱
form:該屬性的屬性值必須是一個有效的form/元素的id ,用於指定該form/元素屬於指定表單。
disabled:該元素用於禁用該組表單元素
legend(附加內容)legend
formaction屬性

表單中出現 註冊 和 登入 兩個按鈕時。用該屬性處理
autofocus屬性
非常常用的屬性,當為某個表單控制元件增加時該屬性後,瀏覽器開啟該頁面時該元件就會自動獲得焦點。
list屬性
datalist元素相當於一個 “看不見” 的 select 元素 ,用於生成一個隱祕的下拉選單。 datalist 所能包含的子元素與select 元素完全相同 。該元素用於與指定的 list 屬性的 input元素結合使用。當雙擊指定 list 屬性的文字框時,該文字框會顯示 datalist 生成的下拉選單。
autocompete 屬性
該屬性用於設定表單是否支援自動完成功能。
on: 開啟
off:關閉
功能豐富的input 功能
color:生成一個顏色選擇器。
date:生成一個日期選擇器。
time:生成一個時間選擇器。
datetime-local:生成一個本地日期時間選擇器。
week:生成一個第幾周文本框。
month:生成一個月份選擇器。
min;指定日期 時間最小值
max:最大值
step:指定日期,時間的步長。
email:E-mail
tel:電話號碼
url:生成一個URL輸入框
number:數字
search:專門用於輸入搜尋關鍵字的文字框。
使用 audio 和 video 元素
audio src=“地址 /名字” controls /audio
video src=“地址、名字” controls /video