資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在HTML表單中新增複選框？
複選框是HTML輸入標籤的一個特性。它們顯示為正方形的框，前端使用者可以動態地選中。當我們希望使用者提供多種輸入時，HTML複選框非常有用。當用戶面對複選框查詢時，透過選中或勾選這些文字框，選擇他們想要的專案。當提交表單時，選中複選框的資料會被收集並存儲在後臺。
通常，複選框可以處於三種狀態之一：選中、未選中或不確定。當用戶可以選擇多個選項時，在表單中這是必要的。在深入探討本文之前，讓我們快速瞭解一下HTML <input type="checkbox">。
HTML <input type="checkbox">
使用HTML <input type="checkbox">標籤建立複選框欄位。複選框顯示為一個正方形的框，選中時處於活動狀態。使用者可以選擇幾個可用選項中的一種或多種選項。
語法
以下是HTML複選框標籤的語法
<input type="checkbox">
示例
在下面的示例中，我們將使用HTML建立一個簡單的複選框表單。
<!DOCTYPE html>
<html>
<body style="text-align: center; font-family:verdana">
<h2 style="color:#58D68D ;"> HTML CheckBox </h2>
<form style="color:#DE3163">
<input type="checkbox" name="vehicle" value="car"> CAR <input type="checkbox" name="vehicle" value="bike"> BIKE <input type="checkbox" name="vehicle" value="aeroplane"> AEROPLANE <br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
執行上面的程式碼後，它將生成一個輸出，其中包含在網頁上顯示的帶有複選框的選項，允許使用者選擇選項並提交表單。
示例
讓我們來看下面的例子，我們將設定表單中複選框的預設值。
<!DOCTYPE html>
<html>
<body style="text-align: center; font-family:verdana">
<form style="color:#7D3C98 ">
<p>Places To Visit : </p>
<input type="checkbox" name="place" value="Shimla"> SHIMLA <input type="checkbox" name="place" value="Ooty"> OOTY <input type="checkbox" name="place" value="Coorg" checked> COORG <br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
執行上面的程式碼後，輸出視窗將彈出，顯示覆選框，其中一個預設選中，顯示在網頁上，還有一個提交按鈕。
示例
考慮另一種情況，我們將停用表單中的複選框。
<!DOCTYPE html>
<html>
<body style="text-align: center; font-family:verdana">
<h2 style="color:#27AE60 ">HTML disabled CheckBox</h2>
<form style="color:#7D3C98 ">
<p>Choose The Course :</p>
<input type="checkbox" name="course" value="html"> HTML <input type="checkbox" name="course" value="python"> PYTHON <input type="checkbox" name="course" value="java" disabled> JAVA <br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
執行上面的程式碼後，它將生成一個輸出，其中包含在網頁上顯示的停用複選框以及一個提交按鈕。
更新於：2024年1月19日
瀏覽量：142
廣告