HTML 表單和輸入
一、HTML 表單
HTML 表單用於收集不同型別的使用者輸入，表單是一個包含表單元素的區域。
表單元素是允許使用者在表單中輸入內容,比如：文字域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。
表單使用表單標籤 < form> 來設定:
格式如下
<form>
.
input 元素
.
</form>
二、HTML 表單 - 輸入元素
多數情況下被用到的表單標籤是輸入標籤（< input>）。
輸入型別是由型別屬性（type）定義的。大多數經常被用到的輸入型別如下：
1、文字域（Text Fields）
文字域通過 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文字域。
表單本身是不可見的。並且注意一個文字欄位的預設寬度是20個字元，表單本身並不可見
<form>
姓名: <input type="text" name="name"><br>
年齡: <input type="text" name="age">
</form>
瀏覽器顯示如下：
2、密碼欄位
密碼欄位通過標籤<input type="password"> 來定義:程式碼如下
<form> 使用者名稱: <input type="text" name="name"><br> 密碼: <input type="password" name="pwd"> </form>
瀏覽器顯示效果如下:
注意:密碼欄位字元不會明文顯示，而是以星號或圓點替代。
3、單選按鈕（Radio Buttons ）程式碼實現
<input type="radio"> 標籤定義了表單單選框選項
<form>
<input type="radio" name="sex" value="y">語文<br>
<input type="radio" name="sex" value="s">數學
</form>
當用戶點選一個單選按鈕時，它就會被選中，其他同名的單選按鈕就不會被選中。
瀏覽器顯示效果如下:
4、複選框（Checkboxes）
定義了複選框. 使用者需要從若干給定的選擇中選取一個或若干選項。
程式碼實現
<form>
<input type="checkbox" name="student" value="student">學生<br>
<input type="checkbox" name="tercher" value="tercher">老師
</form>
瀏覽器顯示效果如下:
5、提交按鈕(Submit Button)
<input type="submit"> 定義了提交按鈕.
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個檔案。表單的動作屬性定義了目的檔案的檔名。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。:
<form name="input" action="headHtml.html" method="get">
username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
瀏覽器顯示效果如下:
假如您在上面的文字框內鍵入幾個字母，然後點選確認按鈕，那麼輸入資料會傳送到 “headHtml.html” 的頁面。該頁面將顯示出輸入的結果，瀏覽器中也可以看到。
6、更多例項
簡單的下拉列表
本例演示如何在 HTML 頁面中建立簡單的下拉列表框。下拉列表框是一個可選列表。
預選下拉列表
本例演示如何建立一個簡單的帶有預選值的下拉列表。
文字域(Textarea)
本例演示如何建立文字域（多行文字輸入控制元件）。使用者可在文字域中寫入文字。可寫入字元的字數不受限制。
建立按鈕
本例演示如何建立按鈕。你可以對按鈕上的文字進行自定義。
程式碼實現：
<!--按鈕-->
<form action="headHtml.html">
<input type="button" name="按鈕" value="提交"><br>
</form>
<!--富文字-->
<textarea name="textarea" id="" cols="30" rows="10">我是一個富文字</textarea>
<!--下拉框-->
<form>
<select name="name">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<form>
<select name="selected">
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
</select>
</form>
7、表單例項
帶邊框的表單
本例演示如何在資料周圍繪製一個帶標題的框。
帶有輸入框和確認按鈕的表單
本例演示如何向頁面新增表單。此表單包含兩個輸入框和一個確認按鈕。
帶有複選框的表單
此表單包含兩個複選框和一個確認按鈕。
帶有單選按鈕的表單
此表單包含兩個單選框和一個確認按鈕。
從表單傳送電子郵件
此例演示如何從表單傳送電子郵件。
8、HTML 表單標籤和描述
定義供使用者輸入的表單 定義輸入域 定義文字域 (一個多行的輸入控制元件)程式碼實現：
<body>
<!--表單文字-->
<form>
姓名：<input type="text"><br>
年齡：<input type="text">
</form>
<!--密碼-->
<form>
使用者名稱： <input type="text" name="name"><br>
密 碼： <input type="password" name="pwd">
</form>
<!--單選按鈕-->
<form>
語文<input type="radio" name="sex77" value="語文"><br>
數學<input type="radio" name="sex77" value="數學">
</form>
<!--多選按鈕-->
<form>
學生<input type="checkbox" name="aa"><br>
老師<input type="checkbox" name="aa">
</form>
<!--下拉框-->
<form action="">
<input list="browsers"/>
<datalist id="browsers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</datalist>
</form>
<!--keygen定義了表單的金鑰對生成器欄位-->
<form action="headHtml.html" method="get">
使用者名稱: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<!--定義選項組-->
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<!--output定義一個計算結果-->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<!--富文字-->
<textarea name="textarea" id="" cols="30" rows="10">我是一個富文字</textarea>
<!--<fieldset>定義了一組相關的表單元素，並使用外框包含起來 ，<legend>定義了 <fieldset> 元素的標題-->
<form action="">
<fieldset>
<legend>title</legend>
username: <input type="text" value="username" name="username" placeholder=""/> <br/>
userage : <input type="text" value="userage" name="userage"/> <br/>
usersex : <input type="text" value="usersex" name="usersex"/>
</fieldset>
</form>
<!--提交-->
<form action="headHtml.html">
<input type="button" name="按鈕" value="提交"><br>
username：<input type="text" name="user">
<input type="submit" value="提交">
</form>
<!--下拉框-->
<form>
<select name="name">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<form>
<select name="selected">
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
</select>
</form>
<!--提交文字內容-->
<form action="HTML1.html" method="get">
<input type="radio" value="a" name="a"> a <br>
<input type="radio" value="b" name="a" checked/> b
<input type="submit" value="提交"/>
</form>
<form action="headHtml.html" method="get">
<input type="checkbox" name="sex1" value="2"/>2 <br/>
<input type="checkbox" name="sex" value="3" checked/> 3
<input type="submit" value="提交"/>
</form>
<form action="headHtml.html" method="get">
username: <input type="text" value="aaa" name="username"/> <br/>
pwd <input type="password" name="pwd" value="bbb"/>
<input type="submit" value="submit"/>
</form>
<form action="headHtml.html">
<fieldset>
<legend>title</legend>
username: <input type="text" value="username" name="username" placeholder=""/> <br/>
userage : <input type="text" value="userage" name="userage"/> <br/>
usersex : <input type="text" value="usersex" name="usersex"/>
<input type="submit" value="提交"/> <input type="reset"/>
</fieldset>
</form>
<h4>傳送郵件</h4>
<form action="mailto:[email protected]" method="post" enctype="text/plain">
郵箱：<input type="text" value="" name="email"> <br/>
內容：<input type="text" value="" name="content"> <br/>
其它: <input type="text" value="" name="other"> <br>
<input type="submit" value="提交"/> <br>
<input type="reset" value="重置"/>
</form>
</body>
9、其他： 重置按鈕
<input type="reset">定義重置按鈕
<input type="reset" name="button" id="button" value="重置">
點選之後會將重置按鈕所在的表單中填寫的內容重新設定為預設值。
表單中的單選按鈕可以設定以下幾個屬性：value、name、checked
value：提交資料到伺服器的值（後臺程式PHP使用）
name：為控制元件命名，以備後臺程式 ASP、PHP 使用
checked：當設定 checked=“checked” 時，該選項被預設選中
<form>
<p>你生活在哪個國家？</p>
<input type="radio" name="country" value="China" checked="checked">中國<br />
<input type="radio" name="country" value="the USA">美國
</form>
注意：同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“country”，這樣同一組的單選按鈕才可以起到單選的作用。