HTML基礎(chǔ)
HTML 簡介
HTML基本標(biāo)簽
HTML 元素
HTML 屬性
HTML 標(biāo)題
HTML 段落
HTML 文本格式化
HTML 編輯器
HTML CSS
HTML 鏈接
HTML 圖像
HTML 表格
HTML 列表
HTML 塊
HTML 布局
HTML 表單和輸入
HTML 框架
HTML Iframe
HTML 背景
HTML 顏色
HTML 顏色名
HTML 快速參考
HTML高級
HTML <!DOCTYPE>
HTML 頭部元素
HTML 腳本
HTML 字符實(shí)體
HTML 統(tǒng)一資源定位器
HTML URL 字符編碼
HTML Web Server
HTML媒體
HTML 多媒體
HTML Object 元素
HTML 音頻
HTML 視頻
?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
文字
HTML 表單和輸入
HTML 表單用于搜集不同類型的用戶輸入。
實(shí)例
文本域 (Text field)
<html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastname" </form> </body> </html>
密碼域
<html> <body> <form> 用戶： <input type="text" name="user"> <br /> 密碼： <input type="password" name="password"> </form> <p> 請注意，當(dāng)您在密碼域中鍵入字符時，瀏覽器將使用項目符號來代替這些字符。 </p> </body> </html>
（可以在本頁底端找到更多實(shí)例。）
表單
表單是一個包含表單元素的區(qū)域。
表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素。
表單使用表單標(biāo)簽（<form>）定義。
<form> ... input 元素 ... </form>
輸入
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：
文本域（Text Fields）
當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域。
<form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form>
瀏覽器顯示如下：
First name: Last name:注意，表單本身并不可見。同時，在大多數(shù)瀏覽器中，文本域的缺省寬度是20個字符。
單選按鈕（Radio Buttons）
當(dāng)用戶從若干給定的的選擇中選取其一時，就會用到單選框。
<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form>
瀏覽器顯示如下：
Male Female注意，只能從中選取其一。
復(fù)選框（Checkboxes）
當(dāng)用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復(fù)選框。
<form> <input type="checkbox" name="bike" /> I have a bike <br /> <input type="checkbox" name="car" /> I have a car </form>
瀏覽器顯示如下：
I have a bike I have a car表單的動作屬性（Action）和確認(rèn)按鈕
當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
瀏覽器顯示如下：
Username:假如您在上面的文本框內(nèi)鍵入幾個字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會傳送到 "html_form_action.asp" 的頁面。該頁面將顯示出輸入的結(jié)果。
更多實(shí)例
復(fù)選框
<html> <body> <form> 我喜歡自行車： <input type="checkbox" name="Bike"> <br /> 我喜歡汽車： <input type="checkbox" name="Car"> </form> </body> </html>
單選按鈕
<html> <body> <form> 男性： <input type="radio" checked="checked" name="Sex" value="male" /> <br /> 女性： <input type="radio" name="Sex" value="female" /> </form> <p>;當(dāng)用戶點(diǎn)擊一個單選按鈕時，該按鈕會變?yōu)檫x中狀態(tài)，其他所有按鈕會變?yōu)榉沁x中狀態(tài)。</p> </body> </html>
簡單的下拉列表
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body>
另一個下拉列表
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
文本域(Textarea)
<html> <body> <p> This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. </p> <textarea rows="10" cols="30"> The cat was playing in the garden.
創(chuàng)建按鈕
<html> <body> <form> <input type="button" value="Hello world!"> </form> </body> </html>
Fieldset around data
<!DOCTYPE HTML> <html> <body> <form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 體重：<input type="text" /> </fieldset> </form> <p>如果表單周圍沒有邊框，說明您的瀏覽器太老了。</p> </body> </html>
表單實(shí)例
帶有輸入框和確認(rèn)按鈕的表單
<html> <body> <form action="/example/html/form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> </form> <p>請單擊確認(rèn)按鈕，輸入會發(fā)送到服務(wù)器上名為 "form_action.asp" 的頁面。</p> </body> </html>
帶有復(fù)選框的表單
<html> <body> <form name="input" action="/html/html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><br /> <input type="submit" value="Submit" /> </form> <p>如果您點(diǎn)擊 "Submit" 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。</p> </body> </html>
帶有單選按鈕的表單
<html> <body> <form name="input" action="/html/html_form_action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked"> <br /> Female: <input type="radio" name="Sex" value="Female"> <br /> <input type ="submit" value ="Submit"> </form> <p>如果您點(diǎn)擊 "Submit" 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。</p> </body> </html>
從表單發(fā)送電子郵件
<html> <body> <form action="MAILTO:php@php.cn" method="post" enctype="text/plain"> <h3>這個表單會把電子郵件發(fā)送到 PHP.cn</h3> 姓名：<br /> <input type="text" name="name" value="yourname" size="20"> <br /> 電郵：<br /> <input type="text" name="mail" value="yourmail" size="20"> <br /> 內(nèi)容：<br /> <input type="text" name="comment" value="yourcomment" size="40"> <br /><br /> <input type="submit" value="發(fā)送"> <input type="reset" value="重置"> </form> </body> </html>
表單標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
<form> | 定義供用戶輸入的表單 |
<input> | 定義輸入域 |
<textarea> | 定義文本域 (一個多行的輸入控件) |
<label> | 定義一個控制的標(biāo)簽 |
<fieldset> | 定義域 |
<legend> | 定義域的標(biāo)題 |
<select> | 定義一個選擇列表 |
<optgroup> | 定義選項組 |
<option> | 定義下拉列表中的選項 |
<button> | 定義一個按鈕 |
<isindex> | 已廢棄。由 <input> 代替。 |