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>
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 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
I was learning some HTML and I got confused about use of the label element because I found it in many places, with inputs in a form, with optgroup tag for the sections in a select element, before the textarea elelemt, etc.
So, is there a rule when to use it and when to avoid using it in the wrong way? especially in HTML5?
The <label> element should be used with form fields: most types of <input>, <select> and <textarea>. If has a for attribute that holds the id of the related element. So, if you click the label, the related element is focused.
Example Usage at Jsbin
<label for="textinput">Enter data here</label>
<input id="textinput>"
<input type="checkbox" id="checkbox">
<label for="checkbox">What this box does</label>
<input type="radio" id="radio_opt1" name="radiogroup">
<label for="radio_opt1">Option description</label>
<input type="radio" id="radio_opt2" name="radiogroup">
<label for="radio_opt2">Option description</label>
<label for="select">Select an option</label>
<select id="select">
<option>Some option</option>
</select>
<label for="textarea">Enter data into the textarea</label>
<textarea id="textarea"></textarea>
In <optgroup> elements, there is a label attribute, which is not the same as the label elements, although its function is similar: identifying a certain group of options:
<select>
<optgroup label="First group">
<option>Some option</option>
</optgroup>
<optgroup label="First group">
<option>Some option</option>
</optgroup>
</select>
Label: This attribute explicitly associates the label being defined with another control.
So the label attribute should use when you want to show some text or label for another controls like textbox, checkbox etc.
And the important thing is
When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.
Look at here for the documentation
No, it's not HTML5 exclusive:)
Label could be used in connection with form element such as <input>, <select>, <textarea>. Clicking on label would automatically change focus to connected element.
There are two ways connecting label with element:
Put element inside label
Add for attribute for label, where for value is id of element need to be connected
Example (taken from http://htmlbook.ru/html/label):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>LABEL</title>
</head>
<body>
<form action="handler.php">
<p><b>Lorem ipsum dolor sit amet...</b></p>
<p><input type="checkbox" id="check1"><label for="check1">Lorem</label><Br>
<input type="checkbox" id="check2"><label for="check2">Ipsum</label><Br>
<input type="checkbox" id="check3"><label for="check3">Dolor</label><Br>
<input type="checkbox" id="check4"><label for="check4">Sit amet</label></p>
</form>
</body>
</html>
It should be used in forms with other elements only. It can be before, after, or around existing form control.
Here's an example by W3Schools.
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??
(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).
This is what Chrome console says:
bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable
HTML:
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name">
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label" required> Label
<input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.
Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.
I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:
If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.
Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.
If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.
I made a JSFiddle to explore your problem here, and I managed to fix it by adding checked to your radiobutton inputs like so: <input type="radio" data-keyname="label" value="label" name="label" required checked>. In your code above, the radio buttons are not checked, but since they are marked as required the form is failing validation and Chrome refuses to submit the form.
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" />