html5: Significance of attribute named required in

On form submission, how could you possibly mark a checkbox/radiobutton as required?

Source of inspiration: Pekka's answer to a question

标签： html5 attributes specifications

4条回答

2楼-- · 2019-02-11 18:03

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人赞添加讨论(0) 举报

闹够了就滚

3楼-- · 2019-02-11 18:03

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) 举报

▲ chillily

4楼-- · 2019-02-11 18:06

For checkboxes, the best way is probably to pre-select it and set it to disabled. Just kidding.

To ensure one radio button in a group has been selected, either start with a default choice or validate using javascript. There are no HTML-ways to do that because every possible selection is valid.

In html5 there is a required attribute for checkboxes.

They are somehow weird, so let me quote something to explain how they work.

For checkboxes, the required attribute shall only be satisfied when one or more of the checkboxes with that name in that form are checked.

For radio buttons, the required attribute shall only be satisfied when exactly one of the radio buttons in that radio group is checked.

Of course you always have to validate server side because the client can always send you whatever he desires. Just use these methods for better user experience.

0人赞添加讨论(0) 举报

啃猪蹄的小仙女

5楼-- · 2019-02-11 18:13

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人赞添加讨论(0) 举报

html5: Significance of attribute named required in

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间