表單是什么?

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

例如

知乎登錄

Google的搜索框

表單如何工作?

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

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

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

form表單

1. form表單有什么作用？

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

2. <form>表單結構

action特性

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

method特性

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

1. get

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

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

2. post

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

URL沒有顯示被提交的數據

被提交的數據被放到了HTTP頭信息中

ps:
1. get是用來從服務器上獲得數據，而post是用來向服務器上傳數據
2. get將表單中數據按照variable=value的形式，添加到action所指向的URL后面，并且兩者用“？”連接，而各個變量之間用“&”連接；post是將表單中的數據放在form的數據體中，按照變量和值相對應的方式，傳到action所指向URL
3. Get方式并不安全，因為在傳輸過程中，數據被放在了請求的URL中，而如今現有的很多服務器、代理服務器或者用戶代理都會將請求URL記錄到日志文件中，放在某個地方保存，這樣就會被第三方看到。另外，用戶也可以直接在瀏覽器上看到被提交的數據，一些系統內部消息將會一同顯示在用戶面前。Post的所有操作用戶都是看不到的。
4. get傳輸的數據量小，因為URL的長度是有限制的；而post可以傳輸大量數據，所以在上傳文件時，只能用post
5. get限制form表單的數據值必須為ASCII字符；而post支持整個ISO10646字符集。

get&post取舍

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

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

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

表單控件多種多樣的input

<input>

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

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

單行文本框

當type特性的值為text時，<input>y元素會創建一個單行文本框

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

單行文本框效果

密碼框

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

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

密碼框效果

文本域（多行文本框）

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

 <textarea name="article">
         多行文本，注意和 type=text的區別
 </textarea>

文本域效果

單選按鈕

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

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

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

單選按鈕效果

復選框

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

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

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

復選框效果

下拉列表框

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

• name特性指定這個表單控件的名稱，此名稱與用戶選擇的選項值一并發送到服務器
• <select>元素用來創建下拉列表框，它包含兩個或者兩個以上的<option>元素
• <option>元素用于指定用戶選擇的選項，在起始標簽<option>和結束標簽</option>之間的文字將顯示在下拉列表中
• <option>元素使用value特性來指定選項的值，如果該選項被選中，那么這個值將于控件的名稱一并發送到服務器
• selected特性可以用來指定當頁面加載時被選中的選項。如果未使用selected特性，那么在頁面加載時，下拉列表框中顯示的將是第一個選項。如果用戶沒有選擇任何選項那么列表中的第一個項目將作為這個控件的值被傳送到服務器
• 下拉列表框的功能與單選按鈕的功能類似，在抉擇這兩種方式的時候要考慮以下兩點
• size特性的值是你希望一次顯示的選項數量
• 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會創建一個后面附有選擇文件（Browse）按鈕的類似文本框的控件，當用戶單擊按鈕時會彈出一個新窗口，來讓用戶們在他們的計算機中選擇文件來上傳到網站
• 如果允許用戶上傳文件，那么<form>元素上的method特性值設置為post（HTTP get方式是不能發送文件的）

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

文件上傳域效果

提交按鈕

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

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

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

提交按鈕效果

隱藏控件hidden

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

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

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

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

placeholder 屬性有什么作用?

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

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

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

placeholder效果

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