HTML表單及其Input輸入類型

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

一、HTML表單

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

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

運行結果：

二、HTML表單屬性：

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

2、action屬性

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

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

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

3、method 屬性

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

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

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

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

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

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

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

</body>

</html>

運行結果：

5、target 屬性

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

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

6、Autocomplete 屬性

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

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

運行結果：

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>同時請注意文本字段的默認寬度是 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>如果您點擊提交，表單數(shù)據(jù)會被發(fā)送到名為 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>元素組合表單中的相關數(shù)據(jù)

<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> 元素規(guī)定預定義選項列表。

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

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

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

</body>

</html>

運行結果：

四、HTML表單輸入類型

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

<input>中的type：

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

輸入限制：

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

單

1 ：表單標簽

<form></form>
屬性：
action = '接口地址'
method = 'get / post'
name = '表單名稱'

2 ：表單控件

<input>
屬性：
type = '控件類型'
name：屬性標識表單域的名稱；
Value：屬性定義表單域的默認值，其他屬性根據(jù)type的不同而有所變化。
maxlength：控制最多輸入的字符數(shù)，
Size：控制框的寬度（以字符為單位）
1）文本框
<input type="text" value="默認值"/>
2)密碼框
<input type="password" />
3)提交按鈕
<input type="submit" value="按鈕內(nèi)容" />
4)重置按鈕
<input type="reset" value="按鈕內(nèi)容" />
5)空按鈕
<input type="button" value="按鈕內(nèi)容" />

3：表單補充

1）單選按鈕組
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral”
checked=“checked”/>(默認選中)女
2）復選框組
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
* disabled="disabled" (禁用)
* checked="checked" (默認選中)
3）下拉列表（菜單）：
<select >
<option>下拉選項1</option>
<option>下拉選項2</option>
…………
</select>
表示下拉列表，name屬性不是必須的
默認選擇項用selected屬性；
4）表單域多行文本定義：
語法: <textarea name="" cols="" rows="" ></textarea>
多行文本。rows屬性和cols屬性用來設置文本輸入窗口的高度和寬度，單位是字符。
阻止瀏覽器對窗口的拖動設置:{resize:none;}（css屬性）
5)上傳文件：
語法：<input type="file">

4：表單標簽補充

1）表單字段集
語法：<fieldset></fieldset>

說明：相當于一個方框，在字段集中可以包含文本和其他元素。該元素用于對表單中的元素進行分組并在文檔中區(qū)別標出文本。fieldset元素可以嵌套，在其內(nèi)部可以在設置多個fieldset對象。disabled定義空間禁制可用；
?
2）字段級標題：
語法：<legend align="left/center/right/justify"></legend>
說明：legend元素可以在fieldset對象繪制的方框內(nèi)插入一個標題。legend元素必須是fieldset內(nèi)的唯一個元素。
3)提示信息標簽：
語法：<label for="綁定控件id名"></label>
?
說明：label元素用來定義標簽，為頁面上的其他元素指定提示信息。要將label元素綁定到其他的控件上，可以將label元素的for屬性設置為與該控件的id屬性值相同。

拓展：post/get

(1). 從功能上講，GET一般用來從服務器上獲取資源，POST一般用來更新服務器上的資源；
(2). 從REST服務角度上說，GET是冪等的，即讀取同一個資源，總是得到相同的數(shù)據(jù)，而POST不是冪等的，因為每次請求對資源的改變并不是相同的；進一步地，GET不會改變服務器上的資源，而POST會對服務器資源進行改變；
(3). 從請求參數(shù)形式上看，GET請求的數(shù)據(jù)會附在URL之后，即將請求數(shù)據(jù)放置在HTTP報文的請求頭中，以?分割URL和傳輸數(shù)據(jù)，參數(shù)之間以&相連。特別地，如果數(shù)據(jù)是英文字母/數(shù)字，原樣發(fā)送；否則，會將其編碼為 application/x-www-form-urlencoded MIME 字符串(如果是空格，轉(zhuǎn)換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進制表示的ASCII)；而POST請求會把提交的數(shù)據(jù)則放置在是HTTP請求報文的請求體中。
(4). 就安全性而言，POST的安全性要比GET的安全性高，因為GET請求提交的數(shù)據(jù)將明文出現(xiàn)在URL上，而且POST請求參數(shù)則被包裝到請求體中，相對更安全。
(5). 從請求的大小看，GET請求的長度受限于瀏覽器或服務器對URL長度的限制，允許發(fā)送的數(shù)據(jù)量比較小，而POST請求則是沒有大小限制的。

轉(zhuǎn)自：知乎Eric

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

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

世界微塵里

吾寧愛與憎

- 2024.03.18 -

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

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

一、表單的組成

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

表單域

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

表單控件

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

提示信息

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

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

二、表單元素

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

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

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

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

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

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

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

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

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

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

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

1）包裹方式：

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

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

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

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

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

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

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

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

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

注意點：

<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>標簽：多行文本輸入

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

允許用戶輸入多行文本。

<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>標簽：按鈕控件

創(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>標簽：分組和標題

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

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

<legend>標簽：它總是與<fieldset>標簽一起使用。<legend>標簽定義了<fieldset>元素的標題，這個標題通常會出現(xiàn)在瀏覽器渲染的字段集的邊框上方。<legend>標簽使得用戶更容易理解每個分組的目的和內(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>包含三個復選框，用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素，用于提供標題。這樣，用戶在填寫表單時可以更清晰地了解每個部分的內(nèi)容。

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

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

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

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

下面是一個使用<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>標簽可以用于各種類型的計算和輸出，例如數(shù)學運算、字符串處理、數(shù)組操作等。它可以與<input>元素一起使用，以實時更新計算結果。

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

<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">結果：</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>

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

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

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

<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>標簽來分別顯示CPU和內(nèi)存的使用率。value屬性表示當前的測量值，min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性，<meter>標簽能夠清晰地顯示出資源的使用情況。

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

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

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

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

示例：

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

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

總結：

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

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

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

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

在線咨詢

上一篇：手把手的教你用PHP將HTML生成PDF
下一篇：JavaScript快速排序遞歸版與非遞歸版實現(xiàn)

您的項目需求

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

整合營銷服務商

HTML表單及其Input輸入類型

單

1 ： 表單標簽

2 ： 表單控件

3：表單補充

4：表單標簽補充

拓展：post/get

一、表單的組成

二、表單元素

您的項目需求

1 ：表單標簽

2 ：表單控件

一、表單的組成

二、表單元素