干貨：HTML中表單元素理解

.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)

單

什么是HTML表單？

表單form是網頁獲取用戶輸入數據的一種方式，如圖：

表單

表單中通常包括各種輸入框、文本標簽、提交按鈕等。

1、一個簡單的表單

首先要有一個form標簽，其他表單控件放到from標簽中，第一個是label標簽用來描述后面的文本框中需要輸入什么內容，然后是一個input標簽，type的值是text表示是一個文本框，然后也是一個input標簽，type的值是submit，表示是一個提交按鈕，當然想要真正的提交數據還需要一些額外的屬性。

<form action="">

 <label for="">學生姓名</label>

 <input type="text">

 <input type="submit" value="保存">

</form>

2、form標簽不但包含所有的表單控件，還會告訴瀏覽器當你提交表單的時候要把表單數據發送到哪里，以及使用什么方式發送。

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

</form>

action屬性指定表單數據要發送到哪個服務器腳本上，例如這里發送到login.php ，method屬性指定服務器發送的方式，有post和get兩種方式，在表單當中常用post。

3、for屬性和id屬性

label標簽for屬性的值應該和input標簽中id屬性的值一致，這樣這兩個表單控件就會被關聯起來。如下，這里將label關聯到input上。

<form>

 <label for="student_name">學生姓名</label>

 <input type="text" id="student_name">

 <input type="submit" value="保存">

</form>

for屬性

當我們點擊文本標簽"學生姓名"時候，文本框會自動獲取輸入光標，等待用戶輸入數據。

4、input標簽的type屬性

type屬性決定input標簽顯示成什么樣子，type屬性種類很多，如下：

 <form>

 <input type="text">

 <input type="checkbox">

 <input type="radio">

 <input type="file">

 <input type="password">

 <input type="submit">

 <input type="reset">

 </form>

5、文本區域

input文本框標簽可以接受少量的單行文本，textarea標簽可以接受用戶輸入的多行文本，如下，和input標簽不同，textarea標簽必須有開始標簽和結束標簽。

<label for="summary">總結</label>

 <textarea id="summary" cols="30" rows="10"></textarea>

文本區域

6、下拉列表

使用select標簽和option標簽創建下拉列表

<select name="" id="">

 <option value="">男</option>

 <option value="">女</option>

 </select>

綜合示例：

<h2>學生信息</h2>

 <form action="success.html">

 <label for="student-name">姓名</label>

 <input type="text" id="student-name" value=""><br>

 <label for="photos">上傳照片</label>

 <input type="file" id="photos"><br>

 <label for="">性別</label>

 <input type="radio" name="gender" id="male" checked><label for="male">男</label>

 <input type="radio" name="gender" id="female"><label for="female">女</label><br>

 <label for="">班級</label>

 <select name="" id="">

 <option value="">一班</option>

 <option value="" selected>二班</option>

 <option value="">三班</option>

 <option value="">四班</option>

 </select><br>

 <label for="teacher-comments">老師評語</label>

 <textarea name="" id="teacher-comments" cols="30" rows="10"></textarea><br>

 <input type="checkbox" id="pass" checked>

 <label for="pass">考試通過</label><br>

 <input type="submit" value="提交">

 <input type="reset" value="重新填寫">

 </form>

html表單

每天進步一點點，跟著教頭學開發。

頁編程之表單詳解。

同學們好，今天我要跟大家分享的是html中前后臺數據交互的重要內容——form標簽。通過form標簽，用戶可以在前臺填寫資料，然后通過form的method屬性中設置的提交方式，提交至action屬性規定的后端處理程序中進行處理。

我們經常在網頁上看到的填寫、注冊、登錄、修改資料等操作都需要使用form標簽。讓我們來看看今天的實例效果吧。

form標簽對于用戶來說是不可見的，如果沒有這一句話，你們只能看到一個完全空白的網頁。

可以將form標簽想象成一個盒子，其中放置了輸入框、單選框、復選框等控件。當用戶填寫完所有控件的內容并點擊提交按鈕時，這個盒子就會被蓋上，并被直接發送到服務器進行處理。

接下來，我們來看看實現代碼。form標簽是一個圍堵標簽，它具有許多屬性，但并非所有屬性都是必需的。因此，根據需要設置相應的屬性即可。

首先，我要重點介紹幾個常用的屬性：action、name、method。

action屬性設置了服務端處理程序的URL地址。以郵寄盒子的理解來說，action就是收件人地址。

name屬性設置了表單的名稱，這個名稱可以被前臺的JS調用。同時，在一個網頁中存在多個表單標簽時，它也可以用來給服務器進行區分。

method屬性設置了表單的提交方式，它有兩個值post和get。post是密文，而get是明文，post沒有數據長度限制，而get只能傳遞大約3000個字符。

以郵寄舉例，get是直接將寫著內容的信紙寄出，而post則是將信紙裝進信封里寄出。enctype不是常用屬性，但在使用時非常重要。它規定了從表單數據發送到服務器之前如何對其進行編碼，共有三個值，分別對應文字數據、多媒體數據和文件數據。詳情請參考匯總文檔。值得一提的是，只有在method等于post時，enctype的值才會生效。

除了這三個屬性外，還有accept-charset、autocomplete和history。accept-charset聲明了服務端可以處理的字符集，autocomplete是否開啟前臺自動填充歷史數據及用戶填寫一次之后，再填寫會在瀏覽器中詢問是否根據過往填寫的內容進行自動填充。

·將logo的"novalidate"設置為"true"，可以直接提交未經驗證的表單數據。通常，我們需要在前臺使用JS或控件驗證用戶填寫的數據是否符合格式要求。然而，這個屬性可以直接繞過驗證。

·將"target"設置為"_blank"，可以打開新的窗口進行提交。這與a標簽的"target"屬性相同。現在，我的理解是這樣的。在后面的C#章節中，我們將結合具體的使用場景進行詳細的講解。

今天的分享就到這里。希望各位同學能按照我的要求，認真練習寫三次。這樣，即使不看視頻，你們也能寫出正確的代碼。所有的案例和相關文檔都可以向我索取。我們下期再見。網頁編程、服務端編程、數據庫和算法。如果你想學習編程，記得關注我哦！

在線咨詢

上一篇：HTML標簽以及各個標簽屬性大全（網頁制作必備）
下一篇：前端技巧：css居中（不確定寬度）

您的項目需求

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

整合營銷服務商

干貨：HTML中表單元素理解

1、一個簡單的表單

2、form標簽不但包含所有的表單控件，還會告訴瀏覽器當你提交表單的時候要把表單數據發送到哪里，以及使用什么方式發送。

3、for屬性和id屬性

4、input標簽的type屬性

5、文本區域

6、下拉列表

綜合示例：

您的項目需求