快捷导航
蚂蚁部落 网站首页 前端教程 HTML教程 查看内容

栏目导航

≡基础知识≡

≡基本元素≡

≡常见元素与文本≡

≡超链接≡

≡表单≡

≡语义化元素≡

≡列表≡

≡表格≡

≡多媒体≡

≡全局属性≡

HTML input radio单选按钮

2017-10-11 17:14| 发布者: admin| 查看: 525| 评论: 0|来自: 蚂蚁部落

将<input>标签的type属性值设置为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="radio" name="sex" value="1" />男
  <input type="radio" name="sex" value="2" />女
</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="radio" name="favorite" value="1" />前端
  <input type="radio" name="favorite" value="2" />后端
  <input type="radio" name="ant" value="3" />美工
</form>
</body>
</html>

在文章的开头部分讲过,单选按钮是互斥的,只能够选中其中一项,但是为什么最后一个单选按钮总能够被选中。这是因为只有name属性值相同的单选按钮才是互斥的。

[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="radio" name="favorite" value="1" />前端
  <input type="radio" checked name="favorite" value="2" />后端
  <input type="radio" 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="radio" name="favorite" value="1" />前端
  <input type="radio" required name="favorite" value="2" />后端
  <input type="radio" name="ant" value="3" />美工
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

required属性规定单选按钮是必选的,只要在相同name属性值的任意单选按钮设定一个即可。

[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="radio" name="favorite" value="1" />前端
  <input type="radio" autofocus name="favorite" value="2" />后端
  <input type="radio" name="ant" 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="radio" name="favorite" value="1" />前端
  <input type="radio" disabled name="favorite" value="2" />后端
  <input type="radio" name="ant" value="3" />美工
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

设置对应单选按钮为不可用;设置为不可用状态的表单元素值不会被提交。

[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="radio" name="favorite" value="1" />前端
  <input type="radio" disabled name="favorite" value="2" />后端
  <input type="radio" name="ant" value="3" />美工
  <input type="submit" value="提交表单"/>
</form>
兴趣:<input type="text" form="ant" name="favorite">
</body>
</html>

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-19 02:24 , Processed in 0.064552 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部