整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
世界微塵里
吾寧愛與憎
- 2024.03.18 -
在互聯網的世界中，表單是用戶與網站進行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物，表單都扮演著至關重要的角色。在網頁中，我們需要跟用戶進行交互，收集用戶資料，此時就需要用到表單標簽。
HTML提供了一系列的表單標簽，使得開發者能夠輕松地創建出功能豐富的表單。今天我們就來深入探討這些標簽，了解它們的作用以及如何使用它們來構建一個有效的用戶界面。
在HTML中，一個完整的表單通常由表單域、表單控件（表單元素）和提示信息三個部分構成。
表單域
表單控件
這些是用戶與表單交云的各種元素，如<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>標簽：下拉選擇
在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，我們可以使用標簽控件定義下拉列表。
注意點：
<!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 表單是無法傳輸文件的。即便我們在 HTML 中寫了 type 類型為 file 的 input 標簽。這是因為 HTML 默認的表單傳輸方法為 application/x-www-form-urlencoded。但是這種方法是不能傳輸文件的。用這種方法傳輸文件時，我們只能在后端看到文件名，而得不到整個文件。
Views 視圖函數嘗試打印獲取到的文件和 POST 數據時，結果如下：
<MultiValueDict: {}>
<QueryDict: {'csrfmiddlewaretoken': ['jEKPQOvvCeD4q96ET9zVU5xBTdlgmbgPQb7c5EhvNsrYdT8L4KBw8IuBTmlFOUwj'], 'avata': ['1571311850334.png']}>這時，我們就要將 HTML 代碼中的 form 表單標簽加上 enctype="multipart/form-data" 的屬性才能上傳文件，其本質時修改 content-type 請求頭中的攜帶數據的消息格式：
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
用戶名:<input type="text" name="username">
頭像: <input type="file" name="file_obj">
<input type="submit">
</form>views 視圖函數寫法：
def upload(request):
if request.method == 'GET':
return render(request,'upload.html')
else:
print(request.POST)
print(request.FILES)
file_obj = request.FILES.get('file_obj') # FILES 是一個類似于字典的對象，file_obj（也就是HTML文件input標簽中的name屬性值）對應的值才是文件對象
print(file_obj.name)
with open(file_obj.name,'wb') as f:
# for i in file_obj:
# f.write(i)
for i in file_obj.chunks(): # 65536字節
f.write(i)
return HttpResponse('ok')當設置好 form 標簽的 enctype 屬性后，文件就會順利傳到視圖函數中了：
<MultiValueDict: {'avata': [<InMemoryUploadedFile: 1571311850334.png (image/png)>]}>
<QueryDict: {'csrfmiddlewaretoken': ['QTtPqw8y7nldamyW4uZzY6m5yzHglvGMnqQcFmUyiB97X6A3f51acJj5yIHFNeWg']}>得到的 file_obj 是一個文件對象，與文件句柄類似。我們可以通過直接 for 循環文件句柄的方式，將文件逐行寫入本地。但是如果文件的每一行都比較長，比如圖片之類的媒體文件，或許只有一行，如果我們還使用逐行寫入的話，會占用很多的內存資源。于是更推薦使用 for 循環 file_obj.chunks() ，這樣每次只會循環 65536 個字節的內容，從而緩解內存的壓力。
ajax 主要是 js 代碼，對 HTML 的改變不大，只是實當增加一些 id 屬性，以便更容易找到目標標簽：
{% csrf_token %}
用戶名:<input type="text" name="username">
頭像: <input type="file" name="file_obj">
<input type="submit" id="btn">使用 ajax 上傳文件時，需要修改一些 js 配置。首先，文件數據不能以普通的自定義對象保存，而是需要使用 new FormData 語句創建一個 form data 對象。使用 append 命令將一個個鍵值對插入到對象中。此外，還需要將 processData 和 contentType 的值設為 false。這是使用 ajax 上傳文件的固定搭配，提示 ajax 不要對數據進行加工操作：
$('#btn').click(function () {
var formdata = new FormData();
var uname = $('[name="username"]').val();
// var file_obj = $('[name="file_obj"]').val(); //"C:\fakepath\0.jpg" 拿到的文件的本地路徑
var f_obj = $('[name="file_obj"]')[0].files[0] ; // 這是文件對象，注意是files而不是file
formdata.append('username',uname); // 將數據添加到formdata對象中
formdata.append('file_obj',f_obj);
formdata.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val());
$.ajax({
url:'/upload/',
type:'post',
// 上傳文件時的固定搭配 formdata
processData:false,
contentType:false,
data:formdata,
// data:{uname:uname,file_obj:f_obj,'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()},
success:function (res) {
console.log(res)
}
})
})至于視圖函數，如果參數沒有變化，可以完全不需要修改。
過 C# 和 Visual Basic 實例學習 ASP.NET Web Pages。
| C# 實例 | VB 實例 |
|---|---|
基本的 Web Pages 顯示日期和時間 可重復使用的頭部和底部 基本的 HTML 表單 實例解釋 |
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
