HTML基礎知識表單
1.表單及其工作原理
from表單是HTML的一個重要組成部分，負責採集和提交用戶輸入的信息。
2.表單的基本屬性
一個表單，通常有三個組成部分：
*表單標籤：成對的<form>標籤
*表單域：用於實現文本輸入等功能的表單元素，必須內嵌在<form>標籤內
*表單按鈕：主要指提交表單數據至web服務器的按鈕
其代碼架構如下：
<form method="post|get" action=" " name=" ">
-----<!--表單域-->
<input type="submit" value="提交">
</form>
2.1 action屬性
表單屬性action用來定義表單提交後的表單處理程序，該程序存放在web服務器端，通常擴展名爲ASP,JSP,PHP等。在單擊表單的“提交”按鈕後，就會從表單頁面跳轉至action指定服務器頁面
2.2 method屬性
method屬性指出提交表單的方式，取get值則瀏覽頁面時會在瀏覽器的地址欄裏呈現用戶輸入的數據，而post方法不會顯示
2.3 提交按鈕
文本型提交按鈕
<input type="submit" value="提交"
圖像型提交按鈕
<input type="image" src="圖像文件名"/>
2.4重置按鈕
<input type="reset" value="重置"/>
2.5命令按鈕
<input type="button" value="提交" OnClick="客戶端腳本方法名()"/>
OnClick時瀏覽器支持的事件（不是屬性！）表示鼠標單擊
注意
1）命令按鈕與提交按鈕一般不同時使用，有重置按鈕就會有提交按鈕
2）命令按鈕可以在表單外使用，而提交按鈕和重置按鈕必須在表單內使用
3.常用的表單域
1.文本框
<input type="text" name=? size=?>
2.密碼框
<input type="password" name=?>
3.多行文本框
<textarea rows="顯示的行數" cols="每行中的字符數" name="元素名">初始文本</textarea>
4.單選框
checked定義默認值
<input type="radio" value="值1" name="radio"checked>選項1
<input type="radio"value="值2” name=?>選項2
......
<input type="radio" value="值n" name=?>選項n
5.複選框
<input type="checkbox" value=? name=? checked>選項1
<input type="checkbox" value=? name=?>選項2
......
<input type="checkbox" value=? name=?>選項n
6.下拉列表框
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
......
</select>
7.列表框
*列表框是下拉列表框的變形多了size屬性
*列表框有備選屬性selected，表示默認選擇
*下拉列表框在網頁中比較常用
<select name="select2" size="4">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
......
</select>
8.隱藏域
隱藏域在頁面中對於用戶是不可見的，在表單中插入隱藏域的目的在於收集和發送信息，以利於被處理的程序所使用。<input type="hidden" value=? name=?>
9.表單元素分組
<fieldset>
<legend>分組標題</legend>
<!--組內容器控件定義-->
</fieldset>
4.文件域與文件上傳
1.文件域
<input type="file" name="表單元素名" size="文件選擇框寬度"/>
2.文件上傳示例
<form action="" method="post" enctype="multipart/form-data">
請選擇文件:<input type="file" name="wjy">
<input type="submit" value="上傳">
3.表單示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單練習</title>
</head>
<body>
<form>
<fieldset> <legend align="center">個人資料</legend>
<p>
姓名：<input type="text" name="username">
<p>
性別： <input name="xb" type="radio" checked value="男">男 <input
name="xb" type="radio" value="女">女
<p>
出生日期: <input type="text" name="birthday">
<p>
主要經歷:
<textarea name="textater" rows="3" cols="25"></textarea>
<p>
興趣愛好 <input type="checkbox" name="ah" value="01">唱歌 <input
type="checkbox" name="ah" value="02">打球 <input
type="checkbox" name="ah" value="03">下棋 <input
type="checkbox" name="ah" value="03">上網 <input
type="checkbox" name="ah" value="03">購物
</fieldset>
<fieldset>
<legend align="center">專業與課程</legend>
所學專業: <select name="select">
<option>軟件工程</option>
<option selected>計算機工程及應用</option>
<option>計算機網絡技術</option>
<option>網絡工程嵌入式</option>
</select> 所學課程 <select name="select2" size="4">
<option>計算機基礎應用</option>
<option>辦公軟件</option>
<option>數據庫應用基礎</option>
<option>c語言</option>
<option>網頁設計</option>
</select> </fieldsest>
<p>
<input type=submit value="提交" /> <input type=reset value="重填" />
</form>
</body>
</html>
參考書籍《web前端技術開發》吳志祥 累鴻