单选和多选

单选框和多选框是用<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. Dedecms v5.7包含上传漏洞利用

    Title:Dedecms v5.7包含上传漏洞利用 --2012-09-21 10:16 注册,登录,免邮箱验证. up.htm ---------------------------------- ...

  2. ural 1207 Median on the Plane

    极角排序 #include <cstdio> #include <cstring> #include <algorithm> #include <cmath& ...

  3. java中jsoup框架解析html

    今天遇到对网页内容进行操作,思考了一下,先获取连接后的html内容,然后对html文档进行操作呗.思路没有问题,但是问题还是不少.于是便找到了jsoup这个神器了... 1.什么是jsoup? 百度百 ...

  4. Qt入门（2）——使用Qt编写的Hello world

    对于一个qt初学者来说,一步一步来直到作出一个hello world是最基础的入门. 从菜单:应用程序->编程中找到QtCreator

  5. HTTP数据包头解析---之温故而知新！

    [转]HTTP请求模型和头信息参考 参考: http://blog.csdn.net/baggio785/archive/2006/04/13/661410.aspx模型: http://blog.c ...

  6. 动态规划 DP

    10.1.5.253 1143 数字金字塔#include <iostream> #include<string.h> using namespace std; int a[1 ...

  7. 关于解决Oracle登录：ora-12154:tns:无法解析指定的连接标识符

    (注:此文摘自http://www.linuxidc.com/Linux/2012-04/59322.htm) 开始学习Oracle,所以今天就打算把Oracle 10g安装下.安装完后就来进行测试是 ...

  8. linux patch

    作为程序员,了解diff&patch命 令是非常必要的.比如说我们发现某个项目有bug代码,而自己又没有svn的提交权限,那么此时最合适的解决方法就是用diff命令做一个补丁发给项目成 员.项 ...

  9. Oracle_Q&A_01

    Step01: SHOW USER DESCRIPTION Step02:QUESTION & ANSWER --查询员工姓名和职位字数相等的员工 SELECT * from emp wher ...

  10. 2016-05-I

    2016 年上半年软件设计师上午真题 1. VLIW 是( )的简称.A．复杂指令系统计算机 B．超大规模集成电路C．单指令流多数据流 D．超长指令字 2.主存与 Cache 的地址映射方式中,( ) ...