HTML復選框是一種非常常見的用戶輸入控件,它允許用戶選擇多個選項。在HTML中,我們可以使用多個元素來創建復選框。
<input type=”checkbox” name=”option1” value=”Option 1”>Option 1<br> <input type=”checkbox” name=”option2” value=”Option 2”>Option 2<br> <input type=”checkbox” name=”option3” value=”Option 3”>Option 3
在上述代碼中,我們創建了三個復選框。每個復選框都有一個唯一的name屬性和一個value屬性。name屬性用于將復選框與其它表單元素關聯起來,value屬性則定義了復選框被選中時發送到服務器的值。
如果我們想在同一表單中包含更多的復選框,只需重復上述代碼即可。但是,當復選框非常多的時候,手工創建這些元素變得非常麻煩。在這種情況下,我們可以使用JavaScript和HTML DOM來生成復選框。
<script> for (let i = 1; i <= 10; i++) { let checkbox = document.createElement(‘input’); checkbox.type = ‘checkbox’; checkbox.name = ‘option’ + i; checkbox.value = ‘Option ‘ + i; checkbox.id = ‘option’ + i; let label = document.createElement(‘label’); label.innerHTML = ‘Option ‘ + i; label.setAttribute(‘for’, ‘option’ + i); document.getElementById(‘checkboxes’).appendChild(checkbox); document.getElementById(‘checkboxes’).appendChild(label); document.getElementById(‘checkboxes’).appendChild(document.createElement(‘br’)); } </script> <div id=”checkboxes”></div>
在上述代碼中,我們使用一個for循環來創建10個復選框。每個復選框都有自己的name、value和id屬性,并且生成一個對應的標簽。所有的復選框和標簽都被添加到id為“checkboxes”的div元素中。這個技巧可以幫助我們快速地為一個大型選項列表創建復選框。
無論是手工創建復選框,還是使用JavaScript和HTML DOM動態生成復選框,HTML允許我們在同一表單中包含任意數量的復選框,以方便用戶選擇多項。
上一篇docker二次死亡
下一篇vue 封裝插件