1.表單控制項
1.1文字框和密碼框
文字框和密碼框控制項允許使用者輸入一行文本.這兩個控制項唯一區別在於密碼框控制項隱藏所鍵入的文字,而是用星號代替.<input>標籤用來建立文字框和密碼框.
屬性:type設定文本類型,name設定名字,value設定框體值size設定文字框大小,maxlength設定最大字元數.
例如:<input type = "text" name = "username" value = "" size = "12" maxlength = "22">
1.2文本地區控制項
<textarea>標籤建立文本地區控制項,可容納多行文本,當使用者輸入多餘控制項可視地區的文本時,可自動添加捲軸.
屬性:name設定控制項名稱,rows設定文本可容納的文本行數,cols設定文本最大寬度(以字元為單位),wrap在使用者輸入超過控制項寬度文本時將文本自動轉到下一行.文本地區控制項是唯一不適用value屬性的控制項.而且需要用</textarea>標籤結束該控制項.
1.3複選框控制項
用<input>標籤來建立複選框控制項.需要將type屬性設定為checkbox.checked屬性用來指出初始是否選中該複選框控制項.將checked設為空白即可.當組合使用一些複選框控制項時,需要為所有的複選框控制項指定相同的name屬性值.然後每個複選框控制項指定一個唯一的value屬性值.
1.4單選框控制項
用<input>標籤建立選項按鈕.需要將type屬性設定為radio.要建立一組按鈕,需要將每個選項按鈕控制項的name屬性設定為相同的值,並為每個控制項的value屬性提供唯一的值.可用checked屬性設定初始值.
1.5菜單控制項
用<select>標籤來建立菜單本身.使用name屬性為菜單指定一個在處理表單時,需將菜單選擇相關的名稱.size屬性可設定開啟菜單的高度(以文本行為單位).預設情況下從菜單只有一個文本行的高度.<option>標籤及其value屬性建立每個功能表項目.value屬性為每個項目指定一個唯一的名稱.<optgroup>標籤的開始標籤和結束標籤之間可創造一組功能表項目.
樣本:
<select name = "color">
<option value = "red">red
<option value = "white">white
</select>
1.6按鈕控制項
用<input>標籤來建立,需將type屬性設定為submit(提交)和reset(重設).可以使用<button>標籤的style屬性使用樣式頁設定來修改按鈕的外觀.
樣本:
<button type = "submit" name = "submit" value = "submit"
style = "font:18pt Helvetica; background:green">submit</button>
2建立表單
2.1表單行為
action屬性可設定表單行為,"mailto:"後加上Web伺服器上的CGI指令碼和電子郵件地址.method屬性決定了如何傳遞表單中輸入的資訊進行處理.如果指定值為post,那麼資料將會被傳遞給action屬性中指定的CGI指令碼或郵箱地址.另一個method屬性值為get,它將會把表單資訊作為該表單所處的Web頁deURL的一部分發給Web伺服器.
2.2完整表單
任何表單的核心都是用來從使用者那裡擷取資訊的控制項.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 完整表單 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<form enctype = "plain/text" action = "mailto:381355576@qq.com" method = "post">
<!--單選框-->
<p>
What is the nature of your comment?<br>
<input type = "radio" name = "nature" value = "praise" checked = "">Praise
<input type = "radio" name = "nature" value = "problem"> Problem
<input type = "radio" name = "nature" value = "complaint">Complaint
</p>
<!--複選框-->
<p>
What specifically would you like to comment on?<br>
<select name = "specific">
<option value = "website">Web site
<option value = "company">Company
<option value = "products">Products
<option value = "services">Services
<option value = "other">Other
</select>
</p>
<!--文本地區控制項-->
<p>
Please enter your comments below:<br>
<textarea name = "comments" rows = "6" cols = "60" wrap =""></textarea>
</p>
<!--文字框-->
<p>
How can we get in touch with you?<br>
<table>
<tr>
<td>Name:</td>
<td><input type = "text" name = "name" size = "40"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type = "text" name = "email" size = "40"></td>
</tr>
<tr>
<td>phone #:</td>
<td><input type = "text" name = "phone" size = "20"></td>
</tr>
<tr>
<td>Fax #:</td>
<td><input type = "text" name = "fax" size = "20"></td>
</tr>
</table>
</p>
<!--複選框-->
<p>
<input type = "checkbox" name = "asap">Please contact me as soon as possible regarding this feedback.
</p>
<!--按鈕-->
<p>
<input type = "submit" value = "Submit Feedback">
<input type = "reset" value = "Start Over">
</p>
</form>
</BODY>
</HTML>
3.進階表單
3.1隻讀控制項
添加readonly屬性,控制項顯示資訊只能顯示不能更改.
樣本:
<input type = "text" name = "stats" value = "" readonly = "">
3.2隱藏控制項
將控制項的type屬性設定為hidden即可隱藏控制項.
樣本:
<input type = "hidden" name = "ssn" value = "123">
3.3欄位集
欄位集是一些控制項的組合.它的作用只是為了更好地組織控制項.將控制項包含在<fieldset>標籤的開始標籤和結束標籤之間.這樣在這些控制項的周圍繪製一個框.<legend>標籤可為欄位集建立一個標題,但必須包含於<fieldset>開始標籤和結束標籤之間.指定其align屬性可以設定靠左對齊(left),靠右對齊(right).
樣本:
<fieldset>
<legend align = "left">User Infomation</legend>
Name:
<input type = "text" name = "username"><br>
City,State:
<input type = "text" name = "userlocation"><br>
</fieldset>
3.4設定控制項的選擇順序
用控制項標籤的tabindex屬性.可以將屬性設定為0~32767之間的任意值;但是,必須為每一個控制項制定一個唯一的選擇索引值.表單中控制項從小到大被啟用.
樣本:
<input type = "submit" value = "submit" tabindex = "50">
<input type = "reset" value = "reset" tabindex = "51">
3.5提供鍵盤的捷徑
用控制項標籤的accesskey屬性可以建立鍵盤快速鍵.
樣本:
<!--按alt+u鍵來調用-->
<input type = "text" name = "username" value = "" accesskey = "u">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
