【HTML筆記】表單標籤

網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是能夠把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就能夠處理表單傳過來的數據。

語法：

<form   method="傳送方式"   action="服務器文件">

講解：

1.<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。

2.action ：瀏覽者輸入的數據被傳送到的地方,好比一個PHP頁面(save.php)。

3.method ： 數據傳送的方式（get/post）。

<form    method="post"   action="save.php">
        <label for="username">用戶名:</label>
        <input type="text" name="username" />
        <label for="pass">密碼:</label>
        <input type="password" name="pass" />
</form>

注意:

一、全部表單控件（文本框、文本域、按鈕、單選框、複選框等）都必須放在<form></form>標籤之間（不然用戶輸入的信息提交不到服務器上）。

二、method:post/get的區別這一部份內容屬於後端程序員考慮的問題。

文本輸入框、密碼輸入框

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也能夠轉化爲密碼輸入框。

語法：

<form>
   <input type="text/password" name="名稱" value="文本" />
</form>

1、type：

   當type="text"時，輸入框爲文本輸入框;

   當type="password"時, 輸入框爲密碼輸入框。

2、name：爲文本框命名，以備後臺程序ASP 、PHP使用。

3、value：爲文本輸入框設置默認值。(通常起到提示做用)

舉例：

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密碼：
  <input type="password" name="pass">
</form>

文本域，支持多行文本輸入

當用戶須要在表單中輸入大段文字時，須要用到文本輸入域。

語法：

<textarea  rows="行數" cols="列數">文本</textarea>

1、<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。

2、cols ：多行輸入域的列數。

3、rows ：多行輸入域的行數。

4、在<textarea></textarea>標籤之間能夠輸入默認值。

舉例：

<form  method="post" action="save.php">
        <label>聯繫咱們</label>
        <textarea cols="50" rows="10" >在這裏輸入內容...</textarea>
</form>

注意這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替。

使用單選框、複選框

在使用表單設計調查表時，爲了減小用戶的操做，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，二者的區別是單選框中的選項用戶只能選擇一項，而複選框中用戶能夠任意選擇多項，甚至全選。請看下面的例子:

語法：

<input   type="radio/checkbox"   value="值"    name="名稱"   checked="checked"/>

一、type:

   當 type="radio" 時，控件爲單選框

   當 type="checkbox" 時，控件爲複選框

二、value：提交數據到服務器的值（後臺程序PHP使用）

三、name：爲控件命名，以備後臺程序 ASP、PHP 使用

四、checked：當設置 checked="checked" 時，該選項被默認選中

注意:同一組的單選按鈕，name 取值必定要一致

使用下拉列表框

下拉列表在網頁中也常會用到，它能夠有效的節省網頁空間。既能夠單選、又能夠多選。以下代碼：

<form action="save.php" method="post" >
    <label>愛好:</label>
    <select>
      <option value="看書">看書</option>
      <option value="旅遊" selected="selected">旅遊</option>
      <option value="運動">運動</option>
      <option value="購物">購物</option>
    </select>
</form>

講解：

一、value：

二、selected="selected"：

設置selected="selected"屬性，則該選項就被默認選中。

使用下拉列表框進行多選

下拉列表也能夠進行多選操做，在<select>標籤中設置multiple="multiple"屬性，就能夠實現多選功能，在 widows 操做系統下，進行多選時按下Ctrl鍵同時進行單擊，能夠選擇多個選項。以下代碼：

<form action="save.php" method="post" >
    <label>愛好:</label>
    <select multiple="multiple">
      <option value="看書">看書</option>
      <option value="旅遊">旅遊</option>
      <option value="運動">運動</option>
      <option value="購物">購物</option>
    </select>
</form>

使用提交按鈕，提交數據

在表單中有兩種按鈕可使用，分別爲：提交按鈕、重置。這一小節講解提交按鈕：當用戶須要提交表單信息到服務器時，須要用到提交按鈕。

語法：

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

type：只有當type值設置爲submit時，按鈕纔有提交做用

value：按鈕上顯示的文字

舉例：

<form  method="post" action="save.php">
    <label for="myName">姓名：</label>
    <input type="text" value=" " name="myName " />
    <input type="submit" value="提交" name="submitBtn" />
</form>

使用重置按鈕，重置表單信息

當用戶須要重置表單信息到初始時的狀態時，好比用戶輸入「用戶名」後，發現書寫有誤，可使用重置按鈕使輸入框恢復到初始狀態。只須要把type設置爲"reset"就能夠。

語法：

<input type="reset" value="重置">

type：只有當type值設置爲reset時，按鈕纔有重置做用

value：按鈕上顯示的文字

舉例：

<form action="save.php" method="post" >
    <label>愛好:</label>
    <select>
      <option value="看書">看書</option>
      <option value="旅遊" selected="selected">旅遊</option>
      <option value="運動">運動</option>
      <option value="購物">購物</option>
    </select>
    <input type="submit" value="肯定"  />
    <input type="reset" value="重置"  />
</form>

form表單中的label標籤

label標籤不會向用戶呈現任何特殊效果，它的做用是爲鼠標用戶改進了可用性。若是你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該label標籤相關連的表單控件上）。

語法：

<label for="控件id名稱">

注意：標籤的 for 屬性中的值應當與相關控件的 id 屬性值必定要相同。

例子：

<form>
  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">輸入你的郵箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>