html创建单选按钮和复选框

73次阅读
没有评论

要创建单选按钮和复选框,可以使用HTML表单元素中的<input>标记,并设置它们的”type”属性为”radio”或”checkbox”。然后,您可以使用”label”标记来定义与按钮相关联的文本。

以下是一个基本的示例,它包含一个单选按钮和一个复选框:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>单选按钮和复选框示例</title>
</head>
<body>
	<form>
		<p>请选择您最喜欢的编程语言:</p>
		<label>
			<input type="radio" name="language" value="python">
			Python
		</label>
		<br>
		<label>
			<input type="radio" name="language" value="java">
			Java
		</label>
		<br>
		<label>
			<input type="radio" name="language" value="javascript">
			JavaScript
		</label>
		<br>
		<br>
		<p>请选择您喜欢的水果(可多选):</p>
		<label>
			<input type="checkbox" name="fruit" value="apple">
			苹果
		</label>
		<br>
		<label>
			<input type="checkbox" name="fruit" value="orange">
			橙子
		</label>
		<br>
		<label>
			<input type="checkbox" name="fruit" value="banana">
			香蕉
		</label>
		<br>
		<label>
			<input type="checkbox" name="fruit" value="kiwi">
			猕猴桃
		</label>
		<br>
		<input type="submit" value="提交">
	</form>
</body>
</html>

在这个示例中,我们使用了三个单选按钮和四个复选框。每个单选按钮的”name”属性都设置为”language”,这意味着它们都是同一组中的选项。只能选择其中的一个。每个复选框的”name”属性都设置为”fruit”,这意味着它们是同一组中的选项。可以选择其中一个或多个。

注意,我们在每个<input>标记周围使用了一个<label>标记来定义相关联的文本。这可以使您的表单更易于使用,并提高可访问性。

最后,我们添加了一个<input type=”submit”>按钮,以便用户可以提交表单。当用户提交表单时,浏览器将向指定的服务器发送表单数据。

正文完
 
评论(没有评论)