单选和多选

单选框和多选框是用<input>标签来实现的。

<input>标签的type属性值为"checkbox"时，表示多选框，为"radio"时表示单选框。

一个多选列表一般具有2个或两个以上的多选框,它们都具有属性name，且属性name值相同，当这些多选框具有属性checked时，表示选中，没有checked属性表示未选中。在一个多选列表内，可以有复数个多选框具有checked属性。

一个单选列表一般具有2个或两个以上的单选框，它们都具有属性name，且属性name值相同，当这些单选框具有属性checked时，表示选中，没有checked属性表示未选中。在一个单选列表内，只能有一个单选框具有checked属性。

观察下面代码和效果页面，理解单选框和多选框的使用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="index.css">

    <title>表单</title>

</head>

<body>

<form action="/" method="get">

    <h2>input标签 -- 单选和多选</h2>

    <p>性别： <input type="radio" name="sex" id="male"/><label for="male">男</label> <input type="radio" name="sex" id="female"/><label for="female">女</label></p>

    <p>专长： <input type="checkbox" name="skills" id="html"/><label for="html">HTML</label>

        <input type="checkbox" name="skills" id="css"/><label for="css">CSS</label>

        <input type="checkbox" name="skills" id="js"/><label for="js">JS</label>

    </p>

</form>

</body>

更多学习内容，就在码芽网http://www.mayacoder.com/lesson/index

HTML&CSS基础学习笔记1.24-input标签的单选与多选的更多相关文章

  1. HTML&CSS基础学习笔记1.3-HTML的标签语法

    HTML标签语法 1. 标签由英文尖括号<和>括起来,如<html>就是一个标签. 2. HTML中的标签一般都是成对出现的,分开始标签和结束标签.结束标签比开始标签多了一个/ ...

  2. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  3. HTML&CSS基础学习笔记1.26-input重置表单

    重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...

  4. HTML&CSS基础学习笔记1.25-input标签隐藏元素

    隐藏元素 有时候我们编写前端代码的时候,可能需要把一些数据告诉后台,但是这些数据又不想让用户看到,我们可以设置<input>标签的[type]属性为"hidden". ...

  5. HTML&CSS基础学习笔记1.22-简单的注册页面

    一个简单的注册页面 表单提交是前后端数据交互的一种方式. 代码区是一个注册页面,其中包含了以下标签:<form>.<table>.<input>.<butto ...

  6. C#学习笔记8：HTML和CSS基础学习笔记

    <!-- 1.<P>...</P>段落标签 2.<br/>折行标签. 3.<img src="" height="*px& ...

  7. HTML&CSS基础学习笔记1.27-input提交数据

    提交数据 我们在表单上填的信息很多情况下需要提交到后台. <input>的[type]属性值为“submit”时,表示提交表单数据.它在页面的表现形式也是个按钮,点击该按钮,表单数据将会提 ...

  8. HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表

    文本域 <textarea>标签定义多行的文本输入控件. 平时在网页上的一些需要输入比较多的内容的输入框,比如回复帖子,回答问题等,都可以用<textarea>标签. < ...

  9. HTML&CSS基础学习笔记1.16-单元格间距和表格主体

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

随机推荐

  1. 开个CS5.4编译编译，调试错误贴

    记录各种编译,调试中遇到问题.

  2. 【HDOJ】2722 Here We Go(relians) Again

    根据矩阵建图,然后求最短路径. #include <cstdio> #include <cstring> #include <cstdlib> #define L ...

  3. window.open的小技巧分享

        今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明.       聊到window.open,不得不说明一下他的使用方法,主要有两种形式:   win ...

  4. 提升效率的Linux终端快捷操作汇总

    很多普通 Linux 桌面用户都对使用终端感到排斥和恐惧,其实它没大家想的那么复杂,很多常见操作都可以直接在终端中进行,如:安装软件.升级系统等. 无论你是新手还是 Linux 终端使用的老鸟,系统极 ...

  5. 当程序遇到 throw后的处理

    不管你在何处throw出一个exception,后面的代码便不会执行,它会去匹配本层代码中是否有相应的catch语句来捕捉,如果有,则进入此catch块,执行其中的代码.这样这次异常算是处理完了,如果 ...

  6. Emacs快捷键列表

    C = ControlM = Meta = Alt | EscDel = Backspace 基本快捷键(Basic)C-x C-f "find"文件, 即在缓冲区打开/新建一个文 ...

  7. Cortex-M3 FLASH 日志文件系统

    本文简要介绍一下本人在Cortex-M3系统的STM32F10x芯片上开发的一个日志文件系统(与其说是系统,不如说是小小的库).该库的特点是将在STM32F10x芯片上处理数据(历史记录)变得简单可靠 ...

  8. 基于Hadoop集群的HBase集群的配置

    一  Hadoop集群部署 hadoop配置 二 Zookeeper集群部署 zookeeper配置 三  Hbase集群部署 1.配置hbase-env.sh HBASE_MANAGES_ZK:用来 ...

  9. SqlServer 自动备份、自动删除7天前备份

    -----sqlserver 数据异地备份 默认删除 七天前的数据 -----该代码可配置成SQLServer作业里做调度,或者配置成任务计划进行执行 ----挂载异地盘符 exec master.. ...

  10. 修改cmd的字体

    通常打开的cmd默认的字体比较小,字体只有宋体和新宋体两种,如果要修改,需要通过修改注册表才行. 打开regedit后,找到如下路径HKEY_LOCAL_MACHINE\SOFTWARE\Micros ...