HTML中的復選框是一種常見的表單元素,用于收集用戶的多個選項。復選框的代碼非常簡單,只需在HTML中使用input標簽,并指定type屬性為"checkbox"即可。
<input type="checkbox" name="option1" value="Option 1"> <label for="option1">Option 1</label>
以上代碼定義了一個名為"option1"的復選框,其值為"Option 1"。label標簽與input標簽相對應,用于增加可讀性和可訪問性。
當用戶使用復選框時,可以選擇一個或多個選項。使用JavaScript或后端代碼可以在表單提交后獲取已選擇的選項。
<form method="post" action="process-form.php"> <input type="checkbox" name="option1" value="Option 1"> <label for="option1">Option 1</label> <input type="checkbox" name="option2" value="Option 2"> <label for="option2">Option 2</label> <input type="submit" value="Submit"> </form>
以上代碼定義了一個包含兩個復選框和一個提交按鈕的表單。當用戶選擇一個或多個選項并點擊提交按鈕時,表單將向"process-form.php"頁面提交,并向后端代碼發送選擇的選項。
HTML中的復選框可以通過CSS進行樣式化,以匹配網站的設計和品牌。使用CSS偽類可以改變復選框的狀態,例如:hover和:checked。
input[type="checkbox"]:checked + label { background-color: #008000; color: #ffffff; }
以上CSS代碼定義了當復選框被選中時,其相應的label標簽將具有綠色背景和白色文本。
總之,HTML中的復選框是收集多個選項的重要表單元素,簡單易用,適用于各種類型的表單。