I stumbled upon an interesting problem today and can't seem to solve it. I have three forms on my site, they all contain the same form fields. I have labels for each input field and would like to focus the text input (or in case of the radio buttons select the associated radio) when the user clicks on the label. This works fine for the first two forms, however the labels do not react to a click in the third form:
Form Number 2 (analogue to form 1 with different IDs, both work perfectly fine):
<label class="label1">Anrede</label>
<input type="radio" name="gender" value="frau" id="2_frau">
<label class="radio-label" for="2_frau"> Frau </label>
<input type="radio" name="gender" value="herr" id="2_herr"><label class="radio-label" for="2_herr"> Herr </label>
<br>
<label class="label1" for="2_firstname">Vorname</label>
<input type="text" name="firstname" id="2_firstname" placeholder="Vorname*">
<br>
<label class="label1" for="2_lastname">Nachname</label>
<input type="text" name="lastname" id="2_lastname" placeholder="Nachname*">
<br>
<label class="label1" for="2_email">E-Mail-Adresse*</label>
<input type="text" name="email" id="2_email" placeholder="E-Mail-Adresse*" required>
Form Number 3 (no reaction when labels are clicked):
<label class="label1">Anrede</label>
<input type="radio" name="gender" value="frau" id="4_frau">
<label class="radio-label" for="4_frau"> Frau </label>
<input type="radio" name="gender" value="herr" id="4_herr">
<label class="radio-label" for="4_herr"> Herr </label>
<br>
<label class="label1" for="3_firstname">Vorname</label>
<input type="text" name="firstname" id="3_firstname" placeholder="Vorname*">
<br>
<label class="label1" for="3_lastname">Nachname</label>
<input type="text" name="lastname" id="3_lastname" placeholder="Nachname*">
<br>
<label class="label1" for="3_email">E-Mail-Adresse*</label>
<input type="text" name="email" id="3_email" placeholder="E-Mail-Adresse*" required>
They are both wrapped into <form></form> element. I also compared the two forms and apart from for="" and id="" attributes everything is the same. I also tried wrapping the <input>-elements into the <label>-element, this does not solve the problem either. Problem appears in Chrome and Firefox equally.
Help is much appreciated, thanks!
Ok, I managed to make it work. I am using the bxslider-Plugin and each form was a slider element wrapped in an unordered list. The label click doesn't seem to work within the last list item, so I simply added a ghost list item in order to fix this. You were right, didn't have to do anything with the part I posted. Thanks!
Related
I have a HTML form with radio buttons and are able to select multiple but why? I can't help myself.
This is my HTML:
<input type="radio" name="nameA" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="nameB" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
For anyone finding this question: Solution is to give them the same NAME
<input type="radio" name="sameName" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="sameName" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
All radio buttons that share the same name and are controls in the same form are part of a group.
Only one radio button in a group can be checked.
You have two radio buttons with different names. This means that you have two radio groups, each containing one radio button.
You need to put them in the same group (by making them share a name) if you only want one of them to be selected.
(They should still have unique ids (so you can give each one a label) and values (which is how you determine which one was checked when the form is submitted to the server)).
<form>
<fieldset>
<legend>Thing that is being chosen</legend>
<input type="radio" name="name" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="name" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
</fieldset>
</form>
Whenever you are creating radio buttons (with the intention of
ensuring users would be able to select only 1 option), please ensure
to have the value of the name attribute the same
Please update your code like this :
<input type="radio" name="sameName" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="sameName" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
I am trying to make an input text to have a title option, like you can make with the div's...It is possible to do this?
This is what I've tried, but it seems that it doesn't work...
HTML:
<label>
<input type="checkbox" class="promote_checkbox">Promote with</input>
<input type="text" class="promote_points_number" maxLength="3" title="you need minimum 5 points to promote">Points</input>
</label>
And I also have another problem with this label: if you're trying to type something in the textbox you can't because the checkbox will be checked...can you please tell me why is this thing happening?
http://jsfiddle.net/2xw32q80/
In HTML, the <input> tag has no end tag whereas in XHTML it must be properly closed, like this <input />.
The <label> tag defines a label for an <input> element, so you need to wrap each <input> with their own <label> tags like so:
<label>Label for checkbox
<input type="checkbox" class="promote_checkbox">
</label>
<label>Label for points
<input type="text" class="promote_points_number" maxLength="3" title="you need minimum 5 points to promote">
</label>
OR have a for attribute on each <label> that corresponds to the id attribute of its <input>
<label for="box">Label for checkbox</label>
<input type="checkbox" id="box"><br>
<label for="points">Label for points</label>
<input type="text" id="points" maxLength="3" title="you need minimum 5 points to promote">
Watch your markup, you did not close the <input> tags! This works for me in Opera:
<label>
<input type="checkbox" class="promote_checkbox" />Promote with
<input type="text" class="promote_points_number" maxLength="3" title="you need minimum 5 points to promote" />Points
</label>
Result:
In my web page I have placed some radio buttons. But these buttons are not working properly. I can check multiple buttons.
code:
<label for="abc" style="margin-top:-20px;margin-left:40px">xyz</label>
<input type="radio" id="abc" name="abc" >
<label for="bcd" style="margin-top:-20px;margin-left:40px">abc</label>
<input type="radio" id="bcd" name="bcd" >
<label for="efg" style="margin-top:-20px;margin-left:40px">ccc</label>
<input type="radio" id="efg" name="efg" >
fiddle
I want to check only one button. Please any one help me.
Because you've different value for name attribute, they should have a common name value, just like you group items.. for example
<input type="radio" name="group1" />
<input type="radio" name="group1" />
<input type="radio" name="group1" />
<!-- You can select any one from each group -->
<input type="radio" name="group2" />
<input type="radio" name="group2" />
<input type="radio" name="group2" />
Demo
<label for="abc" style="margin-top:-20px;margin-left:40px">xyz</label>
<input type="radio" id="abc" name="abc" >
<label for="bcd" style="margin-top:-20px;margin-left:40px">abc</label>
<input type="radio" id="bcd" name="abc" >
<label for="efg" style="margin-top:-20px;margin-left:40px">ccc</label>
<input type="radio" id="efg" name="abc" >
All inputs must have the same name="" attribute value
Radio buttons which are grouped together must have the same case-sensitive name property.
<label for="input1">First Input</label>
<input type="radio" id="input1" name="inputGroup" >
<label for="input2">Second Input</label>
<input type="radio" id="input2" name="inputGroup" >
<label for="input3">Third Input</label>
<input type="radio" id="input3" name="inputGroup" >
JSFiddle demo.
From the HTML specification:
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive.
Give same name to all radio button from which you want to select one option
<label for="abc" style="margin-top:-20px;margin-left:40px">xyz</label>
<input type="radio" id="abc" name="abc" >
<label for="bcd" style="margin-top:-20px;margin-left:40px">abc</label>
<input type="radio" id="bcd" name="abc" >
<label for="efg" style="margin-top:-20px;margin-left:40px">ccc</label>
<input type="radio" id="efg" name="abc" >
Now it will work properly
Name attribute needs to be the same. Name groups radio buttons together to make them one unit.
Name them the same way, and in your php or receiving code it will be something like
$_POST['name'] = 'value of selected radio button'
The name setting tells which group of radio buttons the field belongs to. When you select one button, all other buttons in the same group are unselected.
If you couldn't define which group the current button belongs to, you could only have one group of radio buttons on each page.
e.g :
<input type="radio" name="fruit1" value="Apple"> Apple <br>
<input type="radio" name="fruit1" value="Apricot" checked> Apricot <br>
<input type="radio" name="fruit1" value="Avocado"> Avocado
<hr>
<input type="radio" name="fruit2" value="Banana"> Banana<br>
<input type="radio" name="fruit2" value="Breadfruit"> Breadfruit<br>
<input type="radio" name="fruit2" value="Bilberry" checked> Bilberry
Give the name the same attribute.
The checked attribute can be used to indicate which value should be selected. Somewhere in your syntax for the value you want checked write checked="checked"
I reached this thread searching the keywords "html radio not working". After reviewing my code, I noticed that I used a javascript method "event.preventDefault();" in this custom function that I've made where the HTML node that triggered this event in that custom function were the "not working" radio parent. So I solved my problem removing the "event.preventDefault();". If someone reached this thread in the future, I hope this help you somehow (even for debbuging purposes).
I'm using the jQuery Validate to validate my form. It's a form with text and radio types and also with a selector.
The validation is working great, but when validating radio buttons the error div shows in between the buttons and not at the end of the row of them.
How can I place this div in a different position without moving it for the rest of the form's fields?
YOu can use the code from this exemple: http://jquery.bassistance.de/validate/demo/radio-checkbox-select-demo.html
<fieldset>
<legend>Gender</legend>
<label for="gender_male">
<input type="radio" id="gender_male" value="m" name="gender" validate="required:true" />
Male
</label>
<label for="gender_female">
<input type="radio" id="gender_female" value="f" name="gender"/>
Female
</label>
<label for="gender" class="error">Please select your gender</label>
</fieldset>
and change the
<label for="gender" class="error">position
I have a form which contains a 'gender' label and two radio buttons'male' and 'female'. How can I put 'label for' in this particular scenario ?
<label for="username">User Name</label> <input type ="text" id="username" />
<label for="?">Gender</label>
<label for="male"><input type="radio" id="male" value="male" /> </label>
<label for="female"><input type="radio" id="female" value="female" /> </label>
You do not need a label around Gender, just the male/female ones you have associated with the individual inputs. You could classify Gender either just with a Heading tag or with a Legend tag and a Fieldset spanned around the input collection.
You do however need to output some text in your male/female labels, perhaps after each input.