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


使用單選框、復選框,讓用戶選擇

在使用表單設計調查表時,為了減少用戶的操作,使用選擇框是一個好主意,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>

單擊重置按鈕

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM