HTML5-单、多选框,按钮

2023-11-18

属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。当tpye为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlength type为text或password时,输入的最大字符数
checked type为radio或checkbox时,指定按钮是否被选中

单选框标签

    
    <!--单选框标签
    input type="radio"
    value="boy"   单选框按钮
    name="sex"    表示组,一个name表示一个组
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>


效果:
请添加图片描述

多选框标签

    <!--多选框标签
    input type="checkbox"
    input必须要配置name,表示一个组
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

效果:
请添加图片描述

按钮

    <!--按钮
    input type="button"  普通按钮
    input type="image"   图片按钮
    input type="submit"  提交按钮
    input type="reset"   重置按钮
    -->
    <p>按钮:
        <input type="button" name="btn1" value="点击变美">
        <input type="image" src="../resource/image/1.jpg">  <!--图片按钮-->
    </p>
    
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

效果:
请添加图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5-单、多选框,按钮 的相关文章

  • Twitter Bootstrap 上的插入符号是如何构建的?

    这更多的是一个好奇问题 而不是我真正需要知道的事情 在本页面 http twitter github com bootstrap components html buttonDropdowns http twitter github com
  • 如何设置引导开关的 css 颜色?

    如何在此引导开关中将蓝色更改为另一种颜色 我尝试更改输入元素的颜色和背景颜色 但它没有更改开关颜色 这是 html 和 bootstraplink https getbootstrap com docs 4 2 components for
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • 没有嵌套容器的桌面和移动 Flexbox 布局

    我有 3 个 div 它们必须按移动布局的特定顺序排列 但我必须将第 2 个 div 作为桌面布局的侧边栏 所以对于移动设备 分区1 分区2 分区3 对于桌面 分区1 div2 分区3 在桌面布局中 div 2 有阴影背景 因此必须是父级的
  • 是否可以在没有 Javascript(仅 CSS)的情况下执行相同的操作(悬停效果)?

    我正在尝试创建一个带有图标的按钮像这样 http jsfiddle net pRdMc HTML div div class icon div span Send Email span div CSS button width 270px
  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content
  • 输入和文本字段中的背景颜色

    我想更改表单文本和输入字段中的颜色背景 但是当我这样做时 它也会影响提交按钮 是否可以通过其他不影响按钮的方式来完成 我用过这段代码 input textarea background color d1d1d1 input type tex
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • 使用溢出时无法隐藏滚动条:auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y
  • Google 再营销标签 - iframe 高度问题

    我注意到 Google 的再营销代码会在我的页面底部插入一个 iframe 问题是 iframe 弄乱了我的布局 它的高度为 13 像素 并且在底部留下了空白的白色垂直空间 我尝试用 css 隐藏它 但它在 IE9 中仍然可见 iframe
  • 我可以在 CSS 类名中使用驼峰命名法吗

    我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗 从技术上讲是可以的 但这是有风险的 因为虽然 CSS 语法大多不区分大小写 但在某些浏览器中 在某些条件下 类名被视为区分大小写 因为规范没有指定浏览
  • CSS 中的像素与像素密度

    我对 HTML 和 CSS 非常陌生 我突然想到 当决定某个东西是 5px 时 比如说 由于像素的物理尺寸取决于密度 所以 5px 在 100 ppi 的屏幕上看起来肯定比在 300 ppi 的屏幕上看起来更大ppi 这是正确的吗 如果是
  • 垂直对齐复选框标签? [复制]

    这个问题在这里已经有答案了 我有这样的复选框
  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序?

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch

随机推荐

  • 机器智能学科

    机器智能学科简介 机器智能 Machine Intelligence MI 是指由机器 计算机以及其它计算设备 实现的人的智能 也被称为人工智能 Artificial Intelligence AI 专指计算机科学中与智能行为自动化有关的一
  • RAC重建OCR/Voting disk总结

    author skatetime 2010 05 10 我的测试环境 母系统 win2003虚拟软件 vmware3 2 1guest系统 centos4 7oracle db oracle10 2 1 前两天由于意外原因 同事从新插拔下电
  • Auto-GPT横空出世!

    转自公众号 放码过来a 千万别关注 为怕你看了会上瘾 Auto GPT 顾名思义 其独到之处就在于 Auto 可 自主 实现你设定的任何目标 即 Auto GPT 会自己上网查资料 自己思考解决方案 自己运用相关工具 而你要做的 就是在屏幕
  • 报错Error : Program type already present: android.support.design.widget.CoordinatorLayout$

    方法一 support依赖版本改为27 1 1并添加一下配置 implementation com android support appcompat v7 27 1 1 configurations all exclude group c
  • 工具技能学习(一):前置技能-makfile、make、.mk

    工具技能学习 一 前置技能 makfile make mk 在构建镜像的时候你肯定看到了很多的makefile文件 昨天我们也解读一些一些构建编译的makefile文件 但是有些兄弟没有这方面的经验 对于makefile文件的格式还是不是很
  • 树莓派4B之Windows XP系统安装游戏(二)

    上一篇博文 树莓派4B之Windows XP系统安装游戏 一 上上篇博文 树莓派4B安装windows xp windows 95 windows xp windows 95 for raspberry pi 4B 目录 一 获取游戏下载途
  • re模块----你也可以玩得很溜正则表达式

    目录 re模块 compile pattern flags 0 flag匹配模式 match pattern string flags 0 search pattern string flags 0 findall pattern stri
  • java file类总结

    直入正题 代码 自己可以复制去看 里面主要 介绍了文件的File类的新建 删除 重命等操作 以及File文件的属性方法 package com gx iodemo import java awt BufferCapabilities Fli
  • APP漏洞挖掘(二)同开发商的多款APP存在通用漏洞

    0x01 前言 测某一APP时 根据信息收集 测试 发现APP的后台系统存在SQL注入 XSS 弱口令 信息泄漏等漏洞 此APP本身存在逻辑漏洞与SQL注入漏洞 再通过观察酷传搜索的结果发现此APP开发商开发了三十几个APP 猜测可能存在相
  • video-09-video音频视频 进度条无法正常使用问题

    开发过程中遇到了 进度条无法使用 吓我一跳 还以为是开发有问题呢 目录 一 现象 二 原因 三 解决 一 现象 网页播放器能够正常播放文件 但是播放器的进度条只能显示进度 没办法拖动 二 原因 视频url链接缺少响应头 三 解决 https
  • Allegro整体旋转

    1 激活MOVE命令 然后在Options栏Point选择User Pick 在Find栏勾上所有ALL ON 2 空白处 右击选中Temp Group 3 选中要旋转的部分 右击选中Complete 4 点击一点作为User Pick旋转
  • spi总线之通信原理及linux驱动读写实现

    一 SPI简介 1 SPI 全称SerialPerripheral Interface 也就是串行外围设备接口 是一种高速全双工穿的同步通信总线 SPI时钟频率相比I2C要高得多 最高可以达到上百MHz SPI以主从方式工作 通常是一个主设
  • CM4 启用SPI6(cs0)

    vim boot config txt dtparam spi on dtoverlay spi6 1cs cs0 pin 18
  • VS2022+PCL1.13.0配置保姆级教程

    文章目录 VS2022 PCL1 13 0配置保姆级教程 参考博客 1 VS和PCL的下载与安装 2 配置pcl环境变量 3 配置VS项目 属性 3 1 C C 常规 SDL检查 否 3 2 C C 语言 符合模式 否 3 3 C C 语言
  • 【blender】基础操作

    blender基础操作 相机视角跟随移动 n 打开右侧工具栏 视图 锁定相机到视图 进入四视图视角 ctrl alt q 选中物体进入合适观察视角 聚焦 物体回到世界中心 alt g 物体沿y轴移动6m g y 6 物体在xy平面上移动 g
  • Angular1.x规范

    原文地址 https github com johnpapa angular styleguide tree master a1 Angular规范 Angular Team Endorsed 非常感谢领导Angular团队的Igor Mi
  • python绘制混淆矩阵

    之前就了解过混淆矩阵 但是一直没有实践 今天刚好有数据实践一下 这里记录一下代码实现过程 方便以后查阅 python绘制混淆矩阵 matplotlib实现 sklearn实现 sklearn metrics ConfusionMatrixD
  • 我也来一个“羊了个羊”

    演示以及原理讲解 源码地址 https gitee com 13026118978 sheep asheep 实现 1 定义变量 动物数组 const animals export const configData animals 动物数组
  • JAVA中的权限限定修饰符

    今日份鼓励 改变世界的根本是在改变自己 目录 一 访问权限修饰符 二 public修饰符 三 protected修饰符 四 不使用修饰符 默认修饰符 五 private修饰符 六 类的访问修饰符不使用private与protected的原因
  • HTML5-单、多选框,按钮

    属性 说明 type 指定元素的类型 text password checkbox radio submit reset file hidden image和button 默认为text name 指定表单元素的名称 value 元素的初始