HTML 表單

表單是一個(gè)包含表單元素的區(qū)域。

表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。

表單使用表單標(biāo)簽 <form> 來(lái)設(shè)置:

<form>
.
input 元素
.
</form>

?

---

HTML 表單 - 輸入元素

多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。

輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：

---

文本域（Text Fields）

文本域通過(guò)<input type="text"> 標(biāo)簽來(lái)設(shè)定，當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

瀏覽器顯示如下：

First name:?
Last name:?

注意:表單本身并不可見(jiàn)。同時(shí)，在大多數(shù)瀏覽器中，文本域的缺省寬度是20個(gè)字符。

---

密碼字段

密碼字段通過(guò)標(biāo)簽<input type="password"> 來(lái)定義:

<form>
Password: <input type="password" name="pwd">
</form>

瀏覽器顯示效果如下:

Password:?

注意:密碼字段字符不會(huì)明文顯示，而是以星號(hào)或圓點(diǎn)替代。

---

單選按鈕（Radio Buttons）

<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

瀏覽器顯示效果如下:

Male
Female

---

復(fù)選框（Checkboxes）

<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car?
</form>

瀏覽器顯示效果如下:

I have a bike
I have a car

---

提交按鈕(Submit Button)

<input type="submit"> 定義了提交按鈕.

當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

瀏覽器顯示效果如下:

Username:?

假如您在上面的文本框內(nèi)鍵入幾個(gè)字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會(huì)傳送到 "html_form_action.php" 的頁(yè)面。該頁(yè)面將顯示出輸入的結(jié)果。

---

?更多實(shí)例

單選按鈕(Radio buttons)
本例演示如何在 HTML 中創(chuàng)建單選按鈕。

復(fù)選框(Checkboxes)
本例演示如何在 HTML 頁(yè)中創(chuàng)建復(fù)選框。用戶可以選中或取消選取復(fù)選框。

簡(jiǎn)單的下拉列表
本例演示如何在 HTML 頁(yè)面中創(chuàng)建簡(jiǎn)單的下拉列表框。下拉列表框是一個(gè)可選列表。

預(yù)選下拉列表
本例演示如何創(chuàng)建一個(gè)簡(jiǎn)單的帶有預(yù)選值的下拉列表。

文本域(Textarea)
本例演示如何創(chuàng)建文本域（多行文本輸入控件）。用戶可在文本域中寫(xiě)入文本。可寫(xiě)入字符的字?jǐn)?shù)不受限制。

創(chuàng)建按鈕
本例演示如何創(chuàng)建按鈕。你可以對(duì)按鈕上的文字進(jìn)行自定義。

?表單實(shí)例

帶邊框的表單
本例演示如何在數(shù)據(jù)周圍繪制一個(gè)帶標(biāo)題的框。

帶有輸入框和確認(rèn)按鈕的表單
本例演示如何向頁(yè)面添加表單。此表單包含兩個(gè)輸入框和一個(gè)確認(rèn)按鈕。

帶有復(fù)選框的表單
此表單包含兩個(gè)復(fù)選框和一個(gè)確認(rèn)按鈕。

帶有單選按鈕的表單
此表單包含兩個(gè)單選框和一個(gè)確認(rèn)按鈕。

從表單發(fā)送電子郵件
此例演示如何從表單發(fā)送電子郵件。

---

HTML 表單標(biāo)簽

New?: HTML5新標(biāo)簽

標(biāo)簽描述

<form>	定義供用戶輸入的表單
<input>	定義輸入域
<textarea>	定義文本域 (一個(gè)多行的輸入控件)
<label>	定義了 <input> 元素的標(biāo)簽，一般為輸入標(biāo)題
<fieldset>	定義了一組相關(guān)的表單元素，并使用外框包含起來(lái)
<legend>	定義了 <fieldset> 元素的標(biāo)題
<select>	定義了下拉選項(xiàng)列表
<optgroup>	定義選項(xiàng)組
<option>	定義下拉列表中的選項(xiàng)
<button>	定義一個(gè)點(diǎn)擊按鈕
<datalist>New	指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表
<keygen>New	定義了表單的密鑰對(duì)生成器字段
<output>New	定義一個(gè)計(jì)算結(jié)果

轉(zhuǎn)載于:https://www.cnblogs.com/wlming/p/6046947.html

總結(jié)

以上是生活随笔為你收集整理的HTML 表单和输入的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。