html與使用者互動中單選框與複選框&下拉式清單中的情況

標籤：設計   多個   系統   提交資料   需要   asp   log   名稱   png   

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

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

文法：

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

1、type:

   當 type="radio" 時，控制項為單選框

   當 type="checkbox" 時，控制項為複選框

2、value：提交資料到伺服器的值（背景程式PHP使用）

3、name：為控制項命名，以備背景程式 ASP、PHP 使用

4、checked：當設定 checked="checked" 時，該選項被預設選中

如下面代碼：

在瀏覽器中顯示的結果：

注意:同一組的選項按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的選項按鈕才可以起到單選的作用。

單選的代碼例子：

使用下拉式清單方塊，節省空間的

下拉式清單在網頁中也常會用到，它可以有效節省網頁空間。既可以單選、又可以多選。如下代碼：

講解：

1、value：

2、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>

單擊重設按鈕

 

html與使用者互動中單選框與複選框&下拉式清單中的情況