html单选框代码

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Radio Buttons</title> </head> <body> <form> <input type="radio" id="option1" name="options" value="option1"> <label for="option1">Option 1</label><br> <input type="radio" id="option2" name="options" value="option2"> <label for="option2">Option 2</label><br> <input type="radio" id="option3" name="options" value="option3"> <label for="option3">Option 3</label><br> </form> </body> </html>

在这个示例中,我们创建了一个包含三个单选框的表单。每个单选框都有一个唯一的ID,它们的name属性设置为"options",这意味着它们属于同一个单选按钮组。用户只能选择其中一个选项。

添加默认选中的单选框:

html
<input type="radio" id="option1" name="options" value="option1" checked>

在这个示例中,将checked属性添加到第一个单选框上,使其成为默认选中的选项。

使用label标签将文本与单选框关联起来,使得用户点击文本时也能选择单选框:

html
<label for="option1">Option 1</label>

在这个示例中,label的for属性与相关单选框的id属性相对应,这样用户点击"label"文本时,就会选中对应的单选框。

添加一个提交按钮,以便用户提交他们的选择:

html
<input type="submit" value="Submit">

将此代码放在form标签内,用户选择单选框后,点击提交按钮即可将表单数据提交给服务器进行处理。

综合起来,完整的代码示例如下:

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Radio Buttons</title> </head> <body> <form> <input type="radio" id="option1" name="options" value="option1" checked> <label for="option1">Option 1</label><br> <input type="radio" id="option2" name="options" value="option2"> <label for="option2">Option 2</label><br> <input type="radio" id="option3" name="options" value="option3"> <label for="option3">Option 3</label><br> <input type="submit" value="Submit"> </form> </body> </html>

这个代码示例创建了一个带有三个单选框和一个提交按钮的表单。用户可以选择其中一个选项,并在提交按钮上点击后提交他们的选择。