整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
今年國(guó)慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費(fèi)，睡覺(jué)、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風(fēng)，趕緊起來(lái)把文章寫完。
這篇文章比較基礎(chǔ)，在國(guó)慶期間的業(yè)余時(shí)間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關(guān)于文件上傳的各種場(chǎng)景和應(yīng)用都涵蓋了,若有疏漏和問(wèn)題還請(qǐng)留言斧正和補(bǔ)充。
以下是本文所涉及到的知識(shí)點(diǎn)，break or continue ?
原理很簡(jiǎn)單，就是根據(jù) http 協(xié)議的規(guī)范和定義，完成請(qǐng)求消息體的封裝和消息體的解析，然后將二進(jìn)制內(nèi)容保存到文件。
我們都知道如果要上傳一個(gè)文件，需要把 form 標(biāo)簽的enctype設(shè)置為multipart/form-data,同時(shí)method必須為post方法。
那么multipart/form-data表示什么呢？
multipart互聯(lián)網(wǎng)上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。
multipart/form-data 結(jié)構(gòu)
看下 http 請(qǐng)求的消息體
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請(qǐng)求要上傳文件，其中boundary表示分隔符，如果要上傳多個(gè)表單項(xiàng)，就要使用boundary分割，每個(gè)表單項(xiàng)由———XXX開(kāi)始，以———XXX結(jié)尾。
每一個(gè)表單項(xiàng)又由Content-Type和Content-Disposition組成。
Content-Disposition: form-data 為固定值，表示一個(gè)表單元素，name 表示表單元素的 名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進(jìn)制內(nèi)容。
Content-Type：表示當(dāng)前的內(nèi)容的 MIME 類型，是圖片還是文本還是二進(jìn)制數(shù)據(jù)。
解析
客戶端發(fā)送請(qǐng)求到服務(wù)器后，服務(wù)器會(huì)收到請(qǐng)求的消息體，然后對(duì)消息體進(jìn)行解析，解析出哪是普通表單哪些是附件。
可能大家馬上能想到通過(guò)正則或者字符串處理分割出內(nèi)容，不過(guò)這樣是行不通的，二進(jìn)制buffer轉(zhuǎn)化為string,對(duì)字符串進(jìn)行截取后，其索引和字符串是不一致的，所以結(jié)果就不會(huì)正確，除非上傳的就是字符串。
不過(guò)一般情況下不需要自行解析，目前已經(jīng)有很成熟的三方庫(kù)可以使用。
至于如何解析，這個(gè)也會(huì)占用很大篇幅，后面的文章在詳細(xì)說(shuō)。
使用 form 表單上傳文件
在 ie時(shí)代，如果實(shí)現(xiàn)一個(gè)無(wú)刷新的文件上傳那可是費(fèi)老勁了，大部分都是用 iframe 來(lái)實(shí)現(xiàn)局部刷新或者使用 flash 插件來(lái)搞定，在那個(gè)時(shí)代 ie 就是最好用的瀏覽器（別無(wú)選擇）。
DEMO
這種方式上傳文件，不需要 js ，而且沒(méi)有兼容問(wèn)題，所有瀏覽器都支持，就是體驗(yàn)很差，導(dǎo)致頁(yè)面刷新，頁(yè)面其他數(shù)據(jù)丟失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">
選擇文件:
<input type="file" name="f1"/> input 必須設(shè)置 name 屬性，否則數(shù)據(jù)無(wú)法發(fā)送<br/>
<br/>
標(biāo)題：<input type="text" name="title"/><br/><br/><br/>
<button type="submit" id="btn-0">上 傳</button>
</form>
復(fù)制代碼服務(wù)端文件的保存基于現(xiàn)有的庫(kù)koa-body結(jié)合 koa2實(shí)現(xiàn)服務(wù)端文件的保存和數(shù)據(jù)的返回。
在項(xiàng)目開(kāi)發(fā)中，文件上傳本身和業(yè)務(wù)無(wú)關(guān)，代碼基本上都可通用。
在這里我們使用koa-body庫(kù)來(lái)實(shí)現(xiàn)解析和文件的保存。
koa-body 會(huì)自動(dòng)保存文件到系統(tǒng)臨時(shí)目錄下，也可以指定保存的文件路徑。
然后在后續(xù)中間件內(nèi)得到已保存的文件的信息，再做二次處理。
NODE
/**
* 服務(wù)入口
*/
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存庫(kù)
var fs = require('fs');
var Koa = require('koa2');
var app = new Koa();
var port = process.env.PORT || '8100';
var uploadHost= `http://localhost:${port}/uploads/`;
app.use(koaBody({
formidable: {
//設(shè)置文件的默認(rèn)保存目錄，不設(shè)置則保存在系統(tǒng)臨時(shí)目錄下 os
uploadDir: path.resolve(__dirname, '../static/uploads')
},
multipart: true // 開(kāi)啟文件上傳，默認(rèn)是關(guān)閉
}));
//開(kāi)啟靜態(tài)文件訪問(wèn)
app.use(koaStatic(
path.resolve(__dirname, '../static')
));
//文件二次處理，修改名稱
app.use((ctx) => {
var file = ctx.request.files.f1;//得道文件對(duì)象
var path = file.path;
var fname = file.name;//原文件名稱
var nextPath = path+fname;
if(file.size>0 && path){
//得到擴(kuò)展名
var extArr = fname.split('.');
var ext = extArr[extArr.length-1];
var nextPath = path+'.'+ext;
//重命名文件
fs.renameSync(path, nextPath);
}
//以 json 形式輸出上傳文件地址
ctx.body = `{
"fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
}`;
});
/**
* http server
*/
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ...... ');
復(fù)制代碼CODE
https://github.com/Bigerfe/fe-learn-code/
多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計(jì)算結(jié)果。
首先創(chuàng)造一個(gè)基本的HTML大綱，包含表單控件；然后將控件進(jìn)行合并（HTML表單必須包括一個(gè)提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個(gè)單獨(dú)的HTML頁(yè)面可以包含多個(gè)表單。
包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。
<HTML>
<HEAD>
<TITLE>標(biāo)題放在這</TITLE>
</HEAD>
<BODY>
表單頁(yè)面放在這
</BODY>
</HTML>在包含表單的HTML頁(yè)面中可以使用任何HTML標(biāo)簽。基本的表單使用FROM標(biāo)簽來(lái)說(shuō)明。該標(biāo)簽中METHOD屬性接收GET或POST兩個(gè)值中的一個(gè)。ACTION屬性子明PHP腳本的url，該腳本可以收集通過(guò)表單收集的數(shù)據(jù)，可以是絕對(duì)路徑或者相對(duì)路徑。
<FORM METHOD="method" ACTION="url">
中間可以放置表單控件
</FORM>兩個(gè)常用的基本控件：文本框和提交按鈕。
文本框：允許用戶鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過(guò)名稱準(zhǔn)確訪問(wèn)其內(nèi)容，因此它應(yīng)該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號(hào)），單標(biāo)簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標(biāo)題。創(chuàng)建方式如下：
<INPUT TYPE = "TEXT" NAME="text">提交按鈕：允許用戶將一個(gè)表單的內(nèi)容發(fā)送到服務(wù)器，一個(gè)HTML表單對(duì)應(yīng)應(yīng)該有一個(gè)提交按鈕。
示例：一個(gè)完整的HTML表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
</BODY>
</HTML>可以在一個(gè)HTML頁(yè)面中包含多個(gè)表單，注意下一個(gè)表單的FORM開(kāi)始之前需要結(jié)束前一個(gè)FORM表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>
<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>
</BODY>
</HTML>文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設(shè)置文本框的可視大小；MAXLENGTH指明用戶鍵入字符的最大長(zhǎng)度；VALUE給出了一個(gè)最初顯示在文本框中的值。
<input type="text" name="" size="" maxlength="" value="">文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿時(shí)會(huì)滾動(dòng)。COLS屬性指明可見(jiàn)文本列數(shù)與行數(shù)類似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標(biāo)簽為雙標(biāo)簽。
值 | 說(shuō)明 |
off | 禁止單詞換行但用戶可以輸入換行符強(qiáng)制換行 |
virtual/soft | 各行顯示為換行，但是換行并沒(méi)有被發(fā)送到服務(wù)器 |
physica/hard | 啟用了單詞換行 |
<inputarea name="" rows="" cols="" wrap="">創(chuàng)建密碼框的語(yǔ)法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。
<input type="password" name="" size="" maxlength="" value="">取兩個(gè)值中的一個(gè)，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認(rèn)情況會(huì)被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認(rèn)發(fā)送on值。法如下：
<input type="checkbox" name="" checked value="">語(yǔ)法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。
<input type="radio" name="" checked value="">用戶可以選擇一個(gè)或者多個(gè)選項(xiàng)，它是一個(gè)滾動(dòng)菜單。
<select name="" multipile size="">options go here</select>name屬性是必須的，multipile屬性指明用戶可以通過(guò)按下crtl鍵并單擊多個(gè)選項(xiàng)來(lái)選擇它們
列表框的單選行為可作為單選按鈕。
<option selected value="text"></options><input type="hidden" name="text"value=""><input type="FILE" name="name" accept="time" value="text">其中type屬性是必須的。格式通過(guò)使用MIME碼指定。常用的格式如下：
超文本標(biāo)記語(yǔ)言文本 .html,.html text/html
普通文本 ：txt text/plain
word文檔：application/msword
RTF文本 ：rtf application/rtf
GIF圖形 ：gif image/gif
JPEG圖形 ：jpeg,
jpg： image/jpeg
au聲音文件：au audio/basic
MIDI音樂(lè)文件 ：mid,.midi audio/midi,audio/x-midi
RealAudio音樂(lè)文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
壓縮文件.rar application/octet-stream
壓縮文件.zip application/x-zip-compressed
TAR文件 .tar application/x-tar
<input type="image" src="url" name="text" align="align"><input type="reset" value="text">這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過(guò)得還好嗎？
世界微塵里
吾寧愛(ài)與憎
- 2024.03.18 -
在互聯(lián)網(wǎng)的世界中，表單是用戶與網(wǎng)站進(jìn)行互動(dòng)的重要橋梁。無(wú)論是注冊(cè)新賬號(hào)、提交反饋、還是在線購(gòu)物，表單都扮演著至關(guān)重要的角色。在網(wǎng)頁(yè)中，我們需要跟用戶進(jìn)行交互，收集用戶資料，此時(shí)就需要用到表單標(biāo)簽。
HTML提供了一系列的表單標(biāo)簽，使得開(kāi)發(fā)者能夠輕松地創(chuàng)建出功能豐富的表單。今天我們就來(lái)深入探討這些標(biāo)簽，了解它們的作用以及如何使用它們來(lái)構(gòu)建一個(gè)有效的用戶界面。
在HTML中，一個(gè)完整的表單通常由表單域、表單控件（表單元素）和提示信息三個(gè)部分構(gòu)成。
表單域
表單控件
這些是用戶與表單交云的各種元素，如<input>（用于創(chuàng)建不同類型的輸入字段）、<textarea>（用于多行文本輸入）、<button>（用于提交表單或執(zhí)行其他操作）、<select>和<option>（用于創(chuàng)建下拉列表）等。
提示信息
這些信息通常通過(guò)<label>標(biāo)簽提供，它為表單控件提供了描述性文本，有助于提高可訪問(wèn)性。<label>標(biāo)簽通常與<input>標(biāo)簽一起使用，并且可以通過(guò)for屬性與<input>標(biāo)簽的id屬性關(guān)聯(lián)起來(lái)。
這三個(gè)部分共同構(gòu)成了一個(gè)完整的HTML表單，使得用戶可以輸入數(shù)據(jù)，并通過(guò)點(diǎn)擊提交按鈕將這些數(shù)據(jù)發(fā)送到Web服務(wù)器進(jìn)行處理。
在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內(nèi)容控件。下面就來(lái)介紹HTML中常用的表單元素。
1、<form>標(biāo)簽：基礎(chǔ)容器
作用：定義一個(gè)表單區(qū)域，用戶可以在其中輸入數(shù)據(jù)進(jìn)行提交。
<form action="submit.php" method="post">其中action屬性指定了數(shù)據(jù)提交到的服務(wù)器端腳本地址，method屬性定義了數(shù)據(jù)提交的方式（通常為GET或POST）。
2、<input>標(biāo)簽：數(shù)據(jù)輸入
<input>標(biāo)簽是一個(gè)單標(biāo)簽，用于收集用戶信息。允許用戶輸入文本、數(shù)字、密碼等。
<input type="text" name="username" placeholder="請(qǐng)輸入用戶名">type屬性決定了輸入類型，name屬性定義了數(shù)據(jù)的鍵名，placeholder屬性提供了輸入框內(nèi)的提示文本。
<input>標(biāo)簽的屬性
下面舉個(gè)例子來(lái)說(shuō)明：
<!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="請(qǐng)輸入用戶名"><br>
密碼：<input type="password"><br>
性別：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
愛(ài)好：吃飯<input type="checkbox"> 睡覺(jué)<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免費(fèi)注冊(cè)">
<input type="reset" value="重新填寫">
<input type="button" value="獲取短信驗(yàn)證碼"><br>
上傳頭像：<input type="file">
</form>
</body>
</html>3、<label>標(biāo)簽：關(guān)聯(lián)說(shuō)明
它與輸入字段如文本框、單選按鈕、復(fù)選框等關(guān)聯(lián)起來(lái)，以改善網(wǎng)頁(yè)的可用性和可訪問(wèn)性。<label>標(biāo)簽有兩種常見(jiàn)的用法：
1）包裹方式：
在這種用法中，<label>標(biāo)簽直接包裹住關(guān)聯(lián)的表單元素。例如：
<label>用戶名：<input type="text" name="username"></label>這樣做的好處是用戶點(diǎn)擊標(biāo)簽文本時(shí)，關(guān)聯(lián)的輸入字段會(huì)自動(dòng)獲取焦點(diǎn)，從而提供更好的用戶體驗(yàn)。
2）使用for屬性關(guān)聯(lián)：
在這種用法中，<label>標(biāo)簽通過(guò)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)勢(shì)是單擊標(biāo)簽時(shí)，相關(guān)的表單元素會(huì)自動(dòng)選中（獲取焦點(diǎn)），從而提高可用性和可訪問(wèn)性。
4、<select>和<option>標(biāo)簽：下拉選擇
在頁(yè)面中，如果有多個(gè)選項(xiàng)讓用戶選擇，并且想要節(jié)約頁(yè)面空間時(shí)，我們可以使用標(biāo)簽控件定義下拉列表。
注意點(diǎn)：
<!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">默認(rèn)文本</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>請(qǐng)?jiān)诖溯斎雰?nèi)容</textarea>
</form>
</body>
</html>6、<button>標(biāo)簽：按鈕控件
創(chuàng)建一個(gè)可點(diǎn)擊的按鈕，通常用于提交或重置表單。它允許用戶放置文本或其他內(nèi)聯(lián)元素（如<i>、<b>、<strong>、<br>、<img>等），這使得它比普通的<input type="button">具有更豐富的內(nèi)容和更強(qiáng)的功能。
<button type="submit">提交</button>type屬性為submit時(shí)表示這是一個(gè)提交按鈕。
7、<fieldset>和<legend>標(biāo)簽：分組和標(biāo)題
通常用于在HTML表單中對(duì)相關(guān)元素進(jìn)行分組，并提供一個(gè)標(biāo)題來(lái)描述這個(gè)組的內(nèi)容。
<fieldset>標(biāo)簽：該標(biāo)簽用于在表單中創(chuàng)建一組相關(guān)的表單控件。它可以將表單元素邏輯分組，并且通常在視覺(jué)上通過(guò)圍繞這些元素繪制一個(gè)邊框來(lái)區(qū)分不同的組。這種分組有助于提高表單的可讀性和易用性。
<legend>標(biāo)簽：它總是與<fieldset>標(biāo)簽一起使用。<legend>標(biāo)簽定義了<fieldset>元素的標(biāo)題，這個(gè)標(biāo)題通常會(huì)出現(xiàn)在瀏覽器渲染的字段集的邊框上方。<legend>標(biāo)簽使得用戶更容易理解每個(gè)分組的目的和內(nèi)容。
代碼示例：
<form>
<fieldset>
<legend>個(gè)人信息</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>興趣愛(ài)好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音樂(lè)</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">運(yùn)動(dòng)</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">閱讀</label><br>
</fieldset>
<input type="submit" value="提交">
</form>在這個(gè)示例中，我們使用了兩個(gè)<fieldset>元素來(lái)組織表單的不同部分。第一個(gè)<fieldset>包含姓名和郵箱字段，而第二個(gè)<fieldset>包含三個(gè)復(fù)選框，用于選擇用戶的興趣愛(ài)好。每個(gè)<fieldset>都有一個(gè)<legend>元素，用于提供標(biāo)題。這樣，用戶在填寫表單時(shí)可以更清晰地了解每個(gè)部分的內(nèi)容。
想要快速入門前端開(kāi)發(fā)嗎？推薦一個(gè)前端開(kāi)發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無(wú)壓力，知識(shí)點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想
8、<datalist>標(biāo)簽：預(yù)定義選項(xiàng)列表
<datalist>標(biāo)簽是HTML5中引入的一個(gè)新元素，它允許開(kāi)發(fā)者為輸入字段提供預(yù)定義的選項(xiàng)列表。當(dāng)用戶在輸入字段中輸入時(shí)，瀏覽器會(huì)顯示一個(gè)下拉菜單，其中包含與用戶輸入匹配的預(yù)定義選項(xiàng)。
使用<datalist>標(biāo)簽可以提供更好的用戶體驗(yàn)，因?yàn)樗梢詭椭脩暨x擇正確的選項(xiàng)，而不必手動(dòng)輸入整個(gè)選項(xiàng)。此外，<datalist>還可以與<input>元素的list屬性結(jié)合使用，以將預(yù)定義的選項(xiàng)列表與特定的輸入字段關(guān)聯(lián)起來(lái)。
下面是一個(gè)使用<datalist>標(biāo)簽的代碼示例：
<form>
<label for="color">選擇你喜歡的顏色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="紅色">
<option value="藍(lán)色">
<option value="綠色">
<option value="黃色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>9、<output>標(biāo)簽：計(jì)算結(jié)果輸出
<output>標(biāo)簽是HTML5中引入的一個(gè)新元素，它用于顯示計(jì)算結(jié)果或輸出。該標(biāo)簽通常與JavaScript代碼結(jié)合使用，通過(guò)將計(jì)算結(jié)果賦值給<output>元素的value屬性來(lái)顯示結(jié)果。
<output>標(biāo)簽可以用于各種類型的計(jì)算和輸出，例如數(shù)學(xué)運(yùn)算、字符串處理、數(shù)組操作等。它可以與<input>元素一起使用，以實(shí)時(shí)更新計(jì)算結(jié)果。
下面是一個(gè)使用<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ù)進(jìn)度展示
<progress>標(biāo)簽是HTML5中用于表示任務(wù)完成進(jìn)度的一個(gè)新元素。它通過(guò)value屬性和max屬性來(lái)表示進(jìn)度，其中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)建了一個(gè)名為"fileDownload"的<progress>元素，并設(shè)置了初始值為0，最大值為100。我們還添加了一個(gè)按鈕，當(dāng)用戶點(diǎn)擊該按鈕時(shí)，會(huì)觸發(fā)名為"startDownload"的JavaScript函數(shù)。這個(gè)函數(shù)模擬了一個(gè)文件下載過(guò)程，通過(guò)循環(huán)逐步增加<progress>元素的value屬性值，從而顯示下載進(jìn)度。
11、<meter>標(biāo)簽：度量衡指示器
<meter>標(biāo)簽在HTML中用于表示度量衡指示器，它定義了一個(gè)已知范圍內(nèi)的標(biāo)量測(cè)量值或分?jǐn)?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>在這個(gè)示例中，我們使用了兩個(gè)<meter>標(biāo)簽來(lái)分別顯示CPU和內(nèi)存的使用率。value屬性表示當(dāng)前的測(cè)量值，min和max屬性分別定義了測(cè)量范圍的最小值和最大值。通過(guò)這些屬性，<meter>標(biāo)簽?zāi)軌蚯逦仫@示出資源的使用情況。
需要注意的是，<meter>標(biāo)簽不應(yīng)該用來(lái)表示進(jìn)度條，對(duì)于進(jìn)度條的表示，應(yīng)該使用<progress>標(biāo)簽。
12、<details>和<summary>標(biāo)簽：詳細(xì)信息展示
<details>和<summary>標(biāo)簽是HTML5中新增的兩個(gè)元素，用于創(chuàng)建可折疊的詳細(xì)信息區(qū)域。
<details>標(biāo)簽定義了一個(gè)可以展開(kāi)或折疊的容器，其中包含一些額外的信息。它通常與<summary>標(biāo)簽一起使用，<summary>標(biāo)簽定義了<details>元素的標(biāo)題，當(dāng)用戶點(diǎn)擊該標(biāo)題時(shí)，<details>元素的內(nèi)容會(huì)展開(kāi)或折疊。
示例：
<details>
<summary>點(diǎn)擊查看詳細(xì)信息</summary>
<p>這里是一些額外的信息，用戶可以點(diǎn)擊標(biāo)題來(lái)展開(kāi)或折疊這些信息。</p>
</details>在這個(gè)示例中，我們使用了<details>標(biāo)簽來(lái)創(chuàng)建一個(gè)可折疊的容器，并在其中添加了一個(gè)<summary>標(biāo)簽作為標(biāo)題。當(dāng)用戶點(diǎn)擊這個(gè)標(biāo)題時(shí)，容器的內(nèi)容會(huì)展開(kāi)或折疊。
總結(jié)：
HTML表單標(biāo)簽是構(gòu)建動(dòng)態(tài)網(wǎng)頁(yè)的基石，它們使得用戶能夠與網(wǎng)站進(jìn)行有效的交互。
通過(guò)合理地使用這些標(biāo)簽，開(kāi)發(fā)者可以創(chuàng)建出既美觀又功能強(qiáng)大的表單，從而提升用戶體驗(yàn)和網(wǎng)站的可用性。所以說(shuō)，掌握這些標(biāo)簽的使用，對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)是至關(guān)重要的。
我們下期再見(jiàn)！
END
文案編輯|云端學(xué)長(zhǎng)
文案配圖|云端學(xué)長(zhǎng)
內(nèi)容由：云端源想分享
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
