单选和多选
单选框和多选框是用<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 JS 课程中的笔记整理,注意是截图版的 如需要下载文字版的请绕道 估计网上也找不到文字版的 本教程适合电脑复习用的
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
css的笔记学习html&css的笔记学习html&css的笔记 学习html&css的笔记学习html&css的笔记学习html&css的笔记 学习html&css的笔记学习html&css的笔记学习html&css的笔记 学习html&...
JavaWeb新版教程-html&CSS-L和CSS-标题标签h1 - h6.avi
JavaWeb新版教程-html&CSS-L和CSS-img标签.avi
JavaWeb新版教程-html&CSS-L和CSS-HTML标签的语法.avi
JavaWeb新版教程-html&CSS-L和CSS-ifarme标签介绍.avi
引用js <!--引用js--> <script src="js/jquery-1.11.2.min.js"> ... //参数{input类名，选择类型(单选or多选)} $(".rdolist").labelauty("rdolist", "rdo"); $(".chklist").labelauty("chklist", "check"); });
CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo源码：https://github.com/dcsite/magic-input使用$ npm install magic-input你需要引入 dist/magic-input.css或者dist/magic-input.min.css...
JavaWeb新版教程-html&CSS-L和CSS-标签名选择器.avi
2. **单选与多选**：插件支持两种选择模式，用户可以选择只选择一个选项（单选），也可以同时选择多个选项（多选）。 3. **搜索功能**：在多选模式下，用户可以输入关键词进行搜索，快速定位到需要的选项，提高选择...
### HTML & CSS & JavaScript 基础笔记 #### HTML 基础 ##### Head 中常用的标签 HTML 文档头部 `<head>` 包含了关于网页的一些元数据信息，这些信息通常不会直接显示在网页上，但对浏览器和其他处理 HTML 文档的...
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
在网页设计中，CSS3（层叠样式表第三版）为单选按钮（radio button）和多选按钮（checkbox）提供了丰富的样式定制功能，极大地增强了用户界面的视觉吸引力和交互体验。本文将深入探讨如何利用CSS3来美化和操作这两种...
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 ...
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
### 三、单选与多选模式 `react-rdatepicker`支持单选和多选模式。默认情况下，组件处于单选模式。若需开启多选，可以设置`multiple`属性： ```jsx (dates) => setDate(dates)} /> ``` 此时，`onChange`回调会...