文档章节

如何在“无线电”输入字段中使用“必需”属性

 技术盛宴
发布于 02/19 21:06
字数 937
阅读 75
收藏 0

我只是想知道如何在单选按钮上正确使用新的HTML5输入属性。 是否每个单选按钮字段都需要以下属性? 还是只有一个领域就足够了?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

#1楼

如果您已自定义单选按钮,例如,单选按钮的原始图标已通过css display:none隐藏,那么您可以创建自己的单选按钮,则可能会收到错误消息。

解决此问题的方法是将display:none替换为opacity:0


#2楼

这是必需的单选按钮的非常基本但现代的实现,带有本地HTML5验证:

body {font-size: 15px; font-family: serif;} input { background: transparent; border-radius: 0px; border: 1px solid black; padding: 5px; box-shadow: none!important; font-size: 15px; font-family: serif; } input[type="submit"] {padding: 5px 10px; margin-top: 5px;} label {display: block; padding: 0 0 5px 0;} form > div {margin-bottom: 1em; overflow: auto;} .hidden { opacity: 0; position: absolute; pointer-events: none; } .checkboxes label {display: block; float: left;} input[type="radio"] + span { display: block; border: 1px solid black; border-left: 0; padding: 5px 10px; } label:first-child input[type="radio"] + span {border-left: 1px solid black;} input[type="radio"]:checked + span {background: silver;}
<form> <div> <label for="name">Name (optional)</label> <input id="name" type="text" name="name"> </div> <label>Gender</label> <div class="checkboxes"> <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label> <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label> <label><input id="other" type="radio" name="gender" value="other" class="hidden" required><span>Other</span></label> </div> <input type="submit" value="Send" /> </form>

尽管我非常支持使用本机HTML5验证的简约方法,但从长远来看,您可能希望将其替换为Javascript验证。 Javascript验证使您可以更好地控制验证过程,并允许您设置真实的类(而不是伪类)来改善(有效)字段的样式。 如果Javascript损坏(或缺少),则可以使用本机HTML5验证。 您可以在这里找到一个示例,以及受安德鲁·科尔Andrew Cole)启发的有关如何制作更好形式的其他建议。


#3楼

您可以使用此代码段...

<html>
  <body>
     <form>
          <input type="radio" name="color" value="black" required />
          <input type="radio" name="color" value="white" />
          <input type="submit" value="Submit" />
    </form>
  </body>
</html>

在选择语句之一中指定“ required ”关键字。 如果要更改其外观的默认方式。 您可以按照以下步骤。 如果您打算修改默认行为,这只是为了提供更多信息。

将以下内容添加到您的.css文件中。

/* style all elements with a required attribute */
:required {
  background: red;
}

有关更多信息,您可以参考以下URL。

https://css-tricks.com/almanac/selectors/r/required/


#4楼

为无线电组的至少一个输入设置required属性。


所有输入required的设置更加清晰,但不是必需的(除非动态生成单选按钮)。

要对单选按钮进行分组,它们必须全部具有相同的name值。 这允许只有一个在同一时刻被选择并应用required对整个组。

<form> Select Gender: <label><input type="radio" name="gender" value="male" required>Male</label> <label><input type="radio" name="gender" value="female">Female</label> <label><input type="radio" name="gender" value="other">Other</label> <input type="submit"> </form>

另请注意:

为了避免对是否需要单选按钮组感到困惑,建议作者在组中的所有单选按钮上指定属性。 实际上,总的来说,鼓励作者避免一开始就没有任何最初检查的控件的单选按钮组,因为这是用户无法返回的状态,因此通常被认为是较差的用户界面。

资源

本文转载自:https://stackoom.com/question/Ym1r/如何在-无线电-输入字段中使用-必需-属性

粉丝 0
博文 1557
码字总数 0
作品 0
深圳
高级程序员
私信 提问
加载中

评论(0)

安卓应用安全指南 4.4.2 创建/使用服务 规则书

安卓应用安全指南 4.4.2 创建/使用服务 规则书 原书:Android Application Secure Design/Secure Coding Guidebook 译者:飞龙 协议:CC BY-NC-SA 4.0 实现或使用服务时,遵循下列规则。 4....

apachecn_飞龙
2018/03/22
0
0
struts-config.xml配置

1、<struts-config> 元素 <struts-cofnig> 元素是 Struts 配置文件的根元素。<struts-config> 元素有 8 个子元素。在 Struts 配置文件中,必须按照它的 DTD 指定的先后顺序来配置 <struts-co......

wangxiaoyi
2012/08/28
2.3K
1
搜索引擎(Solr-模式详解)

Schema介绍 Schema 是什么? 问题1:在lucene中我们要对文档字段进行索引存储,需要如何做? 问题2:现在我们使用Solr搜索服务平台了,不需要编码了,还需要定义如何索引存储字段吗? 需要一...

这很耳东先生
2019/02/15
31
0
新建Salesforce的自定义对象和自定义字段

对象 Salesforce默认提供了很多功能,可以用于销售、市场开发、客服等。为了实现这些功能,Salesforce提供了一系列的标准对象,比如“客户”(Account)、“个案”(Case)、“解决方案”(S...

故久呵呵
2019/04/12
38
0
安卓应用安全指南 4.1.2 创建/使用活动 规则书

4.1.2 创建/使用活动 规则书 原书:Android Application Secure Design/Secure Coding Guidebook 译者:飞龙 协议:CC BY-NC-SA 4.0 创建或向活动发送意图时,请务必遵循以下规则。 4.1.2.1 ...

apachecn_飞龙
2018/03/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为容器设置启动时要执行的命令及其入参

本页将展示如何为 Pod 中的容器设置启动时要执行的命令及其入参。 准备开始 创建 Pod 时设置命令及入参 使用环境变量来设置入参 通过 shell 来执行命令 注意 接下来 准备开始 你必须拥有一个...

xiaomin0322
10分钟前
16
0
自动化部署工具syncd

一.部署安装 (一)常用安装方式 1. curl https://syncd.cc/install.sh | bash 2. dockerfile安装方式正在测试中 (二)安装参考文档 1.https://syncd.cc/docs/#/install 2.https://github....

浮世清欢-千帆
16分钟前
21
0
如何学习嵌入式?(网上汇总)

如何学习嵌入式?汇总了网上的一些帖子,最后部分给出了一些资源的下载链接 嵌入式菜鸟学习路线,2019, https://zhuanlan.zhihu.com/p/68227075 嵌入式小白到大神学习全攻略(学习路线+课程...

sentuate
16分钟前
14
0
工欲善其事,必先利其器——DevOps中如何管理工具包

一、背景 作为DevOps交付流水线的开发者,为支持CI/CD中各项任务的自动化,都需要依赖多种包管理工具来下载各种相关的工具,比如针对产生最终交付件的构建过程,就需要在构建流程的第一步,自...

JFrog杰蛙
17分钟前
16
0
深度探索JFR - JFR详细介绍与生产问题定位落地 - 2. 通过一个线上调优例子了解JMC 与 Event 结构与详细配置

查看 JFR 事件的工具 - JMC (Java Mission Control) 官网地址:https://adoptopenjdk.net/jmc.html 国内下载起来比较慢,建议在aws上面建一个欧洲法兰克福的实例,在这个实例上先下载好,然...

zhxhash
18分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部