单选和多选

单选框和多选框是用<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. 电脑远程控制手机2—webkey

    远程控制神器,这个是真真切切试验成功了.我用的手机是OPPOR817和华为A199. 网上去下载webkey,http://soft.shouji.com.cn/down/23169.html 然后安 ...

  2. 为什么c程序里一定要写main函数

    一. 学习过程 编写程序f.c: 对其进行编译,正常通过,再对其进行连接,出现错误: 显示的出错信息为: 翻译成中文是:在c0s模块没有定义符号’_main’. 那么这个错误信息可能与文件c0s.ob ...

  3. bzoj2821作诗

    http://www.lydsy.com/JudgeOnline/problem.php?id=2821 分块 我们把数列分成$\sqrt{N}$块 记$f[i][j]$表示第i块到第j块的答案,这个 ...

  4. python部落刷题宝学到的内置函数（二）

    感觉到刷题宝有一个好处,也许也不是好处,它的答案必须是真正输出的值,也就是说应该输出字符串aaaa的时候,答案必须写成界面上返回的值,即'aaaa'.有利于真正记忆返回值类型,但是....太繁琐了 1 ...

  5. C++与lua交互

    项目开发的脚本层用的是Lua,引擎用的是C++.但是经理不给开放引擎层的代码.刚好最近项目空闲,安排了学习C++跟Lua的通信. 一.C++与Lua数据交互 数据交互主要是通过C API来实现 首先, ...

  6. Nginx缓存解决方案：SRCache

    前些天帮别人优化PHP程序,搞得灰头土脸,最后黔驴技穷开启了FastCGI Cache,算是勉强应付过去了吧.不过FastCGI Cache不支持分布式缓存,当服务器很多的时候,冗余的浪费将非常严重, ...

  7. <WinForm_1>初识WinForm编程

    暑假花了一个多月自学了Win32 SDK编程,不敢说成为了高手,但是还是颇具收获——windows的消息机制(著名的消息循环).一切控件均是窗口…… 曾经有一位网友(和我一个专业的)向我吐槽:Win3 ...

  8. CoreText学习（一）Base Objects of Core Text

    最近要做一个读入Word,PDF格式等的文件并且加以编辑的程序,本来以为使用Text Kit结合Text View来打开doc文件是完全没问题的,结果用了各种方法打开要么是数据是nil,要么打开的文字 ...

  9. Linux下使用虚拟网卡的ingress流控(入口流控)

    Linux内核实现了数据包的队列机制,配合多种不同的排队策略,可以实现完美的流量控制和流量整形(以下统称流控).流控可以在两个地方实现,分别为egress和ingress,egress是在数据包发出前 ...

  10. error userinfo error pos 5 友盟分享 网页分享(无新浪微博客户端)

    集成友盟分享的时候,其中微博分享,如果没有添加测试账号,就会出现{error userinfo error pos  5}的错误添加测试账号才能分享在测试信息下添加测试账号