三、html表單

.槪念

用來收集用戶輸入的信息，定義采集數(shù)據(jù)的范圍，并且完成與用戶的基本交互的作用。

表單就是輸入框、單選框、復(fù)選框、按鈕、選項(xiàng)菜單等網(wǎng)頁元素，也稱表單元素。

2.語法

form標(biāo)簽，所有表單元素都要放在form標(biāo)簽中。

<form action = "#" method = "get">xx</form>   <!-- # 是沒有數(shù)據(jù)時的占位-->

from標(biāo)簽屬性：

① action：設(shè)置發(fā)送數(shù)據(jù)的位置；

② method：用什么方式發(fā)送數(shù)據(jù)。

屬性值分為get和post：get，發(fā)送數(shù)據(jù)時直接顯示在url欄中，發(fā)

送數(shù)據(jù)量小，且不安全；post，直接通過服務(wù)器發(fā)送數(shù)據(jù)，用戶看不到過

程，且數(shù)據(jù)量較大。

3.表單元素

一般使用 input標(biāo)簽：

<form action = "#" method>
 			<input type  = "text" name = "age"/>
  </form>

input標(biāo)簽屬性：

type屬性：設(shè)置當(dāng)前輸入框的不同形態(tài)。值分別為：

password 密碼框，text輸入文字、字母、數(shù)字等

submit 提交按鈕，reset 重置按鈕

button 普通按鈕，checkbox 表單復(fù)選框

radio表單單選框。

name 屬性：給當(dāng)前的表單元素數(shù)據(jù)起個名字，不能是中文和特殊符號。（除了按鈕標(biāo)簽外需要輸入數(shù)據(jù)的都要加name屬性）

value 屬性：當(dāng)前表單元素的默認(rèn)值，在按鈕標(biāo)簽中會顯示在按鈕上，在選項(xiàng)框里必須有，否則后端看到為on。

例如，<input type = "radio" name = "sex" value = "男"/>，傳遞給后端數(shù)據(jù)為sex=男，如果不寫value，則顯示sex=on。

placeholder屬性：輸入框的提示信息。

maxlength屬性：設(shè)置輸入text和password輸入框的最大字符數(shù)。

size屬性：當(dāng)type = "text"或"password"時，設(shè)置元素的寬度。

checked屬性：當(dāng)type為radio或checkbox時，設(shè)置單選框或復(fù)選框的默認(rèn)選中項(xiàng)。

4.擴(kuò)展表單元素

如圖，select 標(biāo)簽表示聲明下拉列表；option 標(biāo)簽用于聲明列表項(xiàng)；selected 改變下拉列表默認(rèn)選中項(xiàng)。

多文本域（textarea）：

.HTML中表單元素的基本概念

HTML表單是HTML元素中較為復(fù)雜的部分,表單往往和腳本,動態(tài)頁面,數(shù)據(jù)處理等功能相結(jié)合,因此是制作動態(tài)網(wǎng)站很重要的內(nèi)容.

表單一般用來收集用戶的輸入信息

2.表單工作原理

訪問者在瀏覽有表單的網(wǎng)頁時,可填寫必需的信息,然后按某個按鈕提交,這些信息通過網(wǎng)絡(luò)傳送到服務(wù)器上.服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理,如果有錯誤會返回錯誤信息,并要求糾正錯誤.當(dāng)數(shù)據(jù)完整無誤后,服務(wù)器反饋一個輸入完成的信息

3.表單的功能

功能:表單用于向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與WEB服務(wù)器的交互表單能夠包含input系統(tǒng)標(biāo)簽,比如文本字段,復(fù)選框,單選框,提交按鈕等表單還可以包含textarea,select,fieldset,label標(biāo)簽.

4.表單的常用類型及說明

1.表單常用的類型有:

2.表單屬性：

3.文本輸入框(text)：

當(dāng)用戶要在表單中輸入字母,數(shù)字內(nèi)容時,就會用到文本域

代碼如下:

注意,表單本身并不可見.同時,在大多瀏覽器中,文本域的缺省寬度是20個字符.

在密碼域中輸入的字符,瀏覽器將使用項(xiàng)目符號來代替這些字符.

4.單選按鈕(radio)：

當(dāng)用戶從若干給定的選擇中選取一個選項(xiàng)時,就會用到單選框.

代碼如下:

用戶只能從眾多選擇中選取一個選項(xiàng).

當(dāng)用戶點(diǎn)擊一個單選按鈕時,該按鈕會變?yōu)檫x中狀態(tài),其他所有按鈕會變?yōu)榉沁x中狀態(tài).

5.復(fù)選框(checkboxes)

當(dāng)用戶需要從若干給定的選擇中選取一個或多個選項(xiàng)時,就會用到復(fù)選框

代碼如下:

用戶一次可以選擇多個選項(xiàng).

6.重置按鈕(reset)

重置按鈕會清除當(dāng)前頁面上的用戶輸入的所有數(shù)據(jù),把當(dāng)前頁面恢復(fù)到打開時的樣子.

代碼如下:

<form><p><input type="reset"></p></form>

7.提交按鈕

會在當(dāng)前頁面生成一個提交按鈕,用戶點(diǎn)擊此按鈕,瀏覽器就會把當(dāng)前頁面用戶輸入的數(shù)據(jù)傳送到服務(wù)端

代碼如下:

<form><p><input type="button" value="按鈕"/></p></form>

8.提交文件

當(dāng)需要把客戶端的文件發(fā)送到服務(wù)端時,需要用到提交文件按鈕

代碼如下:

<form action="/index/" method="post"><p><input type="file"/></p></form>

上傳文件注意兩點(diǎn): 請求方式必須是post enctype="multipart/form-data"

9.下拉菜單

當(dāng)需要用戶從很多選項(xiàng)中選擇一個或多個選項(xiàng)時,也可以使用下拉列表.

代碼如下:

這樣的下拉列表,用戶只能從其中選擇一個選項(xiàng),當(dāng)需要用戶選擇兩個或以下時,可以添加參數(shù)來進(jìn)行控制.

代碼如下:

還可以在

OPTION

中添加

selected="selected"

選項(xiàng)來設(shè)置默認(rèn)值.

10.表單屬性

1.action屬性的說明:

使用action選項(xiàng)來指定服務(wù)端的腳本來處理被提交的表單

<form action="/index/" method="post">

如果省略action屬性,則action會被設(shè)置為當(dāng)前頁面

2.method屬性的說明:

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

<form action="/index/" method="post">

或

<form action="/index/" method="get">

3.get方法或post方法的使用方式說明:

如果表單提交是被動的(比如搜索引擎查詢),并且沒有敏感信息.

當(dāng)使用get方法時,表單的數(shù)據(jù)在頁面地址欄中是可見的

因此,get最適合少量數(shù)據(jù)的提交,瀏覽器會設(shè)定容量限制

如果表單正在更新數(shù)據(jù),或者包含敏感信息(比如密碼)時應(yīng)該使用post,post的安全性更好.

因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的.

切圖 qietu(.com)

TML 表單用于搜集不同類型的用戶輸入。HTML5 Input，擁有多個新的表單輸入類型，提供了更好的輸入控制和驗(yàn)證，今天將為大家?guī)鞨TML中的表單及其input輸入類型。

一、HTML表單

1、HTML表單用于收集不同類型的用戶輸入，是一個包含表單元素的區(qū)域并且允許用戶在表單中輸入內(nèi)容，比如文本域（textarea）、下拉列表、單選框（radio=buttons）、復(fù)選框（checkboxes）等。

2、表單使用標(biāo)簽<form>來設(shè)置，示例：

運(yùn)行結(jié)果：

二、HTML表單屬性：

1、HTML表單包含表單元素，表單元素是指不同類型的input元素、復(fù)選框、單選按鈕、提交按鈕等。

2、action屬性

在上面的示例中出現(xiàn)了action屬性，action屬性定義在提交表單執(zhí)行的動作，向服務(wù)器提交表單的通常做法是使用提交按鈕。

通常，表單會被提交到web服務(wù)器上的網(wǎng)頁，上面的例子中，則指定了某個服務(wù)器腳本來處理被提交表單。

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

3、method 屬性

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

如果表單提交是被動的（比如搜索引擎查詢），并且沒有敏感信息，使用get。

如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼），使用post。

4、如果要正確地被提交，每個輸入字段必須設(shè)置一個 name 屬性，示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>first name 不會被提交，因?yàn)榇?input 元素沒有 name 屬性。</p>

</body>

</html>

運(yùn)行結(jié)果：

5、target 屬性

target 屬性規(guī)定提交表單后在何處顯示響應(yīng)，target 屬性可設(shè)置以下值之一：

默認(rèn)值為 _self，這意味著響應(yīng)將在當(dāng)前窗口中打開。

6、Autocomplete 屬性

autocomplete 屬性規(guī)定表單是否應(yīng)打開自動完成功能。

啟用自動完成功能后，瀏覽器會根據(jù)用戶之前輸入的值自動填寫值，示例：

運(yùn)行結(jié)果：

7、所有<form>屬性的列表：

三、HTML表單元素：

1、<input>元素是最重要的表單元素，有很多的形態(tài)，根據(jù)不同的type屬性，例如：

①　文本輸入（text），示例：

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<br>

Last name:<br>

</form>

<p>請注意表單本身是不可見的。</p>

<p>同時請注意文本字段的默認(rèn)寬度是 20 個字符。</p>

</body>

</html>

運(yùn)行結(jié)果：

②　單選按鈕輸入（radio），示例：

<!DOCTYPE html>

<html>

<body>

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

</body>

</html>

運(yùn)行結(jié)果：

③　提交按鈕（submit），示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

運(yùn)行結(jié)果：

2、<select>元素

<select>元素定義下拉列表，示例：

<!DOCTYPE html>

<html>

<body>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

運(yùn)行結(jié)果：

3、<fieldset>元素

<fieldset>元素組合表單中的相關(guān)數(shù)據(jù)

<legend>元素為<fieldset>元素定義標(biāo)題，示例：

<!DOCTYPE html>

<html>

<body>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

運(yùn)行結(jié)果：

4、<textarea> 元素

<textarea> 元素定義多行輸入字段（文本域）、示例：

<!DOCTYPE html>

<html>

<body>

<form>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

運(yùn)行結(jié)果：

5、HTML5<datalist>元素

<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項(xiàng)列表。

用戶會在他們輸入數(shù)據(jù)時看到預(yù)定義選項(xiàng)的下拉列表。

<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性，示例：

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

</body>

</html>

運(yùn)行結(jié)果：

四、HTML表單輸入類型

輸入類型	定義
text	定義供文本輸入的單行輸入字段
password	定義密碼字段
submit	定義提交表單數(shù)據(jù)至表單處理程序的按鈕
radio	定義單選按鈕
checkbox	定義復(fù)選框

<input>中的type：

類型	定義
radio	定義單選按鈕
checkbox	定義復(fù)選框
button	定義按鈕
number	用于應(yīng)該包含數(shù)字值的輸入字段
date	用于應(yīng)該包含日期的輸入字段
color	用于應(yīng)該包含顏色的輸入字段
range	用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段
month	允許用戶選擇月份和年份
week	允許用戶選擇周和年
time	允許用戶選擇時間（無時區(qū)）
datetime	允許用戶選擇日期和時間（有時區(qū)）
datetime-local	允許用戶選擇日期和時間（無時區(qū)）
email	用于應(yīng)該包含電子郵件地址的輸入字段
search	用于搜索字段（搜索字段的表現(xiàn)類似常規(guī)文本字段）
tel	用于應(yīng)該包含電話號碼的輸入字段
url	用于應(yīng)該包含 URL 地址的輸入字段

輸入限制：

這就是有關(guān)HTML表單的大概內(nèi)容了，希望這篇HTML的表單及其input輸入類型的知識點(diǎn)能對大家有所幫助。

在線咨詢

上一篇：html頁面數(shù)字滾動效果
下一篇：是時候拯救我的 HTML 技術(shù)了

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

三、html表單

您的項(xiàng)目需求