在網頁中建立表單
表單是實現動態網頁的一種主要的外在形式，利用表單可以收集瀏覽者的資訊或實現搜尋等功能。
表單資訊的處理過程：單擊表單中的提交按鈕時，在表單中輸入的資訊就會被提交到伺服器中，伺服器的有關應用程式會處理提交資訊。處理結果或者是將使用者提交的資訊儲存在伺服器端的資料庫中，或者是將有關資訊返回到客戶端的瀏覽器上。
完整的實現表單功能，需要設計兩個方面：一是用於描述表單物件的HTML原始碼；二是客戶端的指令碼，或者伺服器端用於處理所填寫資訊的程式。
表單組成標記
| 標記 | 描述 |
| <form> | 定義一個表單區域，以及攜帶表單的相關資訊 |
| <input> | 設定輸入表單的元素 |
| <select> | 設定列表元素 |
| <option> | 設定列表元素中的專案 |
| <textarea> | 設定表單文字域元素，如備註 |
<form name="表單名稱,用於指令碼引用" method="提交方法，定義表單資料從客戶端傳到伺服器的方法，get和post兩種，多用post方法" action="處理程式，用於指定處理表單的服務端程式">...</form>
除了以上三個屬性外，還有onsubmit屬性，用來指定處理表單的指令碼函式和enctype屬性。
Action 屬性
action 屬性定義在提交表單時執行的動作。
向伺服器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到 web 伺服器上的網頁。
在上面的例子中，指定了某個伺服器指令碼來處理被提交表單：
<form action="action_page.php">
如果省略 action 屬性，則 action 會被設定為當前頁面。
輸入標記<input>
<input type="元素型別" name="表單元素名稱">(type和name屬性是必設屬性)
type屬性值
| type屬性值 | 描述 |
| text | 設定單行文字框元素 |
| password | 設定密碼元素 |
| file | 設定檔案元素 |
| hidden | 設定隱藏元素 |
| radio | 設定單選框元素 |
| checkbox | 設定復(多)選框元素 |
| button | 設定普通按鈕元素 |
| submit | 設定提交按鈕元素 |
| reset | 設定重置按鈕元素 |
| image | 設定影象按鈕元素 |
1.文字框 text
<input type="text" name="文字框名稱">
文字框常用屬性
| 屬性 | 描述 |
| name | 設定文字框的名稱，在指令碼中作為文字框標識獲取其資料 |
| maxlength | 設定在文字框中最多可輸入的字元數 |
| size | 控制文字框長度，單位是畫素，預設值是24個畫素 |
| value | 設定文字框的預設值(會顯示在文字框中) |
示例：
程式碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>表單</title>
</head>
<body>
<h2>請輸入使用者資訊</h2>
<form name="form1" action="" method="post">
姓 名：<input type="text" name="user"><br/>
電 話：<input type="text" name="tel" size="10"></br>
地 址：<input type="text" name="adress" size="20"><br/>
郵 編：<input type="text" name="#" size="6" maxlength="6"></br>
個人主頁：<input text="text" name="1" size="20" value="http://">
</form>
</body>
</html>2.密碼框password
<input type="password" name="密碼框名稱">.
示例：
程式碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>表單</title>
</head>
<body>
<h2>請輸入使用者姓名和密碼</h2>
<form name="form1" action="" method="post">
姓 名：<input type="text" name="user" size="10"><br/>
密 碼：<input type="password" name="psw" size="20"><br/>
</form>
</body>
</html>3.隱藏域hidden
<input type="hidden" name="隱藏域名稱" value="域值">
隱藏域的type, name, value屬性都必須設定；value屬性用於設定隱藏域需傳遞的值，name屬性設定隱藏域的名稱，用於在處理程式中獲取域的資料。
4. 單選按鈕radio
<input type="radio" name="域名城" value="域值" checked="checked">
value用於設定單選按鈕選中後傳到伺服器端的值；checked表示此項被預設選中，如果不設定預設選中狀態，則不要使用checked屬性。
注意：屬於同一組的單選框的name屬性必須設定為相同的值
5.複選按鈕checkbox
<input type="checkbox" name="域名城" value="域值" checked="checked">
同一組的複選框的name屬性值可以設定為相同，也可不同；value和checked屬性的使用與單選框一樣。
6.重置按鈕reset
<input type="reset" name="按鈕名稱" value="顯示在按鈕上的名稱">
示例：
程式碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>表單</title>
</head>
<body>
<form name="form1" action="" method="post">
性 別：<input type="radio" value="famle" name="sex">女
<input type="radio" value="male" name="sex">男<br/>
愛 好：<input type="checkbox" value="music" name="1">音樂
<input type="checkbox" value="book" name="2">閱讀
<input type="checkbox" value="trip" name="3">旅遊
<input type="checkbox" value="sport" name="4">運動<br/>
<input type="reset" value="重置"/>
</form>
<form name="form1" action="" method="post">
性 別：<input type="radio" value="famle" name="sex">女
<input type="radio" value="male" name="sex">男<br/>
愛 好：<input type="checkbox" value="music" name="1">音樂
<input type="checkbox" value="book" name="2">閱讀
<input type="checkbox" value="trip" name="3">旅遊
<input type="checkbox" value="sport" name="4">運動<br/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
選擇列表標記<select>：
1.列表
列表指一次可以選擇多個列表選項，且一次可以顯示1個以上列表選項的選擇列表
<select name="列表名稱" size="現實的選項數目" multiple="multiple">
<option value="選項值" selected="selected">選項一</option>
<option value="選項值">選項二</option>
...
</select>
<select>用於宣告選擇列表，<option>標記用於設定各個選項。
select表及常用屬性:
| 屬性 | |
| name | 設定列表名稱 |
| size | 設定能同時顯示的列表選項個數(預設為1)，取值大於等於1 |
| multiple | 設定列表中的專案可多選 |
| value | 設定選項值 |
| selected | 設定預設選項，可對多個列表選項進行此屬性的設定 |
示例：
程式碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>表單</title>
</head>
<body>
<form>
<h2>請選擇你喜歡吃的水果：</h2>
<select name="fruit" size="5" multiple="multiple">
<option value="apple" selected="selected">蘋果</option>
<option value="banana">香蕉</option>
<option value="watermelon" selected="selected">西瓜</option>
<option value="pear">梨</option>
<option value="peach" selected="selected">桃子</option>
</select>
</form>
</body>
</html>2. 下拉列表
下拉列表是指，一次只能選擇一個列表選項，且一次只能顯示一個列表選項的選擇列表。size屬性不用設定，預設為1；切不能設定multiple屬性。
示例：
程式碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>表單</title>
</head>
<body>
<form>
請選擇列表中你最喜歡的電影：<br/><br/>
<select name="movie">
<option value="1">肖申克的救贖</option>
<option value="2">海上鋼琴師</option>
<option value="3">美國隊長3</option>
<option value="4">海洋奇緣</option>
<option value="5">鋼琴家</option>
<option value="6">神奇動物在哪裡</option>
</select>
</form>
</body>
</html>3. 文字域標記<textarea>
<input type="textarea" rows="行數" cols="列數">...</textarea>
示例：
程式碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>表單</title>
</head>
<body>
<form>
備 注：
<textarea name="remark" rows="8" cols="40"></textarea>
</form>
</body>
</html>表單綜合示例：
程式碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>表單</title>
</head>
<body>
<table width="60%" border="2" cellpadding="8" cellspacing="0" align="center">
<tr>
<th align="center" colspan="4">產品訂購</th>
</tr>
<form name="form1" method="post" action="">
<tr>
<td align="right">姓名：</td>
<td><input type="text" size="30" name="user"></td>
<td>商品名稱：</td>
<td><input type="text" size="30" name="product"></td>
</tr>
<tr>
<td align="right">地區：</td>
<td>
<select name="place">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
<option value="山東">山東</option>
<option value="江蘇">江蘇</option>
<option value="深圳">深圳</option>
</select>
</td>
<td>付款方式：</td>
<td>
<input type="radio" name="matter" value="online">網上
<input type="radio" name="matter" value="poster">郵局
<input type="radio" name="matter" value="bank">銀行
</td>
</tr>
<tr>
<td align="right">關注產品：</td>
<td colspan="3">
<input type="checkbox" name="1" value="#">護膚品
<input type="checkbox" name="2" value="#">化妝品
<input type="checkbox" name="3" value="#">服 裝
<input type="checkbox" name="4" value="#">電 器
</td>
</tr>
<tr>
<td align="right">聯絡電話：</td>
<td colspan="3">
<input type="text" size="30" name="tel">
</td>
</tr>
<tr>
<td align="right">備註：</td>
<td colspan="3">40
<textarea name="remark" rows="12" cols="80"></textarea>
</td>
</tr>
<tr>
<td colspan="4">
<input type="submit" value="提交">
<input type="reset" value="重寫">
</td>
</tr>
</form>
</table>
</body>
</html>