表單是什么?

從某種意義上來說锄奢，“表單”就相當于一份問卷圃郊，這份問卷有一些空白的地方需要你來填寫答案项栏。

例如

知乎登錄

Google的搜索框

表單如何工作?

用戶填寫表單掀抹，然后單擊一個按鈕將所填信息提交到服務器，之后每個表單中的控件的名字和用戶輸入或選擇的值將會被一同發(fā)送給服務器伊诵。

用戶填寫表單单绑，然后單擊提交

表單中所有控件的名字和對應值被服務器接收

form表單

1. form表單有什么作用？

用來為網站搜集來自訪問者的信息曹宴，不論是要向網站加一個簡單的搜索框搂橙，還是要創(chuàng)建更復雜的保險申請單，都可以通過form表單中的控件來完成笛坦。

2. <form>表單結構

action特性

每個<from>元素都應該設置action特性,其特性值是服務器上一個頁面的URL区转，這個頁面用來在用戶提交表單時接收表單中的信息。

method特性

表單的提交可以采用以下兩種方法

1. get

使用get方法時弯屈，表單中的值被附加在由action特性所指的URL末尾

用戶名和密碼都顯示在URL的末尾

2. post

使用post方法時蜗帜，表單中的值被放在HTTP頭信息中進行發(fā)送。

URL沒有顯示被提交的數(shù)據(jù)

被提交的數(shù)據(jù)被放到了HTTP頭信息中

ps:
1. get是用來從服務器上獲得數(shù)據(jù)资厉，而post是用來向服務器上傳數(shù)據(jù)
2. get將表單中數(shù)據(jù)按照variable=value的形式，添加到action所指向的URL后面蔬顾，并且兩者用“宴偿？”連接，而各個變量之間用“&”連接诀豁；post是將表單中的數(shù)據(jù)放在form的數(shù)據(jù)體中窄刘，按照變量和值相對應的方式，傳到action所指向URL
3. Get方式并不安全舷胜，因為在傳輸過程中娩践，數(shù)據(jù)被放在了請求的URL中，而如今現(xiàn)有的很多服務器、代理服務器或者用戶代理都會將請求URL記錄到日志文件中翻伺，放在某個地方保存材泄，這樣就會被第三方看到。另外吨岭，用戶也可以直接在瀏覽器上看到被提交的數(shù)據(jù)拉宗，一些系統(tǒng)內部消息將會一同顯示在用戶面前。Post的所有操作用戶都是看不到的辣辫。
4. get傳輸?shù)臄?shù)據(jù)量小旦事，因為URL的長度是有限制的；而post可以傳輸大量數(shù)據(jù)急灭，所以在上傳文件時姐浮，只能用post
5. get限制form表單的數(shù)據(jù)值必須為ASCII字符；而post支持整個ISO10646字符集葬馋。

get&post取舍

那么我們什么時候用get什么時候用post呢单料？

ps:
1. 如果<form>中沒有使用method特性表單中的數(shù)據(jù)將用get方式發(fā)送
2. 所有的表單控件都應位于<from>元素中。
3. 每個<from>元素都應該設置action特性点楼，通常還要設置method特性和id特性扫尖。

 <form action="/getInfo" method="get">
 </form>

表單控件多種多樣的input

<input>

• input元素用來創(chuàng)建不同的表單控件，其type特性的值決定了它將要創(chuàng)建哪種控件
• 當用戶向表單中輸入信息時掠廓，服務器需要知道每條數(shù)據(jù)被輸入到了哪個表單控件换怖。

例如，在一個登錄表單中蟀瞧，服務器需要知道哪條數(shù)據(jù)是作為用戶名輸入的沉颂，哪條數(shù)據(jù)提供的是密碼。因此悦污，每個表單控件都需要一個name特性铸屉，這個特性的值對表單控件進行標識并輸入的信息一同傳送到服務器。

單行文本框

當type特性的值為text時切端，<input>y元素會創(chuàng)建一個單行文本框

 <input id="username" type="text" name="username" value="ruo">

單行文本框效果

密碼框

當type特性的值為password時彻坛，<input>y元素會創(chuàng)建一個用起來和單行文本框類似的文本框，唯一不同之處在于其中的字符被隱藏起來為的是讓那些在用戶背后旁觀的人看不到想密碼這樣的敏感數(shù)據(jù)踏枣。
ps:在任何文本輸入控件上昌屉，你還可以使用一個名為placeholder的特性，在用戶單擊文本輸入區(qū)域之前茵瀑，文本框內顯示的文本就是placeholder的特性的值间驮。

 <input id="password" type="password" name="password" placeholder="輸入密碼">

密碼框效果

文本域（多行文本框）

• <textarea>元素用來創(chuàng)建多行文本框。與其他input元素不同马昨，<textarea>元素并非空元素竞帽，因此它包含起始標簽和結束標簽
• 頁面加載時扛施，在起始標簽<textarea>和結束標簽</textarea>之間出現(xiàn)的所有文本將顯示在相應的文本框中。

 <textarea name="article">
         多行文本屹篓，注意和 type=text的區(qū)別
 </textarea>

文本域效果

單選按鈕

單選按鈕只讓用戶從一系列選項中選擇其中一個
ps:

• 當一個問題以單選按鈕的形式給用戶提供一系列答案時疙渣，用來回答這個問題的所有單選按鈕的name特性值都應該相同
• value特性為選項指定了被選中時要發(fā)送到服務器的值，同一組中的每個按鈕的值應該各不相同（這樣服務器才知道用戶選擇了哪個選項）
• checked特性用來指定當頁面加載時哪個選項會被選中

      <input type="radio" name="sex" value="男"> 男
      <input type="radio" name="sex" value="女"> 女  

單選按鈕效果

復選框

復選框允許用戶在回答一個問題時選擇一個或多個選項
ps:

• 當一個問題以復選框的形式給用戶提供一系列答案時抱虐，用來回答這個問題的所有復選框的name特性值都應該相同
• value特性指定復選框在被選中時需要發(fā)送到服務器的值
• checked特性用來指定當頁面加載時哪個選項會被選中

      <input type="checkbox" name="hobby" value="read"> 讀書
      <input type="checkbox" name="hobby" value="music"> 聽歌
      <input type="checkbox" name="hobby" value="study"> 學習

復選框效果

下拉列表框

下拉列表框讓用戶在一個下拉列表中選擇其中一個選項
ps:

• name特性指定這個表單控件的名稱昌阿，此名稱與用戶選擇的選項值一并發(fā)送到服務器
• <select>元素用來創(chuàng)建下拉列表框，它包含兩個或者兩個以上的<option>元素
• <option>元素用于指定用戶選擇的選項恳邀，在起始標簽<option>和結束標簽</option>之間的文字將顯示在下拉列表中
• <option>元素使用value特性來指定選項的值懦冰，如果該選項被選中，那么這個值將于控件的名稱一并發(fā)送到服務器
• selected特性可以用來指定當頁面加載時被選中的選項谣沸。如果未使用selected特性刷钢，那么在頁面加載時，下拉列表框中顯示的將是第一個選項乳附。如果用戶沒有選擇任何選項那么列表中的第一個項目將作為這個控件的值被傳送到服務器
• 下拉列表框的功能與單選按鈕的功能類似内地，在抉擇這兩種方式的時候要考慮以下兩點
• size特性的值是你希望一次顯示的選項數(shù)量
• multiple特性來允許用戶從這一列表中選擇多個選項

1. 如果用戶需要一眼看到所有的選項，那么當然單選按鈕更合適一些
2. 如果是一個非常長的選項列表（如國家列表）赋除，那么下拉列表框則更適合一些

<select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="hangzhou">杭州</option>
      </select>

下拉列表框效果

文件上傳域

如果你希望讓用戶上傳文件（例如圖像阱缓、視頻、MP3或者PDF等）举农，就需要使用文件域
ps:

• type="file"這個類型的input會創(chuàng)建一個后面附有選擇文件（Browse）按鈕的類似文本框的控件荆针，當用戶單擊按鈕時會彈出一個新窗口，來讓用戶們在他們的計算機中選擇文件來上傳到網站
• 如果允許用戶上傳文件颁糟，那么<form>元素上的method特性值設置為post（HTTP get方式是不能發(fā)送文件的）

<input type="file" name="myfile"">

文件上傳域效果

提交按鈕

提交按鈕用來將表單發(fā)送給服務器
ps:

• value特性用于控制在按鈕上的文本

<input type="submit" value="提交" />

提交按鈕效果

隱藏控件hidden

提交按鈕用來將表單發(fā)送給服務器
ps:

• 隱藏域在頁面中對于用戶是不可見的航背，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用棱貌。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候玖媚，隱藏域的信息也被一起發(fā)送到服務器。
• 有些時候我們要給用戶一信息婚脱，讓他在提交表單時提交上來以確定用戶身份今魔，如sessionkey，等等．當然這些東西也能用cookie實現(xiàn)起惕，但使用隱藏域就簡單的多了．而且不會有瀏覽器不支持涡贱，用戶禁用cookie的煩惱。
• 有些時候一個form里有多個提交按鈕惹想，怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢？我們就可以寫一個隱藏域督函，然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數(shù)據(jù)后先檢查command的值就會知道用戶是按的那個按鈕提交上來的嘀粱。

<input type="hidden" name="csrf" value="12345623fafdffdd">

• 這時激挪，所提交的表單就會附加：csrf=12345623fafdffdd的內容。

placeholder 屬性有什么作用?

在用戶輸入值之前锋叨，輸入字段中將顯示短提示垄分，也就是placeholder的值。
ps:

• 占位符屬性適用于以下輸入類型：文本娃磺，搜索薄湿，網址，電話偷卧，電子郵件和密碼

<input id="password" type="password" name="password" placeholder="輸入密碼">

placeholder效果

本文章著作權歸饑人谷_ghj和饑人谷所有豺瘤，轉載須說明來源