HTML初學(xué)者教程

*HTML 表單用于收集用戶的輸入信息。

*HTML 表單表示文檔中的一個(gè)區(qū)域，此區(qū)域包含交互控件，將用戶收集到的信息發(fā)送到 Web 服務(wù)器。

實(shí)例

以下實(shí)例創(chuàng)建了一個(gè)表單，包含兩個(gè)輸入框：

<form action="">

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

實(shí)例

以下實(shí)例創(chuàng)建了一個(gè)表單，包含一個(gè)普通輸入框和一個(gè)密碼輸入框：

<form action="">

Username: <input type="text" name="user"><br>

Password: <input type="password" name="password">

</form>

一、HTML 表單

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

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

我們可以使用 <form> 標(biāo)簽來創(chuàng)建表單:

實(shí)例

<form>

.

input 元素

.

</form>

二、HTML 表單 - 輸入元素

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

輸入類型是由 type 屬性定義。

接下來我們介紹幾種常用的輸入類型。

三、文本域（Text Fields）

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

實(shí)例

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

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

四、密碼字段

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

實(shí)例

<form>

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

</form>

*注意：密碼字段字符不會明文顯示，而是以星號 * 或圓點(diǎn) . 替代。

五、單選按鈕（Radio Buttons）

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

實(shí)例

<form action="">

<input type="radio" name="choose" value="A">A<br>

<input type="radio" name="choose" value="B">B

</form>

六、復(fù)選框（Checkboxes）

<input type="checkbox"> 定義了復(fù)選框。

復(fù)選框可以選取一個(gè)或多個(gè)選項(xiàng)：

實(shí)例

<form>

<input type="checkbox" name="vehicle" value="Bike">A<br>

<input type="checkbox" name="vehicle" value="Car">B

</form>

七、提交按鈕(Submit)

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

*當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會被傳送到服務(wù)器。表單的動作屬性 action 定義了服務(wù)端的文件名。

action 屬性會對接收到的用戶輸入數(shù)據(jù)進(jìn)行相關(guān)的處理

實(shí)例

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

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

以上實(shí)例中有一個(gè) method 屬性，它用于定義表單數(shù)據(jù)的提交方式，可以是以下值：

post：指的是 HTTP POST 方法，表單數(shù)據(jù)會包含在表單體內(nèi)然后發(fā)送給服務(wù)器，用于提交敏感數(shù)據(jù)，如用戶名與密碼等。

get：默認(rèn)值，指的是 HTTP GET 方法，表單數(shù)據(jù)會附加在 action 屬性的 URL 中，并以 ?作為分隔符，一般用于不敏感信息，如分頁等。例如：https://www.author.ihuaben.com/?page=1，這里的 page=1 就是 get 方法提交的數(shù)據(jù)。

實(shí)例

<!-- 以下表單使用 GET 請求發(fā)送數(shù)據(jù)到當(dāng)前的 URL，method 默認(rèn)位 GET。 -->

<form>

<label>Name:

<input name="submitted-name" autocomplete="name">

</label>

<button>Save</button>

</form>

<!-- 以下表單使用 POST 請求發(fā)送數(shù)據(jù)到當(dāng)前的 URL。 -->

<form method="post">

<label>Name:

<input name="submitted-name" autocomplete="name">

</label>

<button>Save</button>

</form>

<!-- 表單使用 fieldset, legend, 和 label 標(biāo)簽 -->

<form method="post">

<fieldset>

<legend>Title</legend>

<label><input type="radio" name="radio"> Select me</label>

</fieldset>

</form>

九、HTML 表單標(biāo)簽

*注：帶new圖標(biāo)的是HTML5添加的新標(biāo)簽。

上一章 17.HTML 布局 HTML初學(xué)者教程最新章節(jié) 下一章 19.HTML 框架