1. form表單有什么作用?有哪些常用的input 標簽,分別有什么作用?
- 表單的作用是搜集用戶的輸入,向服務器傳輸數據,從而實現用戶與web服務器的交互。
- Input表示Form表單中的一種輸入對象,根據Type類型可分為文本輸入框、密碼輸入框、單選/復選框、提交/重置按鈕等等。
在HTML5中,規定的 input type 屬性值如下: - 一些type值及其作用(最后有詳細版)
- button: 定義可點擊按鈕
- checkbox: 復選框
- email : 定義用于e-mail地址字段,提交時會驗證
- file : 上傳文件
- hidden : 定義隱藏字段
- image : 定義圖像為提交按鈕
- color : 定義拾色器,定義后出現顏色調板
- date: 定義 date 控件(包括年、月、日,不包括時間)
2. post 和 get 方式的區別?
- GET比POST更不安全,因為參數直接暴露在URL上,所以不能用來傳遞敏感信息。 GET參數通過URL傳遞,POST放在Request body中。
- GET請求在URL中傳送的參數是有長度限制的,而POST理論上是不受限制的。
- GET在瀏覽器回退時是無害的,而POST會再次提交請求。
- GET和POST本質上就是TCP鏈接,并無差別。但是由于HTTP的規定和瀏覽器/服務器的限制,導致他們在應用過程中體現出一些不同。對于GET方式的請求,瀏覽器會把http header和data一并發送出去(一個包),服務器響應200(返回數據);而對于POST,瀏覽器先發送header,服務器響應100 continue,瀏覽器再發送data(兩個包),服務器響應200 ok(返回數據)。”
3. 在input里,name 有什么作用?
name 屬性規定 input 元素的名稱。
name 屬性用于對提交到服務器后的表單數據進行標識,或者在客戶端通過 JavaScript 引用表單數據。
注釋:只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。
4. radio 如何 分組?
設置相同的name屬性值.
5. placeholder 屬性有什么作用?
<input type="text" name="first_name" placeholder="你的姓名..." />
placeholder 屬性提供可描述輸入字段預期值的提示信息(hint)。
該提示會在輸入字段為空時顯示,并會在字段獲得焦點時消失。
注釋:placeholder 屬性適用于以下的 <input> 類型:text, search, url, telephone, email 以及 password。
6. type=hidden隱藏域有什么作用? 舉例說明
- 隱藏域在頁面中對于用戶是不可見的,在表單中插入隱藏域的目的在于收集或發送信息,以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候,隱藏域的信息也被一起發送到服務器。
- 有些時候我們要給用戶一信息,讓他在提交表單時提交上來以確定用戶身份,如sessionkey,等等.當然這些東西也能用cookie實現,但使用隱藏域就簡單的多了.而且不會有瀏覽器不支持,用戶禁用cookie的煩惱。
- 有些時候一個form里有多個提交按鈕,怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢?我們就可以寫一個隱藏域,然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數據后先檢查command的值就會知道用戶是按的那個按鈕提交上來的。
- 有時候一個網頁中有多個form,我們知道多個form是不能同時提交的,但有時這些form確實相互作用,我們就可以在form中添加隱藏域來使它們聯系起來。
- javascript不支持全局變量,但有時我們必須用全局變量,我們就可以把值先存在隱藏域里,它的值就不會丟失了。
- 還有個例子,比如按一個按鈕彈出四個小窗口,當點擊其中的一個小窗口時其他三個自動關閉.可是IE不支持小窗口相互調用,所以只有在父窗口寫個隱藏域,當小窗口看到那個隱藏域的值是close時就自己關掉。
簡單介紹 HTML 表單的用法
HTML表單是一個包含表單元素的區域, 表單使用<form> 標簽創建。注意,<form >元素是塊級元素。
1.表單屬性
- action:規定當提交表單時,向何處發送表單數據。action取值為:第一,一個URL(絕對URL/相對URL),一般指向服務器端一個程序,程序接收到表單提交過來的數據(即表單元素值)作相應處理。第二,使用mailto協議的URL地址,這樣會將表單內容以電子郵件的形式發送出去。這種情況比較少見的,因為它要求訪問者的計算機上安裝和正確設置好了郵件發送程序。第三,空值,如果action為空或不寫,表示提交給當前頁面。
- method:該屬性定義瀏覽器將表單中的數據提交給服務器處理程序的方式。關于method的取值,最常用的是get和post。
- target:該屬性規定在何處顯示action屬性中指定的URL所返回的結果。取值有_blank(在新窗口中打開)、_self(在相同的框架中打開,默認值)、_parent(在父框架中打開)、_top(在整個窗口中打開)和framename(在指定的框架中打開)。
- title:設置網站訪問者的鼠標放在表單上的任意位置停留時,瀏覽器用小浮標顯示的文本。
- enctype:規定在發送到服務器之前應該如何對表單數據進行編碼。取值:默認值為 "application/x-www-form-urlencoded",在發送到服務器之前,所有字符都會進行編碼;“multipart/form-data”:不對字符編碼。在使用包含文件上傳控件的表單時,必須使用該值。
- name:表單的名稱。注意和id屬性的區別:name屬性是和服務器通信時使用的名稱;而id屬性是瀏覽器端使用的名稱,該屬性主要是為了方便客戶端編程,而在css和JavaScript中使用的。
2. 表單元素
- 單行文本框<input type="text"/>(input 的type 屬性的默認值就是"text")
- 密碼框<input type="password"/>
- 單選按鈕<input type="radio"/>。表單提交時,選中項的value和name被打包發送
- 復選框<input type="checkbox"/>。表單提交時,選中項的value和name被打包發送
- 隱藏域<input type="hidden"/>。隱藏域通常用于向服務器提交不需要顯示給用戶的信息
- 文件上傳<input type="file"/>。使用file,則form的enctype必須設置為multipart/form-data,method屬性為POST
- 下拉框<select>標簽
- 多行文本<textarea></textarea>。<textarea>沒有value屬性
- <label></label>標簽。在<input type=“text”>前可以寫普通的文本來修飾,但是單擊修飾文本的時候input并不會得到焦點,而用label則可以,for屬性指定要修飾的控件的id
- 提交按鈕<input type="submit"/>。當用戶單擊<inputt type="submit"/>的提交按鈕時,表單數據會提交給<form>標簽的action屬性所指定的服務器處理程序。中文IE下默認按鈕文本為“提交查詢”,可以設置value屬性修改按鈕的顯示文本。
- 重置按鈕<input type="reset"/>。當用戶單擊<input type="reset"/>按鈕時,表單中的值被重置為初始值。在用戶提交表單時,重置按鈕的name和value不會提交給服務器。
- 圖像按鈕<input type="image" src="bg.jpg"/>。圖像按鈕的src屬性指定圖像源文件,它沒有value屬性。
參考自