1. 程式人生 > >html元素 —— 表單元素及實用屬性

html元素 —— 表單元素及實用屬性

一、常用表單元素

<form>:定義供使用者輸入的表單。

<fieldset>:定義域。即輸入區加有文字的邊框。

<legend>:定義域的標題,即邊框上的文字。

<label>:定義一個控制的標籤。如輸入框前的文字,用以關聯使用者的選擇。

<input>:定義輸入域,常用。可設定type屬性,從而具有不同功能。見詳解。

<isindex>:已廢棄,用input標籤代替。

<textarea>:定義文字域(一個多行的輸入控制元件),預設可通過滑鼠拖動調整大小。

<button>:定義一個按鈕。

<optgroup>:定義選項組。選項組內需要放選項<option>。下拉列表<select>通常對應一個選項組,故此標籤不常用。見詳解。

<select>:定義一個選擇列表,即下拉列表。見詳解。

<option>:定義下拉列表中的選項。見詳解。

html5新增:

<datalist>定義填寫一個input時,提示幾個datalist內的多個option用於選擇。可通過input的list特性與此元素作關聯。見詳解。

<output>表示計算的結果。可通過for特性與其它能夠影響運算的元素(如input)作關聯。見詳解。

二、常用表單元素詳解

1、<input>:

常用type屬性:button、checkbox、file、hidden、image、password、checkbox、radio、reset、submit、text。

html5新增type屬性:

1)、search:input會呈現為搜尋框(與text型別的唯一區別在於當滑鼠覆蓋時尾部出現叉號可快速清除輸入的內容)。

2:)、tel:編輯電話號碼的控制元件,提交時換行符會自動從輸入框中去掉(普通的text並不會,故text型別驗證輸入值時一般需要trim()函式處理)。

3)、url:編輯url的控制元件,提交時換行符與首位的空格都將自動去除。

4)、email:可輸入一個郵件地址。

此外,還有color、date、time、datetime、datetime-local、month、week、number、range型別。見MDN 網站。

html5中input新增的個人覺得比較有用的特性:

1)、list:關聯該input對應的<datalist>的id(即datalist在form外建立,通過list屬性關聯即可)。

2)、pattern:一個正則表示式,用於檢查控制元件的值,可作用於text、search、tel、url、email型別的input。

3)、form:一個字串(為關聯的form表單的id),用於表明該input屬於哪個form表單(作用類似list)。

4)、formmethod:表明使用GET還是POST,能覆蓋form表單的method。僅在type為image或submit,且上面的form特性被設定的情況下才能使用。相似的有formtarget特性。

5)、readonly:一個boolean值,表明該input值是否能被使用者修改,可用於資訊展示等頁面。作用於type為hidden、range、color、checkbox、radio、file、button的input將被忽略。

6)、maxlength:type為text、emal、search、password、tel或url(都為文字)時允許輸入的最大字元個數。

7)、autocomplete:瀏覽器是否根據之前提交的輸入情況提示之前輸入的相似資料(即以option形式匹配之前的輸入值),取值on或off,預設on。如在登陸頁面不想顯示上一個登入的使用者名稱等時,可設定為off。

所有html5新增的特性:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-placeholder

例:

<form id="form1" method="POST">
</span><input type="text" name="name" />
</span><input type="submit" value="提交">
</form>
<input type="image" name="number" form="form1" formmethod="GET" />
上面的表單,實際提交時,將會在瀏覽器url看到提交了name="name"的input與name=”number“的input,且提交方式為GET。

2、<select>與<option>:

例:下面的拉下列表預設選中Back,未指定cheacked,則預設選中首個option。

<select name="name">
<option value="Bill">Bill</option>
<option value="Back" cheacked>Back</option>
</select>
三、幾點說明

1、checkbox與radio:複選框與單選框。

一組複選框或一組單選框型別的input,其name應相同,表明為一組。表單提交時,一組內多個選上的複選框,其鍵值對分開傳遞,可從瀏覽器url檢視。一組radio同樣name應相同,只能選擇一個選項,作用等同於下拉列表。