Best IT Recipes

Html5: Value of attribute specified in checkbox / radio

When submitting a form, how would you mark a checkbox / radio object as needed?

Source of inspiration: Pekka answer the question

+17
html5 attributes specifications
Feb 04 '11 at 18:28
source share
4 answers

Required flags are not unusual. Almost every registration form uses a certain form of the flag "I have read and agree to the User Agreement".

If you have Opera, try the code below. The form will not be submitted if the check box is not selected.

<!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>
+23
Feb 05 '11 at 13:32
source share
— -

For checkboxes, the best way is probably to pre-select it and disable it. I'm just joking.

To select one switch in a group, either start with the default selection, or do a test using javascript. There are no HTML methods for this, because all possible options are valid.

In html5 there is a required flag for flags.

They are somehow strange, so let me give you something to explain how they work.

For flags, the required attribute should only be executed when one or more flags with this name are checked in this form.

For a radio button, the required attribute should be executed only when one of the switches in this radio group is set.

Of course, you should always check the server side, because the client can always send you everything he wants. Just use these methods for the best user experience.

+7
Feb 04 '11 at 18:56
source share

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

It seems to match the specification of the required attribute for the switches / groups. When Firefox prompts, "Please choose one of these options." for both code snippets below:

Or you set the 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 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 appreciated.

+7
Dec 07 '12 at 15:52
source share

I just tried this on the radio button in Firefox 4. Adding the required to one radio input, then sending it before selecting it, launches the prompt "Please select one of these options."

eg. it works:

 <input type="radio" name="gender" value="m" required /> <input type="radio" name="gender" value="f" />
0
May 18 '11 at 2:34 a.m.
source share


More articles:


All Articles