HTML5培训学习在表单中添加控件(2)

2017-04-10 14:07:28

(1)单选按钮---radio
单选按钮可以进行项目的单项选择,以一个圆框表示
语法:<input type="radio" name="单选按钮名称" value="单选按钮取值"checked="checked"/>
解释:在语法中,checked属性表示这一单选按钮默认被选中,而在一个单选按钮组中只能有一项单选按钮控件设置为checked。Value用来设置用户选中该项后,传送到处理程序中的值。
实例:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>单选按钮</title>
</head>
<body>
<h2>你最喜欢做的事情是什么?</h2>
<form action=""name="future" method="post">
<input type="radio"value="answerA"name="test"checked="checked" />
听歌<br />
<input type="radio"value="answerB"name="test" />
看电影<br />
<input type="radio"value="answerC"name="test" />
打游戏
</form>

</body>
</html>

 

运行代码,可以看到如图包含三个单选按钮,默认单选按钮选择的第一项。
 
(2)复选框---checkbox
复选框checkbox是用来进行多项选择的
语法:<input type="checkbox" value="复选框的取值" name="名称"checked="checked"/>
解释:checked参数表示该选项默认已被选中,一个选择中可以有多个复选框被选中。
实例:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>复选框</title>
</head>
<body>
<form action="" name="check" method="post">
<h2>我选择飞雀教育的原因?</h2>
<input type="checkbox" value="A1" name="test" />
这里有最专业的设备<br />
<input type="checkbox" value="A2" name="test" />
 这里有最热情的老师<br />
<input type="checkbox" value="A3" name="test" />
 这里有最详细的教学<br />
<input type="checkbox" value="A4" name="test" />
这里有最丰富的资源
</form>
</body>
</html>

 

运行代码如图所示,在此选择中,可以对复选框进行多项选择。
 
(3)按钮:普通按钮---button
语法:<input type="button"value="按钮取值"name="按钮名称"onclick="处理程序" />
解释:button参数中可以添加onclick参数来实现一定的功能。
实例:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>添加普通按钮</title>
</head>
<body>
<form action=""name="anniu"method="post">
<input type="button"value="普通按钮"name="button1"/>
<input type="button"value="关闭窗口"name="close"onclick="window.close()" />
<input type="button"value="打开窗口"name="open"onclick="window.open()" />
</form>
</body>
</html>
运行代码,当点击“普通按钮”,页面不会有任何变化,当点击“关闭窗口”浏览器会弹出关闭警告窗口。点击“打开窗口”,浏览器会直接打开一个新窗口。如下图:

 

iOS QQ群

HTML5 QQ群

飞雀动态

行业新闻

Copyright © 2015-2016 Future education technology co., LTD All Rights Reserved