I have used radio button for gender as follow:-
<td><input type="radio" name="gender" value="male" checked required="required"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other</td>
but this "required" validation is not working how to put validation on it without using JavaScript.
Required is a HTML5 attribute for input control validation, you can add the required attribute at end of tag and if you want Gender radio button checked by default, you can add checked.
This would checked the radio button default when page loads,
<input type="radio" name="gender" value="male" checked required/> Male
This will work, so we no need to go for JS validation.
You can set default value to radio button like this :
<input type="radio" name="gender" value="male" checked="checked" />
then you have not need to validation...
The required attribute is an HTML5 attribute and if you're using an older browser it may not support it.
http://www.w3schools.com/html/html_form_attributes.asp
Also, you simply put "required", not "required="required"", just like with "checked"
Please see this reference and try it yourself
http://www.chennaisunday.com/jsradio.html
Related
If i'm using radio buttons in HTML and would like a default option to show as selected, I've used the 'checked' attribute to achieves this. How do I make it so when I check on another option on the radio buttons this default option is removed. In the code below, when you check another option, the original option remains and you can't uncheck anything?
In the option below the fish option is the one with the 'checked' attribute added.
https://codepen.io/pen/?editors=1010
HTML
<input type="radio" id="dog"name="dog"value="dog"><label for="dog">Dog</label>
<input type="radio" id="cat" name="cat" value="cat"><label for="cat">Cat</label>
<input type="radio" id="fish" name="fish" value="fish" checked><label for="fish">Fish</label>
<input type="submit">
Your form radio elements need to have a shared name attribute as they
are the options for one choice. change name to "foo" or "animal" and
it will work.
<div style="margin-bottom:15px;">All radio inputs require a shared name attribute, I declared it "choice"</div>
<form style="text-align:center">
<input type="radio" id="dog"name="choice"value="dog"><label for="dog">Dog</label>
<input type="radio" id="cat" name="choice" value="cat" ><label for="cat" >Cat</label>
<input type="radio" id="fish" name="choice" value="fish" checked="checked" ><label for="fish" >Fish</label>
<input type="submit">
</form>
which one is more appropriate?
First one:
<div>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
</div>
Second one:
<label for="male">Male
<input type="radio" name="gender" id="male" value="male">
</label>
They're working as well, but i'm not sure if the second option is good with all html structures.
I would put input inside label like this and wouldn't use outside div wrapper:
<label for="male">Male
<input type="radio" name="gender" id="male" value="male">
</label>
In this way input gets focus when clicked on the label text Male.
Both options are valid HTML per the w3 spec and the for isn't mandatory in the second form.
Use whichever you prefer.
I have an html form with:
<input name="gender" dojoType="dijit.form.RadioButton" id="male" checked="checked">male
<input name="gender" dojoType="dijit.form.RadioButton" id="female">female
My problem is that when I post this form, there is always gender=on in post url, regardless of whether male or female is selected.
What can I do to get checked information?
And what's the difference between "selected" and "checked" with dijit.form.RadioButton?
You can try
<input name="gender" dojoType="dijit.form.RadioButton" value="0" id="male"
checked="checked">
It may affect post information.
Hopefully , it helps you.
On form submission, how could you possibly mark a checkbox/radiobutton as required?
Source of inspiration: Pekka's answer to a question
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>
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.
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.
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" />
If I want to have a question with a "Yes/No" radio button. How do I need to mark up the code so that a screen reader reads the question associated with the "yes/no" selection instead of just reading the "Yes" and "No" labels when the radio buttons are selected?
<span>Did you understand this? (choose one) </span>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>
Thanks
For form elements of this nature I use:
<fieldset>
<legend>Did you understand the question?</legend>
<input type="radio" name="yes_no" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="yes_no" id="no">
<label for="no">No</label>
</fieldset>
Also please take note that all ID values on a page should be unique. If you have an element that needs to share a descriptor then add it as a class.
I also use Fieldsets to add a distinct boundary to the radio selection.
And be sure to specify the for="id_value" attribute of the label. This will associate the label with the desired radio button.
<fieldset>
<legend><span>Did you understand this? (choose one) </span></legend>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>
</fieldset>
use the content attribute (if it is available).