form表單有什么作用?有哪些常用的input 標簽,分別有什么作用?
1.HTML <form> 元素 表示了文檔中的一個區(qū)域,這個區(qū)域包含有交互控制元件,用來向web服務器提交信息,擁有以下屬性。
- action 一個處理這個form信息的程序所在的URL。
- autocomplete 用于指示 input 元素是否能夠擁有一個默認值,這個默認值是由瀏覽器自動補全的。
- enctype 當 method 屬性值為 post 時, enctype 是提交form給服務器的內容的 MIME 類型,可能的取值有三個,application/x-www-form-urlencoded: 如果屬性未指定時的默認值。multipart/form-data: 這個值用于一個 type 屬性設置為 "file" 的 <input> 元素。text/plain (HTML5)。
- method 瀏覽器使用這種 HTTP 方式來提交 form。 可能的值有get和post。
- target 一個名字或者說關鍵字,用來指示在提交表單之后,在哪里顯示收到的回復.
2.常見的Input標簽主要由type屬性控制。
type: 控件類型的顯示。如果這個屬性沒有指定,默認的類型是 text。
type可用的值包括:
- button:無缺省行為按鈕。
- checkbox: 復選框。必須使用 value 屬性定義此控件被提交時的值。使用 checked 屬性指示控件是否被選擇。也可以使用 indeterminate 指示復選框在一種不確定狀態(tài)(大多數平臺上,顯示為一條穿過復選框的水平線)。
- file:此控件可以讓用戶選擇文件。使用 accept 屬性可以定義控件可以選擇的文件類型。
- hidden:不顯示在頁面上的控件,但它的值會被提交到服務器。
- image:圖片提交按鈕。必須使用 src 屬性定義圖片的來源及使用 alt 定義替代文本。還可以使用 height 和 width 屬性以像素為單位定義圖片的大小。
- password:一個值被遮蓋的單行文本字段。使用 maxlength 指定可以輸入的值的最大長度 。
- radio:單選按鈕。必須使用 value 屬性定義此控件被提交時的值。使用checked 必須指示控件是否缺省被選擇。在同一個”單選按鈕組“中,所有單選按鈕的 name 屬性使用同一個值; 一個單選按鈕組中是,同一時間只有一個單選按鈕可以被選擇。
- range:HTML5 用于輸入不精確值控件。
- reset:用于將表單所內容設置為缺省值的按鈕。
- search:HTML5用于輸入搜索字符串的單行文本字段。換行會被從輸入的值中自動移除。
- submit:用于提交表單的按鈕。
- color:HTML5 用于指定顏色的控件。
- date:HTML5 用于輸入日期的控件(年,月,日,不包括時間)。
- datetime:HTML5 基于 UTC 時區(qū)的日期時間輸入控件(時,分,秒及幾分之一秒)。
- datetime-local:HTML5 用于輸入日期時間控件,不包含時區(qū)。
- email:HTML5 用于編輯 e-mail 的字段。 合適的時候可以使用 :valid 和 :invalid CSS 偽類。
- month:HTML5 用于輸入年月的控件,不帶時區(qū)。
- number: HTML5 用于輸入浮點數的控件。
- tel:HTML5 用于輸入電話號碼的控件;換行會被自動從輸入的值中移除A,,but no other syntax is enforced??梢允褂脤傩?,比如 pattern 和 maxlength 來約束控件輸入的值。恰當的時候,可以應用 :valid 和 :invalid CSS 偽類。
- text:單行字段;換行會將自動從輸入的值中移除。
- time:HTML5 用于輸入不含時區(qū)的時間控件。
- url:HTML5 用于編輯URL的字段。 The user may enter a blank or invalid address. 換行會被自動從輸入值中移隊??梢允褂萌纾簆attern 和 maxlength 樣的屬性來約束輸入的值。 恰當的時候使可以應用 :valid 和 :invalid CSS 偽類。
- week:HTML5 用于輸入一個由星期-年組成的日期,日期不包括時區(qū)。
在input里,name 有什么作用?
由于表單提交的數據一般都是以key:value的方式提交,所以input中的name屬性主要用來標識提交的數據的key值,好讓服務器處理程序分辨。
例如:
<input name=name value=adam>
<input name=age value=18>
則服務器在后臺收到的數據格式可能是這樣的:
{
name:adam,
age:18
}
placeholder 屬性有什么作用?
placeholder屬性一般會在輸入框有一個提示,該提示會在輸入字段為空時顯示,并會在字段獲得焦點時消失。
注意:
- placeholder 屬性適用于以下的 <input> 類型:text, search, url, telephone, email 以及 password。
- placeholder為HTML5的新屬性