html與用戶交互中單選框與複選框&下拉列表中的狀況

使用單選框、複選框，讓用戶選擇

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

語法：

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

一、type:

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

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

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

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

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

以下面代碼：

在瀏覽器中顯示的結果：

注意:同一組的單選按鈕，name 取值必定要一致，好比上面例子爲同一個名稱「radioLove」，這樣同一組的單選按鈕才能夠起到單選的做用。

單選的代碼例子：

使用下拉列表框，節省空間

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

講解：

一、value：

二、selected="selected"：

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

在瀏覽器中顯示的結果：

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

在瀏覽器中顯示的結果：

使用提交按鈕，提交數據

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

語法：

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

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

value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

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

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

語法：

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

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

value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

輸入帳號

form表單中的label標籤

小夥伴們，大家在前面學習表單各類控件的時候，有沒有發現一個標籤--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>

單擊重置按鈕