HTML表單是HTML頁面與瀏覽器端實現交互的重要手段。
利用表單可以收集客戶端提交的有關信息。
在HTML裏,我們可以定義表單,並且使表單與CGI或ASP等服務器端的表單處理程序配合。
我們在網頁設計課程中不會涉及程序編制。
HTML表單(F orm)是HTML的一個重要部分,主要用於採集和提交用戶輸入的信息。
舉個簡單的例子,一個讓用戶輸入姓名的HTML表單(Form)。示例代碼如下:
<form action=
"http://www.blabla.cn/asdocs/
html_tutorials/yourname.php" method="get">
請輸入你的姓名:
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>
表單(FORM)的三個要點:
學習HTML表單(Form)最關鍵要掌握的有三個要點:
表單控件(Form Controls)
Action
Method
表單控件(Form Controls ),通過HTML表單的各種控件,用戶可以輸入文字信息,或者從選項中選擇,以及做提交的操作。
比如上面的例句裏,input type= "text"就是一個表單控件,表示一個單行輸入框。
action: 用戶填入表單的信息總 是需要程序來進行處理,表單裏的action就指明瞭處理表單信息的文件。
比如上面例句裏的http://www.blabla.cn/asdocs/html_tutorials/yourname.php。
method ,表示了發送表單信息的方式。
method有兩個值:get和post。
get的方式是將表單控件的name/value信息經過編碼之後,通過URL發送(你可以在地址欄裏看到)。
而post則將表單的內容通過http發送 ,你在地址欄看不到表單的提交信息 。那什麼時候用get,什麼時候用post呢?
一般是這樣來判斷的 ,如果只是爲取得和顯示數據,用get;一旦涉及數據的保存和更新,那麼建議用post。
HTML表單(Form)常用控件(Controls)
HTML表單(Form)常用控件有:
input type="text" 單行文本輸入框
input type="submit" 將表單(Form)裏的信息提交給表單裏action所指向的文件
input type="checkbox" 複選框
input type="radio" 單選框
select 下拉框
textArea 多行文本輸入框
input type="password" 密碼輸入框(輸入的文字用*表示)
表單控件:單行文本輸入框
表單控件(Form Control):單行文本輸入框 (input type="text")
單行文本輸入框允許用戶輸入一些簡短的單行信息,比如用戶姓名。
例句如下:
<input type="text" name="yourname ">
表單控件:複選框
表單控件 (F orm Control):複選框(input type="checkbox")
複選框允許用戶在一組選項裏,選擇多個。
示例代碼:
<input type="checkbox" name="fruit" value ="apple">蘋果<br>
<input type ="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br >
用checked表示缺省已選的選項。
<input type="checkbox" name="fruit" value ="orange" checked>
桔子<br>
複選框示例代碼複選框示例代碼複選框示例代碼複選框示例代碼複選框示例代碼
<html>
<head><title>選擇</title></head>
<body>
請選擇你喜歡的水果:<br>
<form action = "http://www.blabla.cn/asdocs/html_tutorials/choose.asp" method = "post">
<input type="checkbox" name="fruit" value ="apple" >蘋果<br>
<input type="checkbox" name="fruit" value ="orange" checked >桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>
表單控件(Form Control):單選框(input type="radio")
使用單選框,讓用戶在一組選項裏只能選擇一個。
示例代碼:
<input type="radio" name ="fruit" value = "Apple ">蘋果<br >
<input type="radio" name="fruit " value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
用checked表示缺省已選的選項。
<input type ="radio " name="fruit" value = "Orange" checked>桔子<br>
單控件:單選框
單選框示例代碼
<html>
<head><title>選擇</title></head>
<body>
請選擇你最喜歡的水果:<br>
<form action = "http://www.blabla.cn/asdocs/html_tutorials/choose.asp" method = "post">
<input type="radio" name="fruit" value = "Apple">蘋果<br>
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>