当前位置：文江博客话题详情

html5：复选框/单选中名为 required 的属性的意义

发布于 2024-10-15 23:06:43 字数 328 浏览 3 评论 0原文

在提交表单时，您如何根据需要标记复选框/单选按钮？

灵感来源：Pekka 的回答问题

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只有影子陪我不离不弃 2024-10-22 23:06:43

必需的复选框并不罕见。实际上，每个注册表单都使用某种形式的“我已阅读并接受用户协议”复选框。

如果您有 Opera，请尝试下面的代码。除非选中该复选框，否则该表单不会提交。

<!doctype html>
<html>

<head>
  <title>html5</title>
</head>

<body>
  <h1>html5 test</h1>
  <form action="/">
    <input type="checkbox" required="required" id="cb" name="cb">
    <label for="cb">required checkbox</label>
    <input type="submit">
  </form>
</body>

</html>

Required checkboxes are not unusual. Practically every registration form uses some form of the "I have read and accept the User Agreement" checkbox.

If you have Opera handy try out the code below. The form won't submit unless the checkbox is checked.

<!doctype html>
<html>

<head>
  <title>html5</title>
</head>

<body>
  <h1>html5 test</h1>
  <form action="/">
    <input type="checkbox" required="required" id="cb" name="cb">
    <label for="cb">required checkbox</label>
    <input type="submit">
  </form>
</body>

</html>

回复收藏 0 原文

油饼 2024-10-22 23:06:43

对于复选框，最好的方法可能是预先选择它并将其设置为禁用。只是在开玩笑。

要确保已选择一组中的一个单选按钮，请从默认选择开始或使用 JavaScript 进行验证。没有 HTML 方式可以做到这一点，因为每个可能的选择都是有效的。

在 html5 中有一个 required 属性对于复选框。

它们有些奇怪，所以让我引用一些内容来解释它们是如何工作的。

对于复选框，仅当选中该表单中具有该名称的一个或多个复选框时，才应满足必需的属性。

对于单选按钮，仅当恰好选中该单选组中的单选按钮之一时才应满足所需属性。

当然，您始终必须验证服务器端，因为客户端始终可以向您发送他想要的任何内容。只需使用这些方法即可获得更好的用户体验。

回复收藏 0 原文

淡淡の花香 2024-10-22 23:06:43

我今天在 XP SP2 上的 Firefox 17.0.1 上测试了单选按钮的 required 属性。

它似乎符合单选按钮/组必需属性的规范。当 Firefox 提示“请选择这些选项之一”时。对于下面的两个代码片段：

您可以为每个单选按钮

<input type="radio" name="gender" value="male" required="required" />
<input type="radio" name="gender" value="female" required="required" />

或任何一个单选元素

<input type="radio" name="color" value="blue" />
<input type="radio" name="color" value="red" required="required" />
<input type="radio" name="color" value="green" />

设置 required 属性，欢迎任何评论和更新。

I tested required attribute for Radio Buttons today on Firefox 17.0.1 on XP SP2.

It seems to comply with the specification of required attribute for radio buttons/groups. As Firefox prompts "Please select one of these options." for both of the code snippets below:

Either you set required attribute for each of the radio buttons

<input type="radio" name="gender" value="male" required="required" />
<input type="radio" name="gender" value="female" required="required" />

Or Any One of the Radio elements

<input type="radio" name="color" value="blue" />
<input type="radio" name="color" value="red" required="required" />
<input type="radio" name="color" value="green" />

Any comments and updates are welcome.

回复收藏 0 原文

恬淡成诗 2024-10-22 23:06:43

我刚刚在 Firefox 4 中的单选按钮上尝试过。将 required 添加到一个单选输入，然后在选择一个之前提交，会触发“请选择这些选项之一”的工具提示。

例如，这有效：

<input type="radio" name="gender" value="m" required />
<input type="radio" name="gender" value="f" />

I just tried it on a radio button in Firefox 4. Adding required to one radio input, then submitting before selecting one, triggers a "Please select one of these options" tooltip.

E.g. this works:

<input type="radio" name="gender" value="m" required />
<input type="radio" name="gender" value="f" />

回复收藏 0 原文

~没有更多了~

关于作者

稚然

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

html5：复选框/单选中名为 required 的属性的意义

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

html5：复选框/单选中名为 required 的属性的意义

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。