HTML表單標(biāo)簽詳解：如何用HTML標(biāo)簽打造互動網(wǎng)頁？

這里是云端源想IT，幫你輕松學(xué)IT”

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

世界微塵里

吾寧愛與憎

- 2024.03.18 -

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

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

一、表單的組成

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

表單域

表單域是一個包含表單元素的區(qū)域
在HTML標(biāo)簽中，<form>標(biāo)簽用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞
<form>會把它范圍內(nèi)的表單元素信息提交給服務(wù)器

表單控件

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

提示信息

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

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

二、表單元素

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

1、<form>標(biāo)簽：基礎(chǔ)容器

作用：定義一個表單區(qū)域，用戶可以在其中輸入數(shù)據(jù)進行提交。

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

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

2、<input>標(biāo)簽：數(shù)據(jù)輸入

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

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

type屬性決定了輸入類型，name屬性定義了數(shù)據(jù)的鍵名，placeholder屬性提供了輸入框內(nèi)的提示文本。

<input>標(biāo)簽的屬性

下面舉個例子來說明：

<!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>標(biāo)簽：關(guān)聯(lián)說明

它與輸入字段如文本框、單選按鈕、復(fù)選框等關(guān)聯(lián)起來，以改善網(wǎng)頁的可用性和可訪問性。<label>標(biāo)簽有兩種常見的用法：

1）包裹方式：

在這種用法中，<label>標(biāo)簽直接包裹住關(guān)聯(lián)的表單元素。例如：

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

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

2）使用for屬性關(guān)聯(lián)：

在這種用法中，<label>標(biāo)簽通過for屬性與目標(biāo)表單元素建立關(guān)聯(lián)，for屬性的值應(yīng)與目標(biāo)元素的id屬性相匹配。例如：

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

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

4、<select>和<option>標(biāo)簽：下拉選擇

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

注意點：

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

<!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>標(biāo)簽：多行文本輸入

當(dāng)用戶輸入內(nèi)容較多的情況下，我們可以用表單元素標(biāo)簽替代文本框標(biāo)簽。

允許用戶輸入多行文本。

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

rows和cols屬性分別定義了文本區(qū)域的行數(shù)和列數(shù)。

代碼示例：

<!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>請在此輸入內(nèi)容</textarea>
</form>
</body>
</html>

6、<button>標(biāo)簽：按鈕控件

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

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

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

7、<fieldset>和<legend>標(biāo)簽：分組和標(biāo)題

通常用于在HTML表單中對相關(guān)元素進行分組，并提供一個標(biāo)題來描述這個組的內(nèi)容。

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

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

代碼示例：

<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>包含三個復(fù)選框，用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素，用于提供標(biāo)題。這樣，用戶在填寫表單時可以更清晰地了解每個部分的內(nèi)容。

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

8、<datalist>標(biāo)簽：預(yù)定義選項列表

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

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

下面是一個使用<datalist>標(biāo)簽的代碼示例：

<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>標(biāo)簽：計算結(jié)果輸出

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

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

下面是一個使用<output>標(biāo)簽的示例：

<form>
<label for="num1">數(shù)字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">數(shù)字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">結(jié)果：</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>標(biāo)簽：任務(wù)進度展示

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

示例：

<!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>

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

11、<meter>標(biāo)簽：度量衡指示器

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

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

在這個示例中，我們使用了兩個<meter>標(biāo)簽來分別顯示CPU和內(nèi)存的使用率。value屬性表示當(dāng)前的測量值，min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性，<meter>標(biāo)簽?zāi)軌蚯逦仫@示出資源的使用情況。

需要注意的是，<meter>標(biāo)簽不應(yīng)該用來表示進度條，對于進度條的表示，應(yīng)該使用<progress>標(biāo)簽。

12、<details>和<summary>標(biāo)簽：詳細信息展示

<details>和<summary>標(biāo)簽是HTML5中新增的兩個元素，用于創(chuàng)建可折疊的詳細信息區(qū)域。

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

示例：

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

在這個示例中，我們使用了<details>標(biāo)簽來創(chuàng)建一個可折疊的容器，并在其中添加了一個<summary>標(biāo)簽作為標(biāo)題。當(dāng)用戶點擊這個標(biāo)題時，容器的內(nèi)容會展開或折疊。

總結(jié)：

HTML表單標(biāo)簽是構(gòu)建動態(tài)網(wǎng)頁的基石，它們使得用戶能夠與網(wǎng)站進行有效的交互。

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

我們下期再見！

END

文案編輯|云端學(xué)長

文案配圖|云端學(xué)長

內(nèi)容由：云端源想分享

evExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForm能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

注意：目前基于HTML & CSS的控件正在積極研發(fā)中，可以作為技術(shù)預(yù)覽提供，如果需要使用請下載最新版組件體驗哦~

DevExpress WinForms Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

一組控件和組件允許開發(fā)人員構(gòu)建HTML格式的UI，并使用CSS樣式自定義UI元素的外觀設(shè)置、大小、填充和布局選項，不再需要處理自定義繪制事件或更改大量屬性來修改控件以匹配UI規(guī)范，可以使用HTML和CSS標(biāo)記的知識為桌面應(yīng)用程序構(gòu)建布局。

在上文中，我們?yōu)榇蠹医榻B了HTML-CSS標(biāo)記的，本文將為大家介紹DevExpress中的HTML-CSS感知控件，有興趣的小伙伴可以下載相關(guān)組件體驗。

HTML-CSS-aware控件

HtmlContentControl

HtmlContentControl可以從HTML-CSS標(biāo)記構(gòu)建UI的界面。

HtmlContentPopup

HtmlContentPopup是HtmlContentControl的彈出窗口版本，該組件從HTML-CSS代碼生成UI，并將其顯示為彈出或模態(tài)窗口。

GridControl的ItemsView

新的ItemsView沒有默認的數(shù)據(jù)表示，它僅從開發(fā)者用屬性或動態(tài)地用事件指定的HTML-CSS模板中呈現(xiàn)它的項(數(shù)據(jù)記錄)。

GridControl的TileView

TileView從模板生成它的項(tiles)，開發(fā)者可以在常規(guī)模板和基于HTML-CSS的模板之間進行選擇。

GridControl的WinExplorerView

WinExplorerView支持HTML-CSS模板來構(gòu)建卡片的布局，開發(fā)者可以為每種顯示樣式（超大、大、中、列表、貼片等等）指定HTML-CSS模板，或者動態(tài)地使用一個事件。

GanttControl

GanttControl允許開發(fā)者使用HTML-CSS標(biāo)記來渲染許多元素：

任務(wù)、摘要和里程碑
定期和匯總?cè)蝿?wù)進度
常規(guī)、摘要和里程碑任務(wù)基線
文本標(biāo)簽
交互工具提示
分割的任務(wù)

Scheduler Control

您可以在SchedulerControl中使用基于HTML-CSS的模板來呈現(xiàn)約會。

DirectX Form

標(biāo)準(zhǔn)Visual Studio表單的替代品，為其子控件啟用DirectX硬件加速，并支持基于HTML-CSS的模板。

Alert Controls

AlertControl的模板允許呈現(xiàn)現(xiàn)代應(yīng)用程序通知。

列表框控件和組合框編輯器

開發(fā)人員可以使用基于HTML-CSS的模板來呈現(xiàn)以下控件中的項：

ListBoxControl, CheckedListBoxControl和 ImageListBoxControl
ComboBoxEdit

Accordion Control

AccordionControl允許開發(fā)人員使用HTML-CSS模板來渲染它的UI元素：

項目和組
頁腳的元素
處于最小化狀態(tài)的元素等

豬腳本（原飛豬腳本）以按鍵精靈教學(xué)為主,涉及UiBot，Python,Lua等腳本編程語言,教學(xué)包括全自動辦公腳本,游戲輔助腳本,引流腳本,網(wǎng)頁腳本,安卓腳本,IOS腳本,注冊腳本,點贊腳本,閱讀腳本以及網(wǎng)賺腳本等各個領(lǐng)域。想學(xué)習(xí)按鍵精靈的朋友可以添加金豬腳本粉絲交流群:554127455 學(xué)習(xí)路上不再孤單,金豬腳本伴你一同成長

1.什么是網(wǎng)頁元素特征字符串？

請參考網(wǎng)頁特征字符串詳解；

2.Html系列命令

2.1.HtmlSelect命令

1）HtmlSelect命令只能夠根據(jù)Select項的值來進行選擇，注意這里不是顯示在Select項上的文字，而是該項的value。

一個典型的下拉框HTML代碼如下：

</select>

這里如果要選擇上海，需要選擇值為2的項；

2）級聯(lián)的下拉列表組合。

在有的網(wǎng)頁中，會有幾個級聯(lián)的下拉列表，后一個下拉框會隨前一個框的值變化而發(fā)生變化，典型的有注冊頁面上的省份城市選擇，HtmlSelect命令能夠觸發(fā)Onchange事件，會導(dǎo)致后一個下拉框值發(fā)生變化，但是如果執(zhí)行腳本太快，而導(dǎo)致后一個未能選中正確的值，可以在前一個HtmlSelect后加上適當(dāng)?shù)难訒r；

3）多選表單中的列表控件；有的列表支持多選，在有一些個求職網(wǎng)站中，職業(yè)是可以多選的，這時候可以用%將多個需要選擇的值連接起來傳遞給HtmlSelect命令實現(xiàn)多選；

2.2.HtmlExists命令

HtmlExists命令，能夠判斷指定特征的元素是否存在，并能夠返回具備該特征的元素的個數(shù)。這個命令能夠用來判斷某個元素是否存在，如果為0證明不存在；

2.3.HtmlGet命令

HtmlGet命令比較復(fù)雜，但是功能也非常強大，該命令具備兩個參數(shù)，第一個參數(shù)為獲取類型，目前支持的值如下所示：

序號值適用對象

1 text 得到指定元素的文本值，對應(yīng)DOM屬性innerText

2 html 得到指定元素內(nèi)部的HTML代碼，對應(yīng)DOM屬性innerHTML

3 outerHtml 得到元素整體的HTML代碼，對應(yīng)DOM屬性的outerHTML

4 value 得到元素的Value值，用于獲取表單元素內(nèi)部的值

5 src 得到圖像元素的src屬性，用于IMG標(biāo)簽對象

6 href 得到鏈接元素的鏈接地址，用于A標(biāo)簽

7 …其他名稱其他屬性，如果您使用的是合法的屬性名稱，就能夠返回對應(yīng)的值。如何才是合法的屬性？請參閱HTML標(biāo)準(zhǔn)。

第二個參數(shù)為特征字符串，如果匹配多個，只能返回第一個元素的值；

例如，獲得淘寶貨物價格：

Plugin price=Web.HtmlGet("text","id:id_Price")

獲取某個表單文本的值

Plugin email=Web.HtmlGet("value","name:Email")

2.4.RunJS命令

RunJS命令提供了直接運行Javascript的功能，如果您對JS非常熟悉，就能夠極大的擴展WQM的功能。

RunJS命令支持兩中執(zhí)行方式，第一個參數(shù)設(shè)置為0時，能夠執(zhí)行一段沒有返回值的Javascript，

例如：

RunJS(0,"alert('hello');")

第一個參數(shù)設(shè)置為1時，能執(zhí)行一段js并返回由return語句返回的值，返回值為字符串類型；

例如：返回Html文檔的title；

RunJS(1,"var t=document.title;return t;")

如果您分析到網(wǎng)頁中某個按鈕實際上就是執(zhí)行了一個函數(shù)，例如

您就可以直接調(diào)用

RunJS(0,"dosomething();")

JQuery的支持，網(wǎng)頁按鍵精靈集成了Jquery1.3.2，為了不與其他JQ的庫發(fā)生沖突，使用了wqmjq來代替$操作符，如果您需要直接使用JQ來操作網(wǎng)頁，可使用wqmjq來執(zhí)行Jquery語句：

RunJS(0,"wqmjq('#test').click();")

在線咨詢

上一篇：初識HTML5（三）HTML5基本標(biāo)記的理解和使用
下一篇：CEF格式說明

您的項目需求

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

整合營銷服務(wù)商

HTML表單標(biāo)簽詳解：如何用HTML標(biāo)簽打造互動網(wǎng)頁？

一、表單的組成

二、表單元素