您的位置:首页> 前端教程> HTML教程
文章导航

HTML input checkbox 复选框

2019-9-21 00:00| 作者: admin| 查看: 17571| 评论: 0|来自: 蚂蚁部落

将<input>标签的type属性值设置为"checkbox"即可创建一个复选框。

radio单选按钮只能够选中其中一项,复选框则可以选中任意多项。

所以复选框通常用于需要多项选择的场景,比如某些网站需要选择个人技能或者爱好等。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  兴趣:
  <input type="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" name="favorite" value="2" />后端
  <input type="checkbox" name="favorite" value="3" />美工
</form>
</body>
</html>

上面的代码简单演示了复选框的使用,可以选中任意项。

特别说明:name属性是必须的,否则后台无法接收提交的表单数据。

复选框还有其他属性,下面分别做一下介绍:

(1).value:规定复选框的value属性值,它会被发送到服务器。

(2).checked:规定复选框处于选中状态。

(2).required(HTML5):规定指定的复选框必须被选中。

(3).form(HTML5):规定复选框所属的一个或多个表单。

(4).autofocus(HTML5):规定在页面加载时,指定复选框自动地获得焦点。

(5).disabled:规定复选框不可用。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  兴趣:
  <input type="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" checked name="favorite" value="2" />后端
  <input type="checkbox" name="favorite" value="3" />美工
</form>
</body>
</html>

使用checked属性可以设置一个复选框处于默认选中状态。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  兴趣:
  <input type="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" required  name="favorite" value="2" />后端
  <input type="checkbox" name="favorite" value="3" />美工
  <input type="submit" value="提交表单">
</form>
</body>
</html>

通过required属性设置对应的复选框为必选项。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  兴趣:
  <input type="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" autofocus  name="favorite" value="2" />后端
  <input type="checkbox" name="favorite" value="3" />美工
  <input type="submit" value="提交表单">
</form>
</body>
</html>

autofocus属性可以设置指定复选框在页面加载完成之后自动获取焦点。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  兴趣:
  <input type="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" disabled  name="favorite" value="2" />后端
  <input type="checkbox" name="favorite" value="3" />美工
  <input type="submit" value="提交表单">
</form>
</body>
</html>

disabled属性可以设置复选框为不可用状态,不可用状态的复选框值不会被提交。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  兴趣:
  <input type="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" disabled  name="favorite" value="2" />后端
  <input type="submit" value="提交表单">
</form>
<input type="checkbox" form="ant" name="favorite" value="3" />美工
</body>
</html>

form属性引用所属表单的id,于是,虽然单复选框在<form>之外,但依然是该表单的一部分。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部