HTML 表單:輸入用戶信息的單子蛹找,收集填寫的信息給服務(wù)器后臺(tái)
例:
<form action="http://www.blabla.cn/asdocs/html_tutorials/yourname.asp" method="get">
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>
form:定義html表單沈矿,粗淺理解為包裹表單惦辛。
Action 屬性:定義是在提交表單時(shí)執(zhí)行的動(dòng)作痪欲。向服務(wù)器提交表單的通常做法是使用提交按鈕悦穿。通常,表單會(huì)被提交到 web 服務(wù)器上的網(wǎng)頁(yè)业踢。在上面的例子中栗柒,指定了某個(gè)服務(wù)器腳本來(lái)處理被提交表單,如果省略 action 屬性知举,則 action 會(huì)被設(shè)置為當(dāng)前頁(yè)面瞬沦。例:<form action="action_page.php">
Method 屬性:是規(guī)定在提交表單時(shí)所用的 HTTP 方法,method有兩個(gè)值:get和post雇锡。get的方式是將表單控件的name/value信息經(jīng)過(guò)編碼之后逛钻,通過(guò)URL發(fā)送(你可以在地址欄里看到)。而post則將表單的內(nèi)容通過(guò)http發(fā)送锰提,你在地址欄看不到表單的提交信息曙痘。那什么時(shí)候用get,什么時(shí)候用post呢立肘?一般是這樣來(lái)判斷的边坤,如果只是為取得和顯示數(shù)據(jù),用get谅年;一旦涉及數(shù)據(jù)的保存和更新茧痒,那么建議用post。
Name屬性:如果要正確地被提交融蹂,每個(gè)輸入字段必須設(shè)置一個(gè) name 屬性文黎。有input必須有name。
例:
<form action="/demo/demo_form.asp">
First name:
<input type="text" value="Mickey">
Last name:
<input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
</form>
fieldset:組合表單數(shù)據(jù)
<fieldset> 元素組合表單中的相關(guān)數(shù)據(jù)
<legend> 元素為 <fieldset> 元素定義標(biāo)題殿较。
例:
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="Mickey">
Last name:
<input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit"></fieldset>
</form>
Html表單(Form)常用控件有:
input type="button:定義按鈕耸峭。例:<input type="button" onclick="alert('Hello World!')" value="Click Me!">
input type="submit" 將表單(Form)里的信息提交給表單里action所指向的文件 ,例:<input type="submit" value="提交">
input type="password" 密碼輸入框(輸入的文字用*表示)淋纲;例:<input type="password" name="password">
input type="text":?jiǎn)涡形谋据斎肟?br> 單行文本輸入框允許用戶輸入一些簡(jiǎn)短的單行信息劳闹,比如用戶姓名。例:<input type="text" name="username">
input type="checkbox":復(fù)選框
復(fù)選框允許用戶在一組選項(xiàng)里洽瞬,選擇多個(gè)本涕。
例:
<input type="checkbox" name="fruit" value ="apple">蘋果
<input type="checkbox" name="fruit" value ="orange">橙子
<input type="checkbox" name="fruit" value ="mango">芒果
用checked表示缺省已選的選項(xiàng)。
例:
<input type="checkbox" name="fruit" value ="orange" checked>桔子
input type="radio"單選框
使用單選框伙窃,讓用戶在一組選項(xiàng)里只能選擇一個(gè)菩颖。
例:
<form>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
</form>
select:下拉框(select);既可以用做單選为障,也可以用做復(fù)選晦闰。
例:
<select name="fruit" >
<option value="apple">蘋果</option>
<option value="orange">橙子</option>
<option value="mango">芒果</option>
</select>
如果要變成復(fù)選放祟,加muiltiple即可。用戶用Ctrl來(lái)實(shí)現(xiàn)多選呻右。例句:<select name="fruit" multiple>跪妥。用戶還可以用size屬性來(lái)改變下拉框(Select)的大小。
textarea:多行輸入框
多行輸入框(textarea)主要用于輸入較長(zhǎng)的文本信息声滥。
例:
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的寬度眉撵,rows表示textarea的高度。
表單控件(Form Control):密碼輸入框(input type="password")
input type="image":圖片提交落塑。
input type=image 相當(dāng)于 input type=submit纽疟,不同的是,input type=image 以一個(gè)圖片作為表單的提交按鈕憾赁,其中 src 屬性表示圖片的路徑仰挣。
例:<input type="image" src ="http://www.blabla.cn/images/icons/go.gif" alt = "提交" name="imgsubmit">