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

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(使用前将#替换为@)

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

  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n
  • 矢量之间的碰撞检查 - 移动矢量 - HTML、JS、P5

    我为我的玩家创建了碰撞检查功能 每次当对象 在本例中为矢量 圆 接触玩家 也是矢量 圆 时 游戏就会结束 我已经成功创建了一个逻辑 并且有一个碰撞检查正在工作 但是它并没有计算元素之间的实际距离 而不是当它们彼此相距一定距离时实际触及其结局
  • Raphaël.js 中的剪辑路径

    我怎样才能像这样将 Clip path 与 Rapha l js 一起使用example http www simplesystems org RMagick doc ex clip path gif 看来 Raphael js 中只有 C
  • 挂钩 jQuery 验证消息更改

    我想在工具提示中显示 jQuery 验证消息 为了实现这一目标 我首先将以下 CSS 规则添加到我的样式表中 fieldset field validation error display none fieldset field valid
  • 为什么 HTML5 DOCTYPE 会扰乱我的填充?

    我有一个带有导航栏的 html5 页面 完全从头开始编码 我最近刚刚向该项目添加了一个文档类型 现在我在导航栏下获得了额外的空间 如果我删除文档类型声明 它就会恢复正常 我已经完全重置了所有内容的填充 边距等 并将其缩减为说明问题的少量代码
  • 一行总结详细信息? [复制]

    这个问题在这里已经有答案了 我希望页脚内的详细信息成行显示 现在每个详细信息都显示在新行上 我怎样才能让它与 CSS 一起工作
  • HTML/CSS - 打印样式、背景颜色和图像不会在 IE 和 Firefox 中显示?

    我如何在打印时显示背景颜色和图像 我知道这是浏览器属性 但我想从 CSS 完成它 例如我用于 webkit 的 CSS webkit print color adjust exact 那么我怎样才能实现它呢 不 这是不可能的 请参阅 web
  • rvest如何通过id选择特定的css节点

    我正在尝试使用 rvest 包从网页中抓取数据 简单来说 html 代码如下所示 div class style div
  • Anchor Cycler / 下拉菜单定期导入学校班级数据

    SO 我最近一直在研究一些 html javascript css 为我的学生创建一个在线表格来查看详细信息 分数和各种信息 但我遇到了困难 不确定如何做我正在尝试的事情去做 我将所有这些内容发布在一个线程中的原因是因为我认为其中几个可能会
  • 将按钮固定到容器的底角

    我正在使用 Flexbox 使表单垂直和水平居中 在此表单中 我想将一个按钮固定到 Flexbox 容器的右下角 我不知道如何将按钮固定在右下角 html body height 100 container height 100 displ
  • 如何使用 ng-repeat 更改 AngularJS 中特定 的背景颜色

    如何为每一行设置不同的背景颜色 举个例子 第 1 行 蓝色 第2行 红色 第三行 绿色 main js scope names fName John lName David fName Richard lName Daniel fName
  • 为什么 inline-block 会根据子元素的宽度自动调整宽度?

    如果这个问题已经在 stackoverflow 上提出过 请纠正我 如果确实如此 我深表歉意 但我已经寻找了一段时间并且只找到了hows not whys 我的问题是 父 div 似乎会自动占据页面的整个宽度 除非 display inli
  • 在 HTML5 中堆叠多个画布

    我试图使用相互堆叠的四块画布 但除了顶部画布的内容外 它们的内容不会显示 我按照我希望它们显示的顺序将 z index 值放入其中 但只有最上面的一个显示内容 它们的位置是绝对的 z 索引是 1 2 3 和 4 是否还有其他原因导致它们不显
  • PHP/HTML - 如何在表单输入名称中保留空格?

    我有一个带有输入的表单type text和name属性中有空格 当表单提交时 它使用post 空格怎么保留 目前是用下划线替换空格 在输入名称中使用数组
  • 无法获取子 DOM 元素

    注 由于问题有点复杂 为了可读性对代码进行了抽象 We ve a
  • Bootstrap 的跨浏览器数字微调器/步进器 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个与 Twitter Bootstrap 2 3 集成的数字微调器 使用 HTML5input type number
  • 如何使用 HTML5 在画布上绘制心电图监视器?

    我尝试使用canvas html5绘制心电图系统 几乎我即将完成我的波浪正在移动 但不是连续地重复 但我想绘制波浪是从左到右连续移动的 下面的链接是示例 Ex https www youtube com watch v wuwBfSpVEg
  • 为什么 JDOM 的 getChild() 方法返回 null?

    我正在做一个关于 html 文档操作的项目 我想要现有 html 文档中的正文内容将其修改为新的 html 现在我正在使用 JDOM 我想在我的编码中使用 body 元素 为此 我在编码中使用了 getChild body 但它向我的程序返

随机推荐

  • `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