如何使无线电输入成为必需?

2024-04-29

我在表单中提供了无线电输入,供用户选择性别。如何使性别成为必需的输入(用户必须选择女性或男性,否则他们会按照通常的方式得到提示required).

我尝试添加required如下所示,但它不起作用(用户可以继续而不选择女性或男性)。

              <div class="form-group btn-group" data-toggle="buttons">
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
                </label>
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Male" required><i class="fa fa-male"></i> Male
                </label>
              </div>

Update 1

正如答案中所建议的,我更新了代码,以便只有一个无线电输入包含required但它仍然不起作用。

              <div class="form-group btn-group" data-toggle="buttons">
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
                </label>
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Male"><i class="fa fa-male"></i> Male
                </label>
              </div>

Update 2

根据要求,这里是完整的代码:

          <form action="/client/index.php" method="post" role="form">
            <fieldset>
              <div class="form-group">
                <input class="form-control input-lg" placeholder="Nickname" name="nickname" type="text" autofocus required>
              </div>
              <div class="form-group btn-group" data-toggle="buttons">
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
                </label>
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Male"><i class="fa fa-male"></i> Male
                </label>
              </div>
              <h4>Options</h4>
              <div class="form-group">
                <div class="row">
                  <div class="col-md-6">
                    Block private chats
                  </div>
                  <div class="col-md-6">
                    <input type="checkbox" name="block" data-on-text="Yes" data-off-text="No">
                  </div>
                </div>
              </div>
              <button type="submit" name="submit" class="btn btn-lg btn-primary btn-block">Start</button>
            </fieldset>
          </form>

只需设置required单选组的一个输入的属性,

See the fiddle http://jsfiddle.net/lalu050/2du3s/367/

For eg:

<form>
<label for="input1">1:</label><input type="radio" name="test" id="input1" required value="1" /><br />
<label for="input2">2:</label><input type="radio" name="test" id="input2" value="2" /><br />
<label for="input3">3:</label><input type="radio" name="test" id="input3" value="3" /><br />
<input type="submit" value="send" />
</form>

Update

我刚刚注意到你在代码中编写的内容运行得很好......请参阅fiddle http://jsfiddle.net/lalu050/6s6wa1rk/..

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

如何使无线电输入成为必需? 的相关文章

  • 使用 NPM 安装 Bootstrap 4 alpha [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 如何使用 NPM 专门安装 Bootstrap 4 Alpha 使用npm install boots
  • 以 HTML 格式发送电子邮件

    我想发送 HTML 格式的电子邮件 如下图所示 我怎样才能做到这一点 请帮我 提前致谢 String body new String table tr td br header td tr br br Get b Best Score b
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • iframe 主体删除空间

    我的 iframe 风格为style width 100 几乎覆盖了页面宽度 但它在左侧和右侧留下了一个小边距 所以我添加了body margin 0px 删除空间 它有效 但问题是删除边距影响其他事物 例如段落 p inside 有没有办
  • 用 Beautiful Soup 进行抓取:为什么 get_text 方法不返回该元素的文本?

    最近我一直在用 python 开发一个项目 其中涉及抓取一些网站的一些代理 我遇到的问题是 当我尝试抓取某个知名代理站点时 当我要求 Beautiful Soup 查找 IP 在代理表中的位置时 它并没有按照我的预期执行操作 我将尝试查找每
  • 如何使网页中出现的图标闪烁/闪烁

    几天前我开始研究高级java 我知道太晚了 我被困在使图标 出现在任务栏上 闪烁的特定任务上 这种闪烁应该根据特定条件发生 这意味着可以使用以下方法来实现javascript 我已经搜索了一段时间了 但是有没有办法让图标每隔 1 秒左右出现
  • CSS 中的边框图像开头

    MDN 是这样定义的边框图像开始 https developer mozilla org en docs Web CSS border image outset border image outset 属性描述了边框的数量 图像区域超出边框
  • 由于继承抽象类而禁用设计器?

    我有一个项目的解决方案 那个项目中有 40 或 50 种形式 我制作了 4 个基本形式 所有其他形式都可以继承 所有 4 个基本表单都继承 System Windows Forms Form 几乎 90 的形式继承了前 2 个基本形式之一
  • 如何在 vue.js 中创建用于创建和编辑功能的简单模式?

    我正在尝试创建一个模型以便能够编辑现有数据 我该怎么做呢 我正在使用一个
  • 扩展引导程序预输入的宽度以匹配输入字段

    我知道这个问题之前至少被问过三次 但我看到的答案并不是我想要的 我希望增加 twitter bootstrap 通过其 typeahead 功能生成的自动完成字段的宽度 我一直在读到它延伸到覆盖该字段中的所有文本 也就是说 文本越长 自动完
  • 如何使弹出窗口出现在我的鼠标进入悬停目标的位置?

    这是一个示例代码 用于显示我的按钮下方的弹出窗口 fn popover defaults extend fn tooltip defaults placement bottom content 现在我希望弹出窗口出现在光标移动的位置 不仅是
  • 使用画布元素作为文本区域

    我正在寻找有关如何使用类似于文本区域的画布元素的直接描述 我见过这样的项目Ace http ace ajax org 只是想知道如何像文本区域一样写入该区域 只是纯文本 没有什么花哨的 提前致谢 Ace 曾经是 Mozilla Skywri
  • Twitter Bootstrap 轮播在加载时自动播放

    使用twitter bootstrap框架 如何调用轮播来 自动滑动 这意味着当页面加载时 轮播会自动滚动 我尝试过 javascript onLoad click 函数 a 下一个链接的 但这不起作用 你应该这样做Twitter Boot
  • 新BFC“清”浮箱

    如示例所示 应用display inline block 到包含块似乎 清除 了其中的浮动框 wrapper inline block display inline block left column background color te
  • (CSS) 倾斜 img 框架而不扭曲图像

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

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • 背景大小:封面在视网膜显示屏上看起来像素化

    可以看到我正在开发的网站here http ourcityourstory com dev 如果你查看 iPad 3 或 iPhone 4 上的 关于 或 联系 部分 背景看起来全都是疯狂的像素化 我有background size set

随机推荐

  • `geom_line()` 连接映射到不同组的点

    我想group我的数据基于两个变量的相互作用 但仅将美学映射到其中一个变量 另一个变量代表重复 理论上 它们应该彼此相等 我可以找到不优雅的方法来做到这一点 但似乎应该有更优雅的方法来做到这一点 例如 Data frame with two
  • 如何使用 url_for() 将路径和查询数据传递到使用 FastAPI 和 Jinja2 的路由?

    我想从 Jinja2 模板中调用 FastAPI 路由 并传递两者path and query该路由的数据 参数 我在 Jinja2 模板中尝试过如下所示 url for function1 uustr data uustr interva
  • 从 R 中的 Sys.Date() 获取当前时间(包括秒)

    我确信这是非常基本的 但我无法从系统日期中提取各种时间 简而言之 我不确定为什么我无法使用 M 或 S 准确提取当前的分钟和秒数 有什么想法吗 我的机器上当前时间为中午 12 38 gt format Sys Date c 1 12 16
  • “冲突可序列化”和“冲突等效”有什么区别?

    在数据库理论中 冲突可序列化 和 冲突等效 有什么区别 我的教科书有一个关于可序列化冲突的部分 但掩盖了冲突等价性 这些可能都是我熟悉的概念 但我不熟悉术语 所以我正在寻找解释 DBMS 中的冲突可以定义为两个或多个不同的事务访问同一变量
  • 将带有变量的循环转换为 BigQuery SQL

    我有数千个脚本 其中包括循环数据集并使用变量进行累积 例如 assuming that ids is populated from some BQ table ids 1 2 3 4 5 var1 v1 initialize variabl
  • 如何使用 RealmSwift 存储字典?

    考虑以下模型 class Person Object dynamic var name let hobbies Dictionary
  • 清漆配置文件在哪里?

    我刚刚安装了清漆并准备好提供网页服务 问题是我们达到了打开文件限制 我们已经设定了ulimit给清漆用户 我们想要找到一个可以写入此配置的文件 Maximum number of open files NFILES 131072 Locke
  • ios7 UITableViewCell SelectionStyle 不会变回蓝色

    Xcode 5 0 iOS 7 并更新现有应用程序 UITableView所选行现在是灰色的 而不是蓝色的 据我所知 他们更改了默认值selectionStyle至灰色 但 蓝色 仍然是 IB 的一个选项UITableViewCellSel
  • 在内核模块中执行shell命令

    是否可以在内核模块中执行shell命令 我知道我们可以在用户空间 C 代码中使用system子程序 我正在调试一个存在内存泄漏问题的内核模块 在无限循环中执行 insmod 和 rmmod module ko 后 8G RAM 的系统在几分
  • boost Deadline_timer 最小示例:我应该替换“睡眠”吗?

    我有一个线程 我需要每 10 毫秒执行一些操作 所以我有非常简单的代码 如下所示 while work do something Sleep 10000 boost sleep can be also used 我听说Sleep一般不推荐
  • 避免在react + typescript中使用通用函数类型

    我正在寻找一条规则来阻止使用 函数 作为类型 myMethod Function 我没有找到任何东西 所以我愿意接受建议 您可以使用 typescript eslint ban types rule 规则链接 https github co
  • Caffeine Expiry 中如何设置多个过期标准?

    我正在使用 Caffeine v2 8 5 我想创建一个具有可变到期时间的缓存 基于 值的创建 更新以及 该值的最后一次访问 读取 无论先发生什么都应该触发该条目的删除 缓存将成为三层值解析的一部分 The key is present i
  • Emmeans 连续自变量

    我想解释一下Type f with Type space实验的内容和速率Exhaustion product和定量变量Age 这是我的数据 res structure list Type space structure c 2L 2L 2L
  • Julia 中 @with_kw 和 Base.@kwdef 之间的区别?

    受到这个问题评论的启发 with kw 在 Julia 中做什么 https stackoverflow com questions 69586136 what does with kw do in julia 有什么区别 with kw
  • JQuery DatePicker 和 beforeShowDay

    我拼命尝试使用此功能在我的日期选择器中仅启用特定日期 但是beforeShowDay函数永远不会被触发 即使这不起作用 document ready function initialisation des composants initCo
  • 这个小波变换实现正确吗?

    我正在寻找 FFT 的替代方案来用 python 创建频谱分析仪 我听说小波变换比短时 FFT 更快并且提供更好的时间精度 我查阅了这篇维基百科文章 其中介绍了 Java 中的 Haar 小波变换实现 https en wikipedia
  • 像插入一样更新

    是否可以执行update like insert UPDATE table SET value N N N N Y Y Y N N WHERE my id 1 The problem is that the number of values
  • iOS - 使用隐藏字幕的 AVPlayer

    我正在 iOS 上使用 AVPlayer 来使用 closeCaptionDisplayEnabled 属性 显示电影上的字幕或副标题 hls 或 mp4 但标题不显示任何内容 我不知道为什么 您有什么解决方案可以在电影 hls mp4 上
  • 我的傅立叶逆变换中的尖峰

    我正在尝试在 MATLAB 中比较两个数据集 为此 我需要通过傅里叶变换数据来过滤数据集 对其进行过滤 然后对其进行逆傅里叶变换 然而 当我对数据进行逆傅里叶变换时 我在红色数据集的两端都出现了一个尖峰 图片显示了第一个尖峰 它在开始时应该
  • 如何使无线电输入成为必需?

    我在表单中提供了无线电输入 供用户选择性别 如何使性别成为必需的输入 用户必须选择女性或男性 否则他们会按照通常的方式得到提示required 我尝试添加required如下所示 但它不起作用 用户可以继续而不选择女性或男性 div cla