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-单、多选框,按钮 的相关文章

  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整
  • SELECT 元素中的图像[重复]

    这个问题在这里已经有答案了 我知道如何使用 CSS 背景图像属性让图片显示在 HTML 下拉表单元素中的选项旁边 但是 图像不会显示在所选元素上 有什么方法可以做到这一点 最好只使用CSS EDIT 这是列表元素的工作代码的示例 但是 当下
  • Javascript 放大/缩小到鼠标 x/y 坐标

    我设法让鼠标拖动来滚动div 但是用鼠标放大 缩小不完整 它有效 但我希望鼠标指针将图像保持在该位置并同时缩放它 如下所示 我需要使用scrollBy 将滚动返回到缩放之前的上一点 有人知道该怎么做吗 这是某人制作的小提琴https jsf
  • jquery 文本旋转

    我在 div 中有一个简单的文本 如下所示 div div This is an example text div div 我希望 div 内的文本旋转 20 30 度 我已经找到了this https stackoverflow com
  • 基本 CSS 问题 - 父 DIV 与未知子 DIV、居中父 DIV

    当我将 DIV 居中时 我会给它一个宽度并放置margin auto然而 我对这种情况有两个问题 该父 DIV 内将有 2 或 3 个带有 float left 的 DIV 子 DIVS 的宽度不会改变 但数量可能会改变 2 或 3 因此
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • ReactJS 水平对齐material-ui 元素

    我试图在文本输入旁边有一个单选按钮 这样用户基本上可以输入问题的 答案 并标记一个首选答案 然而 Material UI 将每个都放在自己的行上 这就是我目前所拥有的 div div
  • 如何将 div (或任何元素)覆盖在表格行 (tr) 上?

    我想在恰好有多个列的表行 tr 标记 上覆盖一个 div 或任何可以使用的元素 我尝试了几种方法 似乎都不起作用 我在下面发布了我当前的代码 我确实得到了一个覆盖 但不是直接覆盖在该行上 我尝试将覆盖顶部设置为 div Bottom css
  • css 字体 twitter 像关闭按钮一样,我错过了什么?

    twitter 有一个关闭按钮 它是单个字符 x 我需要类似的东西 但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial
  • Rails Active Admin css 与 Twitter Bootstrap css 冲突

    我对 Rails 资产管道有点陌生 所以我可能做错了什么 我正在尝试为我的后端使用 Active Admin 为我的前端应用程序使用 twitter bootstrap css 我将 bootstrap css 添加到 应用程序 资产 样式
  • (CSS) 倾斜 img 框架而不扭曲图像

    我正在制作一个包含许多倾斜元素的网站 如下所示 这还不错 CSS 转换可能会扭曲它 但是这个怎么样 图像没有扭曲 只是框架以倾斜的方式裁剪 最简单 最好的方法是什么 I think this http codepen io antiblan
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以
  • 带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误

    Safari 和 Chrome 以及 Opera 和 Firefox 都可以处理 hover伪类和相邻兄弟选择器 a hover div 这有效 但是 当添加另一个相邻兄弟时 div hover a div Webkit 崩溃了 但是 如果
  • 在具有不同边框的 div 上调用函数

    我有一个div对于一个名为 ball 的类 div 的每个边缘都有一个边框 顶部边框 左侧边框等 当用户单击每个边框上的边框时 我想用 JavaScript 触发不同的事件 例如 用户点击边框顶部console log top 等等 HMT
  • jquery UI datepicker仅月份和年份的css定位问题

    我已经实施了这里讨论的解决方案 JQuery 日期时间选择器 只需选择月份和年份 https stackoverflow com questions 4079525 jquery datetime picker need to pick m
  • CSS 边框底部的曲线

    我需要 CSS 中的这个图像 并且在这个边框内需要一个背景图像 我努力了 border radius 0 0 50 50 webkit border radius 0 0 50 50 但没有得到所需的形状 任何帮助 将不胜感激 边界半径 您
  • JavaFX使节点覆盖父节点边框颜色

    我有一个如下所示的节点 仅使用 css 我希望标签覆盖其父边框颜色 因此标签下方的边框颜色部分变得不可见 我用来制作这个边框的CSS代码 fx border color black fx border width 3 fx border r
  • 中有样式表 吗?

    在内部链接 CSS 文件是一个坏主意吗 body 我读过 如果浏览器在外部找到另一个 CSS 文件 则它会被迫重新开始 CSS 渲染 head 只是因为它可能需要将样式应用于已经渲染的元素 另外 我认为 HTML 无法正确验证 我需要确认这
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum

随机推荐

  • 机器智能学科

    机器智能学科简介 机器智能 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 元素的初始