单选和多选

单选框和多选框是用<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. Go Cookie 练习

    package main import ( "io" "log" "net/http" ) func main() { http.Handl ...

  2. IIS 403.14 - Forbidden错误解决方法

    HTTP 错误 403.14 - ForbiddenWeb 服务器被配置为不列出此目录的内容. 解决方法如下: 打开IIS的”处理程序映射设置“,在右边的操作栏下有 ”添加脚本映射“请求路径:*可执行 ...

  3. cf509A Maximum in Table

    A. Maximum in Table time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. MySQL事务处理2

    MySQL5.X 都已经发布好久了,但是还有很多人认为MySQL是不支持事务处理的,这不得不怪他们是孤陋寡闻的,其实,只要你的MySQL版本支持BDB或 InnoDB表类型,那么你的MySQL就具有事 ...

  5. hdu 4277 USACO ORZ（dfs+剪枝）

    Problem Description Like everyone, cows enjoy variety. Their current fancy is new shapes for pasture ...

  6. [MySQL CPU]线上飙升800%，load达到12的解决过程

    接到报警通知,负载过高,达到800%,load也过高,有11了. MySQL版本号为5.6.12-log 1 top 之后,确实是mysqld进程占领了全部资源. 2 查看error日志,无不论什么异 ...

  7. Windows移动开发（二）——闭关修炼

    一些武侠小说里的大人物,为了争夺武林盟主,号召天下,常常闭关修炼一段时间,闭关期间仅仅能接触送饭的人,而且关外还有非常多守卫的人员.还有,不管是篮球还是足球运动员,他们在真正接触球之前,都必须做非常长 ...

  8. 開始学习swift开发

    近期要開始学习swift开发了,接下来的日子,会记录学习swift的历程.

  9. HDOJ1251-统计难题（trie树入门）

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others) Total Subm ...

  10. 在ViewController中View的生命周期

    view的生命周期如下(按顺序) -(void)loadView 用代码初始化的时候,第一个调用该方法.可以在这里面addSubView. -(void)viewDidLoad 初始化时一些数据的设置 ...