form表單的作用和常用的input標簽及其作用
- fomr標簽的主要屬性:
- action: 規(guī)定表單提交的地址
- method: 規(guī)定表單提交時所使用的HTTP的方法
- target: 規(guī)定在何處打開action
- enctype:與發(fā)送時是否對字符編碼有關
- form表單的作用:form表單用于搜集不同類型的用戶輸入;表單元素指的是不同類型的input元素、復選框宝穗、單選按鈕、提交按鈕等等绅作。form元素的用法如下:
<form>
form elements
<form>
只有當用戶輸入被包裹在<form>
標簽里才會被提交到服務端。 - 常見input標簽及其作用
-
<input>
:這是最重要的表單元素,用于接收用戶的輸入较雕,且有一下常見的類型- text:一般的單行文本輸入
- password:密文輸入搪缨,輸入的內(nèi)容不會可見食拜,而是以黑點的形式呈現(xiàn)
- radio:定義單選鈕
- checkbox:定義復選框
- submit:定義表單數(shù)據(jù)提交的按鈕
- button:定義一般的按鈕
- reset:用來重置用戶的輸入
-
<select>
:定義下拉元素 -
<option>
:定義待選項,與<select>
元素一起出現(xiàn) -
<textarea>
:定義多行文本輸入 -
<button>
:定義可點擊的按鈕
-
post和get方式的區(qū)別
<form>
標簽的method屬性規(guī)定在提交表單時所用的HTTP方法(get或者post)副编,默認為GET负甸。
- GET: 如"get"單詞的含義“得到”,故使用GET方法的目的是要從服務端得到某些信息痹届,當然呻待,“得到”之前必須先去和服務端通信,去告知服務端想得到關于什么的信息队腐,所以當表單是被動提交(比如搜索引擎查詢)時带污,就可以使用GET方法;但是當使用GET方法時提交的表單數(shù)據(jù)在地址欄中是可見的香到,當有敏感信息需要發(fā)送時應該使用POST方法鱼冀。另外由于瀏覽器設定容量的限制,GET方法只適合提交少量的數(shù)據(jù)悠就。
- POST:如"post"單詞的含義“發(fā)送”千绪,可知POST方法的目的是要去向服務端發(fā)送信息,所以當更新表單數(shù)據(jù)時就可以使用POST方法梗脾。與GET方法不同荸型,POST方法提交的數(shù)據(jù)在地址欄中是不可見的,而且POST方法也適合提交相對大量的數(shù)據(jù)炸茧。
input里name有什么用
name屬性瑞妇,如果想要數(shù)據(jù)正確的被提交稿静,每個輸入字段必須都要設置一個name屬性,因為數(shù)據(jù)提交給服務端最終是以"key:value"的鍵值對的形式傳遞的辕狰,這里面"key"的只就是input里name屬性的值改备,如果缺少name屬性的話,那就組成不了鍵值對蔓倍,數(shù)據(jù)就不會被傳遞給服務端悬钳,比如下例中,被提交的只有"lastname:Mouse"的鍵值對偶翅,而"Mickey"的值因為沒有"name"屬性所以不會被傳遞
<form action="action_page.php">
First name:
<input type="text" value="Mickey">
Last name:
<input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
</form>
radio的分組
同一個分類的多個選項應該將name屬性的值設置成相同默勾,否則就是兩個不同的選項,比如下例中name="gender"
和name="sexual-orientation"
所代表的就是兩個互不相干的單選鈕聚谁。
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="sexual-orientation" value="male">男
<input type="radio" name="sexual-orientation" value="female">女
placeholder屬性的用處
placeholder屬性用以描述輸入字段預期值的提示母剥,所以當我們需要在輸入框上給用戶某些提示信息時或期望用戶輸入何種類型的數(shù)據(jù)時就可以用placeholder屬性,這個屬性的值只是個占位符文本形导,不會影響最終提交的value值媳搪。
"type=hidden"隱藏域的作用
隱藏域也是表單元素之一,語法同其他表單元素一樣:
<input type="hidden" name="name" value="value">
只是這個隱藏域?qū)τ脩羰遣豢梢姷闹栊脩舾兄坏剿拇嬖冢窃谟脩籼峤槐韱螖?shù)據(jù)時序愚,其中包含的隱藏域里的數(shù)據(jù)也會被提交憔披,所以隱藏域一般有以下作用:
- 可以通過在表單中插入隱藏域的方式來對提交表單數(shù)據(jù)的用戶的身份進行鑒權(quán),對于鑒權(quán)通過的數(shù)據(jù)請求則不去處理爸吮,可以防止不法分子惡意攻擊芬膝。
- 當一個form里有多個提交按鈕時可以通過插入隱藏域來確定被提交上來的數(shù)據(jù)分別是由哪個按鈕提交的。