在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,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" 时,该选项被默认选中

如下面代码:

注意:代码中的<label>标签在本章 5-9 中有讲解。

在浏览器中显示的结果:

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

练习:

HTML--使用单选框、复选框,让用户选择的更多相关文章

  1. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  2. php一些单选、复选框的默认选择方法(示例)

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  3. Python3+Selenium3+webdriver学习笔记8(单选、复选框、弹窗处理)

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  4. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  5. jquery单选框 复选框表格高亮 选中

    单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...

  6. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. selenium+Python(定位 单选、复选框,多层定位)

    1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...

  8. 单选框 复选框 隐藏之后,绑定的change事件在ie中失效的问题

    有时候需要对单选框和复选框进行美化,就需要在<input type="radio">和<input type="checkbox">元素 ...

  9. android 中单选和复选框监听操作

    单选按钮RadioGroup.复选框CheckBox都有OnCheckedChangeListener事件,我们一起了解一下. package com.genwoxue.oncheckedchange ...

  10. 纯css3单选框/复选框美化样式代码

    纯CSS 单/复选框 美化请选择iPhone 型号 iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus   选择兴趣爱好 女 绘画 摄影 骑行   原理在这 ...

随机推荐

  1. NumPy 学习笔记(四)

    NumPy 算术函数: 1.numpy.reciprocal(arr) 返回参数逐个元素的倒数 2.numpy.power(one, two) 将第一个输入数组中的元素作为底数,计算它与第二个输入数组 ...

  2. DemoKit编译过程

    E:\Project_code\EAE\src_rev_24139_A95LYD\Project\DemoKit>make release Checking uITRON - DemoKit r ...

  3. HDU - 6446 Tree and Permutation

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6446 本题是一个树上的问题——DFS. 一棵N个结点的树,其结点为1~N.树具有N-1条边,每一条边具有 ...

  4. photon Unity RPC 调用流程

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/51425225 作者:car ...

  5. 【codeforces 707C】Pythagorean Triples

    [题目链接]:http://codeforces.com/contest/707/problem/C [题意] 给你一个数字n; 问你这个数字是不是某个三角形的一条边; 如果是让你输出另外两条边的大小 ...

  6. Spring MVC学习总结(8)——Swagger入门详解

    前言 Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件.本文简单介绍了在项目中集成swagger的方法和一些常见问题.如果想深入分析项目源码,了解更多内容,见参考资料. S ...

  7. cocos2dx luajavaBridge 学习笔记

    我在网上看到了 LuaJavaBridge 的 使用方法这篇文章 https://segmentfault.com/a/1190000004252394?utm_source=tuicool& ...

  8. [BZOJ2120] 数颜色 && [bzoj2453] 维护队列(莫队 || 分块)

    传送门 只有第一个,第二个权限题. 分块,然而wa,没看出来错在哪里,有时间再看. #include <cmath> #include <cstdio> #include &l ...

  9. CentOS 7: 配置Network

    Command Mode Step 1 » Network interface config files are located in /etc/sysconfig/network-scripts/  ...

  10. 【C语言】模拟实现strcmp函数

    //模拟实现strcmp函数 //str1>str2,返回1 //str1=str2,返回0 //str1<str2,返回-1 #include <stdio.h> #incl ...