我只是想知道如何在单选按钮上以正确的方式使用新的HTML5输入属性“required”。是否每个单选按钮字段都需要下面这样的属性，或者如果只有一个字段得到它就足够了?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
当前回答
TL;DR:至少为无线电组的一个输入设置所需的属性。
所有输入所需的设置更清楚，但不是必需的(除非动态生成单选按钮)。
要对单选按钮进行分组，它们必须具有相同的name值。这一次只允许选择一个，并适用于整个组。
< >形式 选择性别:< br > <标识> <input type="radio" name="gender" value="male" required> 男性 < / >标签< br > <标识> <input type="radio" name="gender" value="female"> 女 < / >标签< br > <标识> <input type="radio" name="gender" value="other"> 其他 < / >标签< br > < input type = " submit " > > < /形式
还要注意:
为了避免在是否需要单选按钮组方面产生混淆，建议作者在组中的所有单选按钮上指定属性。实际上，通常鼓励作者避免使用没有任何初始选中控件的单选按钮组，因为这是一种用户无法返回的状态，因此通常被认为是一个糟糕的用户界面。
源
其他回答
我必须使用required="required"以及相同的名称和类型，然后验证工作正常。
<input type="radio" name="user-radio" id="" value="User" required="required" />
<input type="radio" name="user-radio" id="" value="Admin" />
<input type="radio" name="user-radio" id="" value="Guest" />
您可以使用此代码片段…
<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/
这里是一个非常基本但现代的实现所需的单选按钮与原生HTML5验证:
fieldset { display: block; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; border: none; } 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> <fieldset> <legend>Gender</legend> <div class="checkboxes"> <label for="male"><input id="male" type="radio" name="gender" value="male" class="hidden" required="required"><span>Male</span></label> <label for="female"><input id="female" type="radio" name="gender" value="female" class="hidden" required="required"><span>Female </span></label> <label for="other"><input id="other" type="radio" name="gender" value="other" class="hidden" required="required"><span>Other</span></label> </div> </fieldset> <input type="submit" value="Send" /> </form>
Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.
TL;DR:至少为无线电组的一个输入设置所需的属性。
所有输入所需的设置更清楚，但不是必需的(除非动态生成单选按钮)。
要对单选按钮进行分组，它们必须具有相同的name值。这一次只允许选择一个，并适用于整个组。
< >形式 选择性别:< br > <标识> <input type="radio" name="gender" value="male" required> 男性 < / >标签< br > <标识> <input type="radio" name="gender" value="female"> 女 < / >标签< br > <标识> <input type="radio" name="gender" value="other"> 其他 < / >标签< br > < input type = " submit " > > < /形式
还要注意:
为了避免在是否需要单选按钮组方面产生混淆，建议作者在组中的所有单选按钮上指定属性。实际上，通常鼓励作者避免使用没有任何初始选中控件的单选按钮组，因为这是一种用户无法返回的状态，因此通常被认为是一个糟糕的用户界面。
源
< >形式 选择性别:< br > <标识> <input type="radio" name="gender" value="male" required> 男性 < / >标签< br > <标识> <input type="radio" name="gender" value="female"> 女 < / >标签< br > <标识> <input type="radio" name="gender" value="other"> 其他 < / >标签< br > < input type = " submit " > > < /形式
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素，从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 把<script>标签放在</body>标签之后是错误的吗?
- 谷歌Chrome表单自动填充和它的黄色背景
