17

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

Source of inspiration: Pekka's answer to a question

Community
  • 1
  • 1
naveen
  • 53,448
  • 46
  • 161
  • 251

4 Answers4

23

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>
GKFX
  • 1,386
  • 1
  • 11
  • 30
Emily
  • 9,926
  • 4
  • 31
  • 39
  • 17
    You don't need `required="required"`, just adding `required` is enough. – Ben May 18 '11 at 02:35
  • 14
    `required="required"` is valid XHTML though. An attribute must have a value. – leggetter Aug 20 '11 at 13:33
  • 30
    XHTML is not a requirement of HTML5 – Neil Apr 03 '12 at 10:12
  • naveen, bro you missed this because even experienced programmers tend to forget or overlook some common things while working and having bigger issues like application flows and the like. :) Every programmer faces logical mistakes. naveen, i thank you, your question helped myself. i was working on a project. did R & D found about required attribute and now i remember it. well everyone including the comments from Emily, Ben, @leggetter and Neil shared helpful information. thanks all. – Ronnie Depp Jul 19 '13 at 07:18
  • 1
    But you do have to close your `
    ` :)
     – drew Mar 27 '14 at 18:22
7

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.

Ronnie Depp
  • 159
  • 3
  • 12
  • 2
    Link to specification: http://www.w3.org/TR/html-markup/input.radio.html#input.radio.attrs.required Can anyone find a reference indicating which of these two styles is preferred for marking a radio button group as required? I can't find that anywhere. – Grilse Dec 11 '12 at 14:35
7

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.

DarkAjax
  • 15,955
  • 11
  • 53
  • 65
The Surrican
  • 29,118
  • 24
  • 122
  • 168
  • +1 for guesses. highly unlikely unless you present a stronger argument :) – naveen Feb 04 '11 at 19:02
  • what guesses? just updated the answer according to html5 sepcs – The Surrican Feb 04 '11 at 19:03
  • 1
    +1 the specs are clear, but this is still *weird*. Doesn't make any sense from a UI point of view. – Pekka Feb 04 '11 at 19:12
  • The problem with @Joe Hopfgartner's quote is that it comes from a currently unauthoritative source: whatwg.org/specs/web-forms/current-work That's the old Web Forms 2 work; the top of the doc admits that it's been superseded by HTML5. Don't base your expectations on that document! – james.garriss Oct 14 '11 at 12:33
  • Although what you say about radio buttons is right (`required` on any one of the radio buttons means that exactly one of all the radio buttons with the same name must be checked), it looks like only the checkboxes with the `required` attribute have to be checked, not all the checkboxes with the same name. As you can see in [this fiddle](http://jsfiddle.net/yXBHU/1/), only the first 2 checkboxes have to be checked, not the third one. At least in Chrome! – BenMorel Dec 06 '12 at 19:29
0

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" />
Ben
  • 669
  • 1
  • 9
  • 20