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