html標籤(表單)
阿新 • • 發佈:2019-02-18
表單標籤:
語法: <form method="傳送方式" action="伺服器檔案">
講解: 1.<form> :<form>標籤是成對出現的,以<form>開始,以</form>結束。
2.action :瀏覽者輸入的資料被傳送到的地方,比如一個PHP頁面(save.php)。
3.method : 資料傳送的方式(get/post)。
文字輸入框、密碼輸入框:
語法: <form><input type="text/password" name="名稱" value="文字" /></form>
講解: 1、type:當type="text"時,輸入框為文字輸入框;當type="password"時, 輸入框為密碼輸入框。
2、name:為文字框命名,以備後臺程式ASP 、PHP使用。
3、value:為文字輸入框設定預設值。(一般起到提示作用)
文字域,多行文字輸入:
語法: <textarea rows="行數" cols="列數">文字</textarea>
講解: 1、<textarea>標籤是成對出現的,以<textarea>開始,以</textarea>結束。
2 、cols :多行輸入域的列數。
3、rows :多行輸入域的行數。
4、在<textarea></textarea>標籤之間可以輸入預設值。
單選框、複選框:
語法: <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" 時,該選項被預設選中
下拉列表框:
語法: <select>
<option value ="1">Volvo</option>
<option value ="2" selected="selected">Saab</option>
</select>
講解: select是顯示一個下拉列表出來,<select>標籤中設定multiple="multiple" 就可以實現多選功能
option是下拉列表中的專案,option的文字內容是下拉列表專案中顯示到頁面上的值,
value是真正需要提交到服務端的值。
option中的引數:selected="selected" 如果需要開啟頁面就預設選中某個option,需要用到selected引數:
disabled="disabled" 如果需要禁用某個專案,但是卻又不想隱藏,可以使用disabled屬性
title 如果需要在滑鼠放到某個專案上時,給出提示,可以使用title屬性
語法: <select>
<optgroup label="Swedish Cars">
<option value="1">Volvo</option>
<option value="2">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</optgroup>
</select>
講解: 下拉列表包含一個“專案組”,這個組是無法選擇的
使用label標籤標記字面內容,真正起作用的,還是value屬性。
提交按鈕,重置按鈕:
語法: <input type="submit" value="提交">
講解: type:只有當type值設定為submit時,按鈕才有提交作用
value:按鈕上顯示的文字
語法: <input type="reset" value="重置">
講解: type:只有當type值設定為reset時,按鈕才有重置作用
value:按鈕上顯示的文字
label標籤:
語法: <label for="控制元件id名稱">
講解: label標籤不會向用戶呈現任何特殊效果,它的作用是為滑鼠使用者改進了可用性。
如果你在 label 標籤內點選文字,就會觸發此控制元件。
當用戶單擊選中該label標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上(就自動選中和該label標籤相關連的表單控制元件上)。