編程教程

　　 編程問答　 ACM與藍橋杯競賽入門　 C語言教程　 C++教程　 數(shù)據(jù)結(jié)構(gòu)教程　 Python教程　 JAVA教程　 編譯器教程　 C語言函數(shù)庫　 更多教程

HTML表單和輸入

86656 閱讀 0 評論 0 點贊

HTML表單是與用戶交互的強大工具；然而，由于歷史和技術(shù)上的原因，如何充分發(fā)揮它們的潛力并不總是顯而易見的。在本章節(jié)中，我們將介紹HTML表單的所有方面，從結(jié)構(gòu)到樣式，從數(shù)據(jù)處理到自定義小部件。

表單：采集不同類型的用戶輸入數(shù)據(jù)，發(fā)送給服務器，實現(xiàn)用戶和服務器之間的數(shù)據(jù)交互。

表單標簽form 聲明數(shù)據(jù)采集的范圍，只要是在form中的，都是要采集的數(shù)據(jù)。

一個頁面中可以有多個form標簽，只能是并列關(guān)系，不能嵌套。用戶向服務器端發(fā)送數(shù)據(jù)時，一次只能提交一個表單中的數(shù)據(jù)。如果要提交多個表單就需要用js中的異步交互。

<form> 元素

HTML 表單用于收集用戶輸入。

元素定義 HTML 表單：

<form>
.
form elements
.
</form>

1. HTML 表單包含表單元素。

表單元素指的是不同類型的 input 元素、復選框、單選按鈕、提交按鈕等等。

（1）<input> 元素

<input> 元素是最重要的表單元素。<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性。這是本章中使用的類型：

類型	描述
text	定義常規(guī)文本輸入
radio	定義單選按鈕輸入（選擇多個選擇之一）
submit	定義提交按鈕（提交表單）

（2）文本輸入

<input type="text"> 定義用于文本輸入的單行輸入字段：

<!DOCTYPE html>
<html>
<body>
<form>
姓氏:<br>
<input type="text" name="firstname">
<br>
名字:<br>
<input type="text" name="lastname">
</form>
<p>請注意表單本身是不可見的。</p>
<p>同時請注意文本字段的默認寬度是 20 個字符。</p>
</body>
</html>

呈現(xiàn)的結(jié)果如圖：

文本輸入

（3）單選按鈕輸入

<input type="radio"> 定義單選按鈕。單選按鈕允許用戶在有限數(shù)量的選項中選擇其中之一：

<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="sex" value="1" checked>男
<br>
<input type="radio" name="sex" value="2">女
</form>
</body>
</html>

呈現(xiàn)的結(jié)果如圖：

單選按鈕輸入

（4）提交按鈕

<input type="submit"> 定義用于向表單處理程序（form-handler）提交表單的按鈕。表單處理程序通常是包含用來處理輸入數(shù)據(jù)的腳本的服務器頁面。表單處理程序在表單的 action 屬性中指定：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.ashx">
姓氏:<br>
<input type="text" name="firstname" value="李">
<br>
名稱:<br>
<input type="text" name="lastname" value="雷">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您點擊提交，表單數(shù)據(jù)會被發(fā)送到名為 demo_form.ashx 的頁面進行后續(xù)處理。</p>
</body>
</html>

呈現(xiàn)的結(jié)果如圖：

提交按鈕

2. 表單屬性：

（1）Action 屬性

action 屬性定義在提交表單時執(zhí)行的動作。向服務器提交表單的通常做法是使用提交按鈕。通常，表單會被提交到 web 服務器上的網(wǎng)頁。在上面的例子中，指定了某個服務器腳本來處理被提交表單：

<form action="action.php">

如果省略 action 屬性，則 action 會被設(shè)置為當前頁面。

（2）Method 屬性

method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）：

<form action="action.php" method="GET">

或：

<form action="action.php" method="POST">

何時使用 GET？

您能夠使用 GET（默認方法）：如果表單提交是被動的（比如搜索引擎查詢），并且沒有敏感信息。當您使用 GET 時，表單數(shù)據(jù)在頁面地址欄中是可見的：

action_page.php?firstname=韓&lastname=梅梅

注釋：GET 最適合少量數(shù)據(jù)的提交。瀏覽器會設(shè)定容量限制(255個字符)。

何時使用 POST？

您應該使用 POST：如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼）。POST 的安全性更加，因為在頁面地址欄中被提交的數(shù)據(jù)是不可見的。

（3）Name 屬性

如果要正確地被提交，每個輸入字段必須設(shè)置一個 name 屬性。本例只會提交 "Last name" 輸入字段：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.ashx">
姓氏:<br>
<input type="text" value="李">
<br>
名字:<br>
<input type="text" name="lastname" value="雷">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您點擊提交，表單數(shù)據(jù)會被發(fā)送到名為 demo_form.ashx 的頁面。</p>
<p>姓氏 不會被提交，因為此 input 元素沒有 name 屬性。</p>
</body>
</html>

呈現(xiàn)的結(jié)果如圖：

Name 屬性

3. 表單控件

用 <fieldset> 組合表單數(shù)據(jù)

<fieldset> 元素組合表單中的相關(guān)數(shù)據(jù) <legend> 元素為 <fieldset > 元素定義標題。

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.ashx">
<fieldset>
<legend>個人信息:</legend>
姓氏:<br>
<input type="text" name="firstname" value="Mickey">
<br>
名字:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>

用<fieldset>組合表單數(shù)據(jù)

表單用來收集用戶數(shù)據(jù)，這些數(shù)據(jù)需要填寫在各種控件中。HTML 控件也通過標簽來實現(xiàn)，只是它們會呈現(xiàn)一些特殊的外觀，并具有一些交互功能。

HTML 表單中可以包含如下表所示的控件：

控件/標簽	描述
<input>	定義輸入框
<textarea>	定義文本域（一個可以輸入多行文本的控件）
<label>	為表單中的各個控件定義標題
<fieldset>	定義一組相關(guān)的表單元素，并使用邊框包裹起來
<legend>	定義 <fieldset> 元素的標題
<select>	定義下拉列表
<optgroup>	定義選項組
<option>	定義下拉列表中的選項
<button>	定義一個可以點擊的按鈕
<datalist>	指定一個預先定義的輸入控件選項列表
<keygen>	定義表單的密鑰對生成器字段
<output>	定義一個計算結(jié)果