I am trying to design a web form where I run into a strange issue.
I set 3 radio buttons, but I can select only the first one no matter what radio button I click. I tried to open the HTML page on different browsers other than Firefox and it was okay. I also tried another web form that has a radio buttons with Firefox and it was okay. I could not figure out what why Firefox cant select the other radio buttons in from my form HTML page.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>m</title></head><body>
<from method="post" action="self">
<label> <span>Gender :</span>
<br>
<input name="gender" value="1" type="radio">Male
<br>
<input name="gender" value="2" type="radio">Female
<br>
<input name="gender" value="3" type="radio">N/A
<br>
</label>
</from>
</body></html>
Don't use multiple inputs inside label. I think in this case it will select only the first input on matter where you click on label.
<form method="post" action="self"> <span>Gender :</span>
<br>
<input name="gender" value="1" type="radio"/>Male
<br>
<input name="gender" value="2" type="radio"/>Female
<br>
<input name="gender" value="3" type="radio"/>N/A
<br>
</form>
As #K K said, it's caused by multiple inputs inside a label tag.
We had a similar issue. I think what happens here is the event triggers at one of the <input>s, and then bubbles up to the parent <label>. Labels are bound to an input inside them, and I guess multiple inputs cause it to default to the first one. So it triggers an event on whatever one you click, then bubbles to the parent <label> and triggers again there, which is bound to the first input. Our case was with checkbox inputs, and it would set both boxes when the second one was checked. In Firefox. Not sure why Chrome behaves differently.
Example with checkboxes:
http://codepen.io/anon/pen/IjboB
Related
Okay so I'm working on a project for my computer class and we're using radio buttons within a form. Part of the requirements are to ensure that when the submit button is clicked it is not left blank and that only one radio button is clicked.
Whenever I have worked with radio buttons it only allows you to click one, so I was confused by the requirement. I even went to W3 Schools HTML Forms Input Types and confirmed that only one radio box can be selected at a time.
After contacting my TA though he sent me the following code which allows multiple radio buttons to be selected. Any clarification about why the following code allows multiple radio buttons to be selected and if my knowledge on radio buttons is correct would be wonderful. Thanks in advance.
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div>
<form target="_blank" onsubmit="try {return window.confirm("You are submitting information to an external page.\nAre you sure?");} catch (e) {return false;}">
<input type="radio"> one<br>
<input type="radio"> two<br>
<input type="radio"> three<br>
</form>
</div>
</body>
</html>
JSFiddle
you have to put them in a group.You can do it like this
<form action="">
<input type="radio" name="gender" checked> Male<br>
<input type="radio" name="gender" > Female<br>
<input type="radio" name="gender" > Other
</form>
if you use the same name it's consider as a group. name="gender" like this.
The inputs do not have the name attribute set, therefore they are not grouped
As you can see here, the radio buttons only allow one selection when named:
<div>
<form target="_blank" onsubmit="try {return window.confirm("You are submitting information to an external page.\nAre you sure?");} catch (e) {return false;}">
<input name="group_name" type="radio"> one<br>
<input name="group_name" type="radio"> two<br>
<input name="group_name" type="radio"> three<br>
</form>
</div>
jsfiddle
That being said, I don't know why you are being told to use radio buttons for multiple selections. They are most definitely not intended for that
This happens because you need to provide same name attribute when input type is radio:
<form method="post" action="">
<input type="radio" name="radio">one
<br>
<input type="radio" name="radio">Two
<br>
<input type="radio" name="radio">Three
<br>
</form>
Radio buttons need to be part of a group for a maximum of one to be selected. The group is denoted with the name attribute. All radio buttons in a group should have the same name.
Here's your updated fiddle: https://jsfiddle.net/8fn0hfoh/1/
Radio buttons needs to share the same name attribute to behave like that.
To put in other words only one radio button with the same name could be checked at once.
As said by MDN
radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group"; only one radio button in a group can be selected at a time.
Here is your code adjusted to behave like that.
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div>
<form target="_blank" onsubmit="try {return window.confirm("You are submitting information to an external page.\nAre you sure?");} catch (e) {return false;}">
<input type="radio" name="field"> one<br>
<input type="radio" name="field"> two<br>
<input type="radio" name="field"> three<br>
</form>
</div>
</body>
</html>
So its up to you what approach do you wanna use.
I have the following form, where users can choose to enter either the ID or the name:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName"></label>
When I click on "Member ID or Last Name, this switches the radio buttons. However when I click on the text inputs, this has no effect on the radio buttons.
Is this the expected behavior? If so, is there any way to tweak the html to make it work?
Note: this is not a JavaScript question.
Fiddle: https://jsfiddle.net/3by5wqzw/
Yes, this seems to be the expected behaviour on chrome, microsoft edge and firefox on windows 10 and on chrome for android lollipop.
You can use a bit of javascript to solve the problem:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="document.getElementById('ID').checked = true;"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="document.getElementById('Name').checked = true;"></label>
When you click on a text input, the client will automatically check the matching radio button looking it up by its id.
As an alternative, you could put the Javascript code in a function, so it looks better and is easier to edit if you have lots of radio buttons with text input associated with it:
function check_radio(element_id){
document.getElementById(element_id).checked = true;
}
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="check_radio('ID');"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="check_radio('Name');"></label>
In regular html, radio input types are not related to anything other than the label associated with it. Therefore any other input text fields before or after need to be hooked up via some sort of javascript.
I think I found the answer.
The w3 recommendation states:
In an HTML document, an element must receive focus from the user in order to become active and perform its tasks
The issue is that when the user clicks on the text input, the radio button loses focus and is not activated.
Source (html4): http://www.w3.org/TR/html4/interact/forms.html#focus
How can I completely exclude an input (specifically, a checkbox) from a form? Specifically, how to keep it from resetting when the form is reset. There are numerous answers for how to prevent it from being submitted with a form, however none seem to address the issue of form resets.
My problem is that I need to place a checkbox on my page for user control of an option, but it needs to be located in the middle of a bunch of form inputs. Since it is only a user option selection box, and not part of the form, however, I need it to be excluded from all form operations, such as resetting the form or submitting the form.
if you are working with modern browsers that support html5 you can use form attribute of
as mdn describes:
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a element in the same document. If this attribute is not specified, this element must be a descendant of a element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
so you can simple set form attribute to a dummy id which did not exist in the document
this can simple exclude the input from its containing form
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>html5 template .html</title>
</head>
<body>
<form>
<input type="checkbox" name="hello"/>aaa
<input type="checkbox" name="hello"/>bbb
<input type="checkbox" name="option" form="dummy"/>ccc
<input type="submit"/>
<input type="reset"/>
</form>
</body>
</html>
in the code above. when you click reset. option is not reset
when you click submit option is not submit(see address after click submit, something like: ?hello=on&hello=on)
You might have to do this kind of form reset by using Javascript.
Here is the fiddle example
http://jsfiddle.net/8K7Bt/
Javascript
$(function() {
$("form").on('reset', function() {
var inputs = $(this).find(":checkbox");
inputs.each(function() {
$(this).data('value', $(this).is(':checked'));
});
this.reset();
inputs.each(function() {
$(this).attr('checked', $(this).data('value'));
});
});
});
HTML
<form>
<input type="text" />
<br/>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<label><input type="radio" name="radio" /> radio 1</label><br/>
<label><input type="radio" name="radio" /> radio 2</label>
<br/>
<label><input type="checkbox" name="checkbox" checked='checked' /> checkbox 1 (excluded from reset)</label><br/>
<label><input type="checkbox" name="checkbox" /> checkbox 2 (excluded from reset)</label>
<br/>
<br/>
<input type="reset" value="reset me" />
</form>
I'm trying to program a dynamic form, so I can't use the normal form tags and stuff. I use normal buttons, JQuery, and AJAX calls to simulate a traditional form. However, I can't figure out how to do radio buttons. Any help?
EDIT: Yeah, I suppose I should have been more specific. I tried doing
<input type="radio" />
and stuff, but:
it lets me select more than one button at a time (which kind of defeats the point of radio buttons)
it won't let me deselect a button after it's pressed!
EDIT 2: The reason I'm not using form tags is that I need multiple submit buttons as well, and the only solution I found to that dilemma was to not use form tags.
Why can't you use the form tag? There is nothing stopping you from doing so. But if you don't want to use the form tag, why not:
<input type='radio' name='test' value='1' checked>
<input type='radio' name='test' value='2'>
<input type='radio' name='test' value='3'>
<input type='radio' name='test' value='4'>
Works fine for me. Demo
Edit:
1: You need to specify a name for the radio group, otherwise each input is considered its own group. Hence why you can select more than one button at a time when using <input type="radio" />. Look at my code above. The radio group is 'test'.
2: Radio buttons are suppose to have a default value. When you create a radio group you should be specifying a default value with the checked attribute. A consequence of this is that you can't deselect a radio button. You can either choose a different value or stick with the default. If you want to be able to deselect, then consider using checkboxes instead. I've updated the example code to reflect this.
If you are able to select more than one radio button, its sounds like your name attributes are not matching. What you want to end up with is something like the following:
<input type="radio" name="group-1" value="something-unique">
<input type="radio" name="group-1" value="something-else-unique">
<input type="radio" name="group-1" value="another-unique-something">
<input type="radio" name="group-2" value="something-unique">
<input type="radio" name="group-2" value="something-else-unique">
<input type="radio" name="group-2" value="another-unique-something">
Note that the name attribute is the same for the group of options, which means that the selections will replace each other.
Also, I haven't had any issues not wrapping radios in form tags, when using them purely with javascript, however if you want to do any html post stuff, I would expect that they are required.
You can try this:
HTML
<div>
<ul>
<li><input type="radio" name="radio" value="value1" checked>Radio Button1</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button2</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button3</input></li>
</ul>
</div>
DEMO
There should not be an input element without a form element. You are not going to get the HTML to respond the way you want it to if you do not use it correctly. Multiple submit buttons would indicate the need for multiple forms.
If, for whatever reason, that does not work, perhaps you should reconsider the format through which you are asking the user to submit information.
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" />