表單:
是網頁上的一個特定的區域,這個區域是由一對<form>標記定義的。
定義:<form>
<input>元素
</form>
(form 元素是塊級元素,其前後會產生折行。)
表單能夠包含 input 元素,比如文本字段、複選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用於向服務器傳輸數據。
表單的屬性:
action屬性:規定提交表單時,向何處發送數據
語法:<form action="URL">...</form>
name屬性:規定表單的名稱。
form 元素的 name 屬性提供了一種在腳本中引用表單的方法。
語法:<form name="form_name">...</form>
method屬性:規定如何發送表單數據(表單數據發送到action所規定的頁面)
可取值爲:get和post
語法:<form method="method">...</form>
enctype屬性:規定表單提交之前,如何對其進行編碼
語法:<form enctype="value">...</form>
enctype的值:
值 | 描述 |
---|---|
application/x-www-form-urlencoded | 在發送前編碼所有字符(默認) {在發送到服務器之前,所有字符都會進行編碼(空格轉換爲 "+" 加號,特殊符號轉換爲 ASCII HEX 值)} |
multipart/form-data | 不對字符編碼。 在使用包含文件上傳控件的表單時,必須使用該值。 |
text/plain | 空格轉換爲 "+" 加號,但不對特殊字符編碼。 |
target屬性:規定在何處打開 action URL。
語法:<form target="value">...</form>
值 | 描述 |
---|---|
_blank | 在新窗口中打開。 |
_self | 默認。在相同的框架中打開。 |
_parent | 在父框架集中打開。 |
_top | 在整個窗口中打開。 |
framename | 在指定的框架中打開。 |
accept-charset屬性:規定服務器用哪種字符集處理表單數據。
常用值:
UTF-8 - Unicode 字符編碼
ISO-8859-1 - 拉丁字母表的字符編碼
gb2312 - 簡體中文字符集
autocomplete屬性:規定表單是否啓用自動完成功能。(是HTML5的新增屬性)
取值:on/off;
自動完成允許瀏覽器預測對字段的輸入。
當用戶在字段開始鍵入時,瀏覽器基於之前鍵入過的值,應該顯示出在字段
中填寫的選項。
注:autocomplete 屬性適用於 <form>,
以及下面的 <input> 類型:
text, search, url, telephone, email, password, datepickers, range 以及 color。
novalidate 屬性:規定當提交表單時不對其進行驗證。(是HTML5的新增屬性)
表單中的input標記:
語法:<form>
<input name="filed_name" type="type_name">
</form>
input中的屬性:
accept屬性:accept 屬性只能與 <input type="file"> 配合使用。
它規定能夠通過文件上傳進行提交的文件類型。
儘量避免使用該屬性,應該在服務器上驗證文件上傳。
align屬性:規定圖像輸入的對齊方式,與<input type="image">配合使用。
避免使用該屬性;用css樣式代替。
只有left和right值被所有瀏覽器支持。
alt屬性:爲圖像輸入規定替代文本,alt 屬性只能與 <input type="image"> 配合使用。
註釋:alt 屬性不是必需的屬性,但是當輸入類型爲 image 時,仍然應該設置該屬性。
如果不使用該屬性,就有可能對文本瀏覽器或非可視的瀏覽器造成使用障礙。
checked屬性:規定在頁面加載時被預先選中的input元素。
與<input type="checkbox"> 與<input type="radio"> 配合使用。
這個值可以在頁面加載後,用Javascript動態指定。
disable屬性:禁用input元素。
注:不能與<input type="hidden">一起使用。
maxlength 屬性:規定輸入字段的最大長度,以字符個數計。
與 <input type="text"> 或 <input type="password"> 配合使用。
name屬性:規定input的名稱
size屬性:規定輸入框的寬度
用CSS代替:<input style="width:100px" />
src屬性:規定圖片的URL,與<input type="image">配合使用。
value屬性:爲 input 元素設定值。
注:<input type="checkbox"> 和 <input type="radio"> 必須設置 value 屬性。
注:value 屬性無法與 <input type="file"> 一同使用。
type屬性:
值 | 描述 |
---|---|
button | 定義可點擊按鈕(多數情況下,用於通過 JavaScript 啓動腳本)。 |
checkbox | 定義複選框。 |
file | 定義輸入字段和 "瀏覽"按鈕,供文件上傳。 |
hidden | 定義隱藏的輸入字段。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼字段。該字段中的字符被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會清除表單中的所有數據。 |
submit | 定義提交按鈕。提交按鈕會把表單數據發送到服務器。 |
text | 定義單行的輸入字段,用戶可在其中輸入文本。默認寬度爲 20 個字符。 |
HTML5中的input屬性:
autocomplete:規定是否使用輸入字段的自動完成功能。
autofocus屬性:在頁面加載時獲取焦點。
form屬性:規定input元素所屬的一個或者多個表單
formaction屬性:覆蓋表單的 action 屬性。
formenctype屬性:覆蓋表單的 enctype 屬性。
formmethod 屬性:覆蓋表單的 method 屬性。
formnovalidate屬性:覆蓋表單的 novalidate 屬性。
如果使用該屬性,則提交表單時不進行驗證。
formtarget屬性: 覆蓋表單的 target 屬性。
height和width屬性:定義input元素寬高,只是適用於type=image
list屬性:引用數據列表,其中包含輸入字段的預定義選項。
max 和 min 屬性:規定輸入字段所允許的最大值和最小值。
提示:max 屬性與 min 屬性配合使用,可創建合法值範圍。
注:max 和 min 屬性適用於以下 <input> 類型:
number, range, date, datetime, datetime-local, month, time 以及 week。
可以配合使用step屬性(規定輸入字的的合法數字間隔)
multiple屬性:允許選擇多個值,適用於type="file"
pattern屬性:規定輸入字段的值的模式或格式。
placeholder 屬性:提供可描述輸入字段預期值的提示信息(hint)。
readonly屬性:規定輸入字段爲只讀。
required屬性:指示輸入字段的值是必需的。
表單中的textarea標記:
屬性 | 值 | 描述 |
---|---|---|
autofocus | autofocus | 規定在頁面加載後文本區域自動獲得焦點。 |
cols | number | 規定文本區內的可見寬度。 |
disabled | disabled | 規定禁用該文本區。 |
form | form_id | 規定文本區域所屬的一個或多個表單。 |
maxlength | number | 規定文本區域的最大字符數。 |
name | name_of_textarea | 規定文本區的名稱。 |
placeholder | text | 規定描述文本區域預期值的簡短提示。 |
readonly | readonly | 規定文本區爲只讀。 |
required | required | 規定文本區域是必填的。 |
rows | number | 規定文本區內的可見行數。 |
wrap |
| 規定當在表單中提交時,文本區域中的文本如何換行。。 |
表單中的select標記(option標記:)
屬性 | 值 | 描述 |
---|---|---|
autofocus | autofocus | 規定在頁面加載後文本區域自動獲得焦點。 |
disabled | disabled | 規定禁用該下拉列表。 |
form | form_id | 規定文本區域所屬的一個或多個表單。 |
multiple | multiple | 規定可選擇多個選項。 |
name | name | 規定下拉列表的名稱。 |
required | required | 規定文本區域是必填的。 |
size | number | 規定下拉列表中可見選項的數目。 |
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。