htmlradio(HTML radio 单选框)
一、HTML:关于单选框
单选框RADIO
单选框能够进行项目的单项选择，以一个圆框选择。
基本语法
<input
type="radio"
name="field＿name"
checked
value="'value"
>
语法解释
checked表示此项被默认选中，field＿name是单选框的名称，用于服务器端接收参数使用，就像你自己的名字一样，
value表示选中项目后传送到服务器端的值。
文件范例：11-10.htm
在页面中插入单选框。
01
<!--
------------------------------
-->
02
<!--
文件范例：11-10.htm
-->
03
<!--
文件说明：插入单选框
-->
04
<!--
------------------------------
-->
05
<html>
06
<head>
07
<title>插入单选框</title>
08
</head>
09
<body>
10
<h1>用户调查</h1>
11
<Form
action=mailto:tslxg@hotmail.com
method=get
name=invest>
12
姓名：<input
type="text"
name="username"
size=20><br>
13
网址：<input
type="text"
name="url"
size=20
maxlength=50
value="http://"><br>
14
密码：<input
type="password"
name="password"
size=20
maxlength=8><br>
15
确认密码：<input
type="password"
name="password_confirm"
size=20
maxlength=8><br>
16
请上传你的照片：<input
type="File"
name="File"><br>
17
请选择你喜欢的音乐：
18
<input
type="checkbox"
name="m1"
value="rock"
checked>摇滚乐
19
<input
type="checkbox"
name="m2"
value="jazz">爵士乐
20
<input
type="checkbox"
name="m2"
value="pop">流行乐<br>
21
请选择你居住的城市：
22
<input
type="radio"
name="city"
value="beijing"
checked>北京
23
<input
type="radio"
name="city"
value="shanghai">上海
24
<input
type="radio"
name="city"
value="nanjing">南京
25
</Form>
26
</body>
27
</html>
文件说明
第22行到第24行就是插入的单选框。其中每一个单选框的名称是相同的，有其独立的值，"北京"项目是被默认选中的。
二、html单选框复选框怎么用
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio"时，控件为单选框
当 type="checkbox"时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP使用
4、checked：当设置 checked="checked"时，该选项被默认选中
注意:同一组的单选按钮，name取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
三、html 怎么设置单选框的样式
1、首先打开编辑器，然后新建一个html文件，编写入基本的框架。
2、然后用form，input和label创建一个单项选择题。
3、创建一个新的css文件，并且用link标签关联HTML文件。
4、然后撤销一下原来按钮的样式。
nput[type="radio"]{
display: none;
}
5、nput[type='radio']+ label:before{
content:"";
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid gold;
}
首先设置未点击的单选框样式，用border来设置颜色。
6、nput[type='radio']:checked+ label:before{
background-color: red;
}
接着设置点击后的背景颜色，这里用background-color。
7、最后运行一下，完成效果图。