单选和多选

单选框和多选框是用<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. 如何给网页标题栏上添加图标(favicon.ico)

    favicon.ico详解:     favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹.地址栏和标签标题前面的个性化图标. 设置步骤: 1. 把做好的f ...

  2. 转：堆(heap)和栈(stack)有什么区别??

    简单的可以理解为: heap:是由malloc之类函数分配的空间所在地.地址是由低向高增长的. stack:是自动分配变量,以及函数调用的时候所使用的一些空间.地址是由高向低减少的. 预备知识—程序的 ...

  3. 功能：使用QQ号登陆，并加上微信和短信提醒，是否增量备份可选，阿里大鱼短信发送开发与测试，聚合数据（用JSON发短信，比较清楚）

    微博就可以,所以其它软件也可以http://desktop.weibo.com/ http://blog.csdn.net/jueblog/article/details/14497181http:/ ...

  4. linux awk浅析（转）

    Awk 是一种非常好的语言,同时有一个非常奇怪的名称.在本系列(共三篇文章)的第一篇文章中,Daniel Robbins 将使您迅速掌握 awk 编程技巧.随着本系列的进展,将讨论更高级的主题,最后将 ...

  5. HAVING 子句 (SQL Server Compact)

    MSDN官方文献 原文地址:http://technet.microsoft.com/zh-cn/library/ms173260.aspx

  6. C++中输出流运算符的重载

    cout是ostream类的对象,cin是istream类的对象. 我们平时用的cout<<就相当于cout.operator<<(...).也就是说正常使用(不对operat ...

  7. POJ-魔兽世界之一：备战

    描述 魔兽世界的西面是红魔军的司令部,东面是蓝魔军的司令部.两个司令部之间是依次排列的若干城市. 红司令部,City 1,City 2,……,City n,蓝司令部 两军的司令部都会制造武士.武士一共 ...

  8. SQL-Delete Duplicate Emails

    Write a SQL query to delete all duplicate email entries in a table named Person, keeping only unique ...

  9. JDBC编程之优化

    1.创建 dbconfig.properties driver=com.mysql.jdbc.Driver dburl=jdbc\:mysql\://localhost\:3306/mytest us ...

  10. lesson5:Condition的原理分析及demo展示

    Condition 将 Object 监视器方法(wait,notify,和notifyAll)分解成截然不同的对象,以便通过将这些对象与任意Lock实现组合使用,为每个对象提供多个等待 set(wa ...