1. 程式人生 > >HTML5文字域,單選框、複選框,下拉列表框,提交、重置按鈕的設定,label標籤

HTML5文字域,單選框、複選框,下拉列表框,提交、重置按鈕的設定,label標籤

文字域,支援多行文字輸入

當用戶需要在表單中輸入大段文字時,需要用到文字輸入域。

語法

<textarearows="行數"cols="列數">文字</textarea>

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

2cols多行輸入域的列數

3rows多行輸入域的行數

4、在<textarea></textarea>標籤之間可以輸入預設值

舉例

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

注意:程式碼中的<label>標籤在本章5-9中講解。

在瀏覽器中顯示結果:


注意這兩個屬性可用css樣式的widthheight來代替:colwidthrowheight來代替。(這兩個css樣式在以後的章節會講解)

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

在使用表單設計調查表時,為了減少使用者的操作,使用選擇框是一個好主意,html

中有兩種選擇框,即單選框複選框,兩者的區別是單選框中的選項使用者只能選擇一項,而複選框中使用者可以任意選擇多項,甚至全選。請看下面的例子:

語法:

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

1type:

type="radio"時,控制元件為單選框

type="checkbox"時,控制元件為複選框

2value提交資料到伺服器的值(後臺程式PHP使用)

3name為控制元件命名,以備後臺程式 ASPPHP 使用

4checked當設定 checked="checked"

時,該選項被預設選中

如下面程式碼:


在瀏覽器中顯示的結果:


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

下拉列表在網頁中也常會用到,它可以有效的節省網頁空間。既可以單選、又可以多選。如下程式碼:

講解:

1value


2selected="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>