`

HTML&CSS基础学习笔记1.24-input标签的单选与多选

    博客分类:
  • HTML
阅读更多

单选和多选

单选框和多选框是用<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


 

 

  • 大小: 4.6 KB
0
0
分享到:
评论
1 楼 octopole 2016-08-30  
2333333333

相关推荐

    html&css;韩顺平笔记---HTML部分.ppt

    本课件为韩顺平老师的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学习笔记HTML-css-JS.zip学习笔记...

    HTML CSS JS 学习、git-笔记.zip

    HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS ...

    Head First HTML&amp;CSS 学习笔记.zip

    CSS 学习笔记 Head First HTML&amp;CSS 学习笔记Head First HTML&amp;CSS 学习笔记 Head First HTML&amp;CSS 学习笔记Head First HTML&amp;CSS 学习笔记 Head First HTML&amp;CSS 学习笔记Head First HTML&amp;CSS ...

    学习html&amp;css的笔记.zip

    css的笔记学习html&amp;css的笔记学习html&amp;css的笔记 学习html&amp;css的笔记学习html&amp;css的笔记学习html&amp;css的笔记 学习html&amp;css的笔记学习html&amp;css的笔记学习html&amp;css的笔记 学习html&amp...

    JavaWeb新版教程-html&CSS-L和CSS-标题标签h1 - h6.avi

    JavaWeb新版教程-html&CSS-L和CSS-标题标签h1 - h6.avi

    jihong10102006#blog#07、CSS基础笔记02----对齐方式1

    title: 07、CSS基础笔记02----对齐方式tags: CSDN迁移上对齐中对齐下对齐。

    uni-app 插件 Calendar 日历多选 (不是范围选择)

    【uni-app插件Calendar日历多选】是一个用于在uni-app框架中实现多日期选择功能的组件。uni-app是一款基于Vue.js开发的多端统一框架,它允许开发者编写一次代码,就能运行在H5、微信小程序、支付宝小程序、百度小...

    JavaWeb新版教程-html&CSS-L和CSS-font标签.avi

    JavaWeb新版教程-html&CSS-L和CSS-font标签.avi

    JavaWeb新版教程-html&CSS-L和CSS-HTML标签的介绍.avi

    JavaWeb新版教程-html&CSS-L和CSS-HTML标签的介绍.avi

    JavaWeb新版教程-html&CSS-L和CSS-ifarme标签介绍.avi

    JavaWeb新版教程-html&CSS-L和CSS-ifarme标签介绍.avi

    html与css的学习笔记与练习.zip

    html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与...

    jQuery select下拉框单选和多选插件

    2. **单选与多选**:插件支持两种选择模式,用户可以选择只选择一个选项(单选),也可以同时选择多个选项(多选)。 3. **搜索功能**:在多选模式下,用户可以输入关键词进行搜索,快速定位到需要的选项,提高选择...

    html&css;&JavaScript;基础笔记

    ### HTML & CSS & JavaScript 基础笔记 #### HTML 基础 ##### Head 中常用的标签 HTML 文档头部 `&lt;head&gt;` 包含了关于网页的一些元数据信息,这些信息通常不会直接显示在网页上,但对浏览器和其他处理 HTML 文档的...

    html+css前端学习笔记.zip

    html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...

    html css js 学习笔记.zip

    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单选按钮多选按钮

    在网页设计中,CSS3(层叠样式表第三版)为单选按钮(radio button)和多选按钮(checkbox)提供了丰富的样式定制功能,极大地增强了用户界面的视觉吸引力和交互体验。本文将深入探讨如何利用CSS3来美化和操作这两种...

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用,小编自己整理的李立超老师视频的笔记,手打不易,那就望您每年快乐吧。逃) 一、进制 1.十进制(日常使用): 特点:满10进1 计数:0 1 ...

    HeadFirst HTML&amp;CSS学习笔记.zip

    《Head First HTML&CSS学习笔记.zip》是一套极具...总的来说,《Head First HTML&CSS学习笔记.zip》是一份非常宝贵的学习资源,它能够帮助读者轻松入门并深入学习HTML与CSS技术,为未来的前端开发之路奠定坚实的基础。

Global site tag (gtag.js) - Google Analytics