三、html表單

.槪念

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

表單就是輸入框、單選框、復選框、按鈕、選項菜單等網頁元素，也稱表單元素。

2.語法

form標簽，所有表單元素都要放在form標簽中。

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

from標簽屬性：

① action：設置發送數據的位置；

② method：用什么方式發送數據。

屬性值分為get和post：get，發送數據時直接顯示在url欄中，發

送數據量小，且不安全；post，直接通過服務器發送數據，用戶看不到過

程，且數據量較大。

3.表單元素

一般使用 input標簽：

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

input標簽屬性：

type屬性：設置當前輸入框的不同形態。值分別為：

password 密碼框，text輸入文字、字母、數字等

submit 提交按鈕，reset 重置按鈕

button 普通按鈕，checkbox 表單復選框

radio表單單選框。

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

value 屬性：當前表單元素的默認值，在按鈕標簽中會顯示在按鈕上，在選項框里必須有，否則后端看到為on。

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

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

maxlength屬性：設置輸入text和password輸入框的最大字符數。

size屬性：當type = "text"或"password"時，設置元素的寬度。

checked屬性：當type為radio或checkbox時，設置單選框或復選框的默認選中項。

4.擴展表單元素

如圖，select 標簽表示聲明下拉列表；option 標簽用于聲明列表項；selected 改變下拉列表默認選中項。

多文本域（textarea）：

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

HTML表單是HTML元素中較為復雜的部分,表單往往和腳本,動態頁面,數據處理等功能相結合,因此是制作動態網站很重要的內容.

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

2.表單工作原理

訪問者在瀏覽有表單的網頁時,可填寫必需的信息,然后按某個按鈕提交,這些信息通過網絡傳送到服務器上.服務器上專門的程序對這些數據進行處理,如果有錯誤會返回錯誤信息,并要求糾正錯誤.當數據完整無誤后,服務器反饋一個輸入完成的信息

3.表單的功能

功能:表單用于向服務器傳輸數據,從而實現用戶與WEB服務器的交互表單能夠包含input系統標簽,比如文本字段,復選框,單選框,提交按鈕等表單還可以包含textarea,select,fieldset,label標簽.

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

1.表單常用的類型有:

2.表單屬性：

3.文本輸入框(text)：

當用戶要在表單中輸入字母,數字內容時,就會用到文本域

代碼如下:

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

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

4.單選按鈕(radio)：

當用戶從若干給定的選擇中選取一個選項時,就會用到單選框.

代碼如下:

用戶只能從眾多選擇中選取一個選項.

當用戶點擊一個單選按鈕時,該按鈕會變為選中狀態,其他所有按鈕會變為非選中狀態.

5.復選框(checkboxes)

當用戶需要從若干給定的選擇中選取一個或多個選項時,就會用到復選框

代碼如下:

用戶一次可以選擇多個選項.

6.重置按鈕(reset)

重置按鈕會清除當前頁面上的用戶輸入的所有數據,把當前頁面恢復到打開時的樣子.

代碼如下:

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

7.提交按鈕

會在當前頁面生成一個提交按鈕,用戶點擊此按鈕,瀏覽器就會把當前頁面用戶輸入的數據傳送到服務端

代碼如下:

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

8.提交文件

當需要把客戶端的文件發送到服務端時,需要用到提交文件按鈕

代碼如下:

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

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

9.下拉菜單

當需要用戶從很多選項中選擇一個或多個選項時,也可以使用下拉列表.

代碼如下:

這樣的下拉列表,用戶只能從其中選擇一個選項,當需要用戶選擇兩個或以下時,可以添加參數來進行控制.

代碼如下:

還可以在

OPTION

中添加

selected="selected"

選項來設置默認值.

10.表單屬性

1.action屬性的說明:

使用action選項來指定服務端的腳本來處理被提交的表單

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

如果省略action屬性,則action會被設置為當前頁面

2.method屬性的說明:

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

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

或

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

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

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

當使用get方法時,表單的數據在頁面地址欄中是可見的

因此,get最適合少量數據的提交,瀏覽器會設定容量限制

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

因為在頁面地址欄中被提交的數據是不可見的.

切圖 qietu(.com)

TML 表單用于搜集不同類型的用戶輸入。HTML5 Input，擁有多個新的表單輸入類型，提供了更好的輸入控制和驗證，今天將為大家帶來HTML中的表單及其input輸入類型。

一、HTML表單

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

2、表單使用標簽<form>來設置，示例：

運行結果：

二、HTML表單屬性：

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

2、action屬性

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

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

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

3、method 屬性

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

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

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

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

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您點擊提交，表單數據會被發送到名為 demo_form.asp 的頁面。</p>

<p>first name 不會被提交，因為此 input 元素沒有 name 屬性。</p>

</body>

</html>

運行結果：

5、target 屬性

target 屬性規定提交表單后在何處顯示響應，target 屬性可設置以下值之一：

默認值為 _self，這意味著響應將在當前窗口中打開。

6、Autocomplete 屬性

autocomplete 屬性規定表單是否應打開自動完成功能。

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

運行結果：

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

三、HTML表單元素：

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

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

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<br>

Last name:<br>

</form>

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

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

</body>

</html>

運行結果：

②　單選按鈕輸入（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>

運行結果：

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

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您點擊提交，表單數據會被發送到名為 demo_form.asp 的頁面。</p>

</body>

</html>

運行結果：

2、<select>元素

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

<!DOCTYPE html>

<html>

<body>

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

</select>

</form>

</body>

</html>

運行結果：

3、<fieldset>元素

<fieldset>元素組合表單中的相關數據

<legend>元素為<fieldset>元素定義標題，示例：

<!DOCTYPE html>

<html>

<body>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

運行結果：

4、<textarea> 元素

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

<!DOCTYPE html>

<html>

<body>

<form>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

運行結果：

5、HTML5<datalist>元素

<datalist> 元素為 <input> 元素規定預定義選項列表。

用戶會在他們輸入數據時看到預定義選項的下拉列表。

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

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

</body>

</html>

運行結果：

四、HTML表單輸入類型

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

<input>中的type：

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

輸入限制：

這就是有關HTML表單的大概內容了，希望這篇HTML的表單及其input輸入類型的知識點能對大家有所幫助。

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

三、html表單

您的項目需求