单选按钮复选框

　　单选按钮和复选框经常被用于问卷调查和在购物车中结算商品等。其中，单选按钮实现在一组选项中只选择一个；而复选框则反之，可以实现多选甚至全选。

1、单选按钮

　　在网页中，单选按钮用来让浏览者在答案之间进行单一选择，在页面中以圆框表示。

1 <input type="radio" value="单选按钮的取值" name="单选按钮的名称" checked="checked"/>

　

2、复选按钮

　　浏览者在填写表单时，有些内容可以让浏览者进行多选选择的形式来实现。复选框能够进行项目的多选选择，以方框显示。

1 1 <input type="radio" value="复选按钮的取值" name="复选按钮的名称" checked="checked"/>




 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <link rel="stylesheet" href="../CSS/new_file.css" />
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8     <body>
 9         <div class="mr-cont">
10             <form>
11                 <label><input type="radio" name="all">全选</label>
12                 <label><input type="radio" name="all">全不选</label>
13                 <input type="checkbox" class="checkbox1" />
14                 <input type="checkbox" class="checkbox1" />
15                 
16             </form>
17         </div>
18     </body>
19 </html>








 1 .mr-cont{
 2     width: 510px;
 3     height: 405px;
 4     margin: 20px auto;
 5     border: 1px solid #foo;
 6     background: url(img/HBuilder.png);
 7 }
 8 form{
 9     padding-top: 10px;
10 }
11 [type="checkbox"]{
12     display: block;
13     height: 125px;
14 }






css部分暂时不太会，凑合着看








            

            
posted @ 
2023-11-13 21:50 
日积跬步以至千里 
阅读(57) 
评论(0) 
 
收藏 
举报