HTML表單標簽詳解：如何用HTML標簽打造互動網頁？

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

世界微塵里

吾寧愛與憎

- 2024.03.18 -

在互聯網的世界中，表單是用戶與網站進行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物，表單都扮演著至關重要的角色。在網頁中，我們需要跟用戶進行交互，收集用戶資料，此時就需要用到表單標簽。

HTML提供了一系列的表單標簽，使得開發者能夠輕松地創建出功能豐富的表單。今天我們就來深入探討這些標簽，了解它們的作用以及如何使用它們來構建一個有效的用戶界面。

一、表單的組成

在HTML中，一個完整的表單通常由表單域、表單控件（表單元素）和提示信息三個部分構成。

表單域

表單域是一個包含表單元素的區域
在HTML標簽中，<form>標簽用于定義表單域，以實現用戶信息的收集和傳遞
<form>會把它范圍內的表單元素信息提交給服務器

表單控件

這些是用戶與表單交云的各種元素，如<input>（用于創建不同類型的輸入字段）、<textarea>（用于多行文本輸入）、<button>（用于提交表單或執行其他操作）、<select>和<option>（用于創建下拉列表）等。

提示信息

這些信息通常通過<label>標簽提供，它為表單控件提供了描述性文本，有助于提高可訪問性。<label>標簽通常與<input>標簽一起使用，并且可以通過for屬性與<input>標簽的id屬性關聯起來。

這三個部分共同構成了一個完整的HTML表單，使得用戶可以輸入數據，并通過點擊提交按鈕將這些數據發送到Web服務器進行處理。

二、表單元素

在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內容控件。下面就來介紹HTML中常用的表單元素。

1、<form>標簽：基礎容器

作用：定義一個表單區域，用戶可以在其中輸入數據進行提交。

<form action="submit.php" method="post">

其中action屬性指定了數據提交到的服務器端腳本地址，method屬性定義了數據提交的方式（通常為GET或POST）。

2、<input>標簽：數據輸入

<input>標簽是一個單標簽，用于收集用戶信息。允許用戶輸入文本、數字、密碼等。

<input type="text" name="username" placeholder="請輸入用戶名">

type屬性決定了輸入類型，name屬性定義了數據的鍵名，placeholder屬性提供了輸入框內的提示文本。

<input>標簽的屬性

下面舉個例子來說明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<form>
用戶名：<input type="text" value="請輸入用戶名"><br>
密碼：<input type="password"><br>
性別：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
愛好：吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免費注冊">
<input type="reset" value="重新填寫">
<input type="button" value="獲取短信驗證碼"><br>
上傳頭像：<input type="file">
</form>
</body>
</html>

3、<label>標簽：關聯說明

它與輸入字段如文本框、單選按鈕、復選框等關聯起來，以改善網頁的可用性和可訪問性。<label>標簽有兩種常見的用法：

1）包裹方式：

在這種用法中，<label>標簽直接包裹住關聯的表單元素。例如：

<label>用戶名：<input type="text" name="username"></label>

這樣做的好處是用戶點擊標簽文本時，關聯的輸入字段會自動獲取焦點，從而提供更好的用戶體驗。

2）使用for屬性關聯：

在這種用法中，<label>標簽通過for屬性與目標表單元素建立關聯，for屬性的值應與目標元素的id屬性相匹配。例如：

<label for="username">用戶名：</label><input type="text" id="username" name="username">

這樣做的優勢是單擊標簽時，相關的表單元素會自動選中（獲取焦點），從而提高可用性和可訪問性。

4、<select>和<option>標簽：下拉選擇

在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，我們可以使用標簽控件定義下拉列表。

注意點：

<select>中至少包含一對<option>
在<option>中定義selected=“selected”時，當前項即為默認選中項

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍貫：
<select>
<option>山東</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>

5、<textarea>標簽：多行文本輸入

當用戶輸入內容較多的情況下，我們可以用表單元素標簽替代文本框標簽。

允許用戶輸入多行文本。

<textarea name="message" rows="5" cols="30">默認文本</textarea>

rows和cols屬性分別定義了文本區域的行數和列數。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反饋：
<textarea>請在此輸入內容</textarea>
</form>
</body>
</html>

6、<button>標簽：按鈕控件

創建一個可點擊的按鈕，通常用于提交或重置表單。它允許用戶放置文本或其他內聯元素（如<i>、<b>、<strong>、<br>、<img>等），這使得它比普通的<input type="button">具有更豐富的內容和更強的功能。

<button type="submit">提交</button>

type屬性為submit時表示這是一個提交按鈕。

7、<fieldset>和<legend>標簽：分組和標題

通常用于在HTML表單中對相關元素進行分組，并提供一個標題來描述這個組的內容。

<fieldset>標簽：該標簽用于在表單中創建一組相關的表單控件。它可以將表單元素邏輯分組，并且通常在視覺上通過圍繞這些元素繪制一個邊框來區分不同的組。這種分組有助于提高表單的可讀性和易用性。

<legend>標簽：它總是與<fieldset>標簽一起使用。<legend>標簽定義了<fieldset>元素的標題，這個標題通常會出現在瀏覽器渲染的字段集的邊框上方。<legend>標簽使得用戶更容易理解每個分組的目的和內容。

代碼示例：

<form>
<fieldset>
<legend>個人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>興趣愛好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音樂</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">運動</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">閱讀</label><br>
</fieldset>
<input type="submit" value="提交">
</form>

在這個示例中，我們使用了兩個<fieldset>元素來組織表單的不同部分。第一個<fieldset>包含姓名和郵箱字段，而第二個<fieldset>包含三個復選框，用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素，用于提供標題。這樣，用戶在填寫表單時可以更清晰地了解每個部分的內容。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

8、<datalist>標簽：預定義選項列表

<datalist>標簽是HTML5中引入的一個新元素，它允許開發者為輸入字段提供預定義的選項列表。當用戶在輸入字段中輸入時，瀏覽器會顯示一個下拉菜單，其中包含與用戶輸入匹配的預定義選項。

使用<datalist>標簽可以提供更好的用戶體驗，因為它可以幫助用戶選擇正確的選項，而不必手動輸入整個選項。此外，<datalist>還可以與<input>元素的list屬性結合使用，以將預定義的選項列表與特定的輸入字段關聯起來。

下面是一個使用<datalist>標簽的代碼示例：

<form>
<label for="color">選擇你喜歡的顏色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="紅色">
<option value="藍色">
<option value="綠色">
<option value="黃色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>

9、<output>標簽：計算結果輸出

<output>標簽是HTML5中引入的一個新元素，它用于顯示計算結果或輸出。該標簽通常與JavaScript代碼結合使用，通過將計算結果賦值給<output>元素的value屬性來顯示結果。

<output>標簽可以用于各種類型的計算和輸出，例如數學運算、字符串處理、數組操作等。它可以與<input>元素一起使用，以實時更新計算結果。

下面是一個使用<output>標簽的示例：

<form>
<label for="num1">數字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">數字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">結果：</label>
<output id="result"></output>
</form>

<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>

10、<progress>標簽：任務進度展示

<progress>標簽是HTML5中用于表示任務完成進度的一個新元素。它通過value屬性和max屬性來表示進度，其中value表示當前完成的值，而max定義任務的總量或最大值。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>

<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>

在上面的示例中，我們創建了一個名為"fileDownload"的<progress>元素，并設置了初始值為0，最大值為100。我們還添加了一個按鈕，當用戶點擊該按鈕時，會觸發名為"startDownload"的JavaScript函數。這個函數模擬了一個文件下載過程，通過循環逐步增加<progress>元素的value屬性值，從而顯示下載進度。

11、<meter>標簽：度量衡指示器

<meter>標簽在HTML中用于表示度量衡指示器，它定義了一個已知范圍內的標量測量值或分數值，通常用于顯示磁盤使用情況、查詢結果的相關性等。例如：

<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>內存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>

在這個示例中，我們使用了兩個<meter>標簽來分別顯示CPU和內存的使用率。value屬性表示當前的測量值，min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性，<meter>標簽能夠清晰地顯示出資源的使用情況。

需要注意的是，<meter>標簽不應該用來表示進度條，對于進度條的表示，應該使用<progress>標簽。

12、<details>和<summary>標簽：詳細信息展示

<details>和<summary>標簽是HTML5中新增的兩個元素，用于創建可折疊的詳細信息區域。

<details>標簽定義了一個可以展開或折疊的容器，其中包含一些額外的信息。它通常與<summary>標簽一起使用，<summary>標簽定義了<details>元素的標題，當用戶點擊該標題時，<details>元素的內容會展開或折疊。

示例：

<details>
<summary>點擊查看詳細信息</summary>
<p>這里是一些額外的信息，用戶可以點擊標題來展開或折疊這些信息。</p>
</details>

在這個示例中，我們使用了<details>標簽來創建一個可折疊的容器，并在其中添加了一個<summary>標簽作為標題。當用戶點擊這個標題時，容器的內容會展開或折疊。

總結：

HTML表單標簽是構建動態網頁的基石，它們使得用戶能夠與網站進行有效的交互。

通過合理地使用這些標簽，開發者可以創建出既美觀又功能強大的表單，從而提升用戶體驗和網站的可用性。所以說，掌握這些標簽的使用，對于前端開發者來說是至關重要的。

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

近教學過程中需要實現form表單中的input文本框在用戶點擊按鈕時自動生成新的文本框，在完成數據填寫之后通過ajax批量將填寫的信息存儲到數據庫中。每一行文本框對應數據庫表中的記錄。初始狀態如下圖：

文本框組合（行）

如上圖，前端用戶需要借助文本框批量提交數據，每一行有5個文本框，對應后臺表中的一條記錄。用戶可填寫數據，完成填寫后點擊添加，頁面自動添加新的一行文本框。效果如下：

動態文本框行添加生成效果

上圖給出了點擊添加之后的新效果，整個文檔HTML代碼描述如下：

表單代碼

代碼描述如上，文本框以label標簽為基礎進行分組，每5個為一行，所有的input文本框具有相同的class名稱。

解決措施：

針對待解決的問題，設計采用JavaScript DOM文檔對象模型提供的方法，將表單看成結點，調用附加結點方法實現動態結點的添加。主要涉及使用到的方法函數如下：

(1) getElementById()方法

獲取元素（結點）函數，通過使用HTML標記對應的ID標簽值獲取該元素，返回元素對象，可進一步執行元素的操作。

(2) createElement()方法

創建結點元素方法，該方法用于實現動態創建新結點元素，為下一步添加新結點奠定基礎。

(3) setAttribute()方法

該方法主要用于實現結點屬性的設置，函數需要提供兩個參數，分別為屬性名稱與屬性值。

(4) appendChild()方法

附加結點方法，該方法主要用于將新創建結點附加到指定結點的尾部。

(5) getElementsByClassName()方法

該方法主要用于返回HTML文檔中具有相同Class名字的一組元素的集合，并可通過下標訪問其中的每一個元素。

為將前端表單文本框組合與數據表中行對應，涉及采用插入數據類insetv實現對每一行文本框數據進行存儲。該類設計描述如下：

行數據（記錄）類

每一行使用實例化的insetv進行數據存儲，針對多行的情況，設計采用數組對每一行進行存儲。即數組的每一個元素都是insetv對象。最終實現數組按照數據行對填寫信息進行存儲。然后自定義兩個按鈕的onclick消息響應函數，實現存儲數據與動態表格生成。其中addRow用于生成新的行，該函數實現代碼描述如下：

添加文本框（行）函數

定義insert方法用于獲取表單所有文本框填寫的信息，并采用數組對獲取的信息進行存儲，數組每一個元素為insetv對象，對應每一條記錄。Insert方法實現描述如下圖所示：

插入數據操作函數

本例所有的文本框行都是JS編碼實現，因此需要在window對象的onload實踐中調用addRows方法實現初始化時生成第一行。實現代碼如下：

初始化首行函數

為方便測試演示與展示，我們將獲取的數據直接在本頁面進行展示，實際測試過程描述如下動圖所示：

動態實現效果展示

在插入操作過程我們使用console.log()對輸入數據對應數組進行了控制臺的輸出。輸出結果如下：

數據獲取存儲結果

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，該案例相關文章鏈接如下：

前端開發-拼圖游戲（N數碼問題）A*算法智能求解效果展示

前端設計-JavaScript美女拼圖游戲開發實例

前端設計-教你如何快速繪制HTML5動畫

eb前端HTML/CSS教程大綱

本文總結了HTML和CSS的教程大綱，大家可以保存收藏下來的，這個是一個學習大綱頁面方便自己找文章，HTML和CSS是前端的基礎，這個是需要學的，有了基礎后面的JS、vue框架等等，都容易學。

古語有言，名師出高徒，如果跟弱者學習，那么就會成為弱者，跟強者學習，就會成為強者，學習跟混社會是一樣的道理，如果你跟精明的商人學習你就會成為商業高手，如果你跟擺地攤的學習，那你就成為擺地攤的貨色，學習前端也是如此，如果你是真心想學好前端，你可以來這個群 153775627，前端大神之路正為你敞開！

HTML/CSS教程大綱

HTML教程：

1、HTML是什么？

2、HTML使用哪個編輯器好

3、HTML基礎標簽的使用

4、HTML元素標簽

5、HTML標題的重要性

6、什么是HTML段落

7、HTML常用的文本格式

8、HTML跳轉鏈接制作

9、HTML頭部了解

10、HTML中的CSS是什么？

11、HTML圖片調用

12、HTML表格編寫方法

13、HTML列表編寫方法

14、HTML表單的玩法

15、HTML模塊

16、HTML網頁布局

17、HTML顏色調用

18、什么是HTML腳本

19、HTML中URL的由來

20、HTML字符實體

21、HTML用過的標簽元素

22、HTML總結

CSS教程：

1、什么是CSS

2、CSS語法

3、CSS中的ID和class

4、CSS創建

5、CSS背景

6、CSS文本

7、CSS字體

8、CSS鏈接

9、CSS列表

10、CSS表格

11、CSS盒子

12、CSS邊框

13、CSS中outline屬性

14、CSS外邊距

15、CSS填充

16、CSS分組和嵌套選擇器

17、CSS尺寸

18、CSS中的Display與Visibility

19、CSS中的Positioning定位

20、CSS浮動

21、CSS水平對齊

22、CSS組合選擇符

23、CSS偽類(Pseudo-classes)

24、CSS偽元素

25、CSS導航欄

26、CSS下拉框

27、CSS媒體類型

28、CSS屬性選擇器

29、CSS總結

HTML和CSS主要是做靜態頁面，做得高深一點，做成動態及特效也是可以做到，主要是看自己怎么運用，在這里發的，只是我最初學前端的一些知識，這也是最基礎的知識，算不上有多高深，但是基礎要打牢，后面的才會好學，話不多少，就說到這！

在線咨詢

上一篇：如何使用HTML寫文檔標簽和文本標簽
下一篇：常見六大 Web 安全攻防解析 - 技術頭條

您的項目需求

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

整合營銷服務商

HTML表單標簽詳解：如何用HTML標簽打造互動網頁？

一、表單的組成

二、表單元素

解決措施：

您的項目需求

一、表單的組成