I have a validation error in my HTML form, where there are radio buttons (appleiphonebuyers.com/sell.html). Error reads:
Line 155, Column 44: The for attribute of the label element must refer to a form control.
… <label for="condition" class="inline"><span class="formstar">*</span> Conditi…
Is there another way I should apply a label to the group of radio buttons besides using "label for"?
UPDATE:
Here is the HTML for those radio buttons:
<LABEL class="inline" for="condition"><SPAN class="formstar">*</SPAN> Condition</LABEL> <INPUT class="conditionselect" type="radio" name="condition" value="Good" />Good <INPUT class="conditionselect" type="radio" name="condition" value="Okay" />Okay <INPUT class="conditionselect" type="radio" name="condition" value="Bad" />Bad <BR />
It just occurred to me that maybe I have to change the INPUT class to "condition" so it's the same as the "label for" attribute? I thought it was the name that had to be the same but maybe it's the class? –
Is there another way I should apply a label to the group of radio buttons besides using "label for"?
A <label> labels a single form control, not a group of them.
Use <fieldset> and <legend> for a group of font controls.
<fieldset>
<legend> Condition </legend>
<input type="radio" name="condition" id="condition_1" value="1">
<label for="condition_1"> 1 </label>
<input type="radio" name="condition" id="condition_2" value="12>
<label for="condition_2"> 2 </label>
<input type="radio" name="condition" id="condition_3" value="13>
<label for="condition_3"> 3 </label>
</fieldset>
Maybe you have a typo on it, the FOR attribute should always be exactly the same as in the ID.
Other than that I don't see nothing wrong. You'd have to feed us some more HTML to be able to help more thoroughly.
The for atribute must map to the input element's ID, and not its name.
Related
Im using spring-boot back-end with the fontend thyme-leaf . But the problem is when im putting Boolean data type in a radio button then the value which is set to 0 is automatically checked in the font end, event if i try to add th:checked="unchecked" its not working. My code is given bellow
<div class="form-group">
<label for="isDownloadable"> Is Downloadable</label> <br>
<input type="radio" th:field="*{isDownloadable}" value="1" th:checked="checked">Yes
<input type="radio" th:field="*{isDownloadable}" value="0"> No<br>
</div>
As here iv tried to cheack Yes radio button but its checked the No radio button in the front end.How to solve this problem ?
here is the output of my code given
If you want to use 0 and 1, you put need to condition and show data.Solution is
<div class="form-group">
<label for="isDownloadable"> Is Downloadable</label> <br>
<input type="radio" value="1" th:checked="${history.Shift == 1} ? ${true}">Yes
<input type="radio" value="0" th:checked="${history.Shift == 0} ? ${true}"> No<br>
</div>
for the below element html code i ve tried multiple ways, Radio button is not choosable at all. Can someone help
<fieldset class="usa-fieldset-inputs usa-sans">
<input type="radio" name="certificate_type" id="idvalue" value="xx">
<label for="add_certificate">xxxx(Review requirements)
</label>
<input type="radio" name="certificate_type" id="ddddd" value="xxx">
<label for="add_certificate">xxxxx (Review requirements)
</label>
tried all below
choose("certificate_type")
choose("idvalue")
page.find(:xpath, '//*[#id="idvalue"]').click
and other xpaths also. Xpath seems to be good.
I have the following checkboxes in view
<div class="form-group">
<label class="col-md-4 control-label">Roles</label>
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="data_entry"> Data Entry <br />
<input type="checkbox" name="save_on_ext_hd"> Save On External HD <br />
<input type="checkbox" name="print"> Print <br />
<input type="checkbox" name="export_csv">Export CSV <br />
<input type="checkbox" name="delete"> Delete
</label>
</div>
</div>
</div>
I am using laravel 5 and blade template.
the issue is: when click on any checkbox the first one checked and verse versa
Ex: when click pn print checkbox the data_entry checked automatically and when unchecked print data_entry unchecked.
also when check print data_entry checked and when check delete for example data_entry unchecked.
That's because all your checkboxes are inside one <label>. Labels with an input inside activate the input when clicked. So clicking anywhere inside the label will trigger all checkboxes.
Solve this by giving each its own <label>:
<label>
<input type="checkbox" name="data_entry"> Data Entry <br />
</label>
<label>
<input type="checkbox" name="save_on_ext_hd"> Save On External HD<br />
</label>
<!-- etc -->
I want to check the first checkbox with id=user_accepts_terms. This is the HTML:
<div class="check-group">
<div class="checkbox">
<input type="hidden" value="0" name="user[accepts_terms]">
</input>
<input id="user_accepts_terms" type="checkbox" value="1" name="user[accepts_terms]">
</input>
<label class="" for="user_accepts_terms">
</label>
</div>
<div class="checkbox">
<input type="hidden" value="0" name="user[subscribed]">
</input>
<input id="user_subscribed" type="checkbox" value="1" name="user[subscribed]">
</input>
<label class="m-focus" for="user_subscribed">
</label>
</div>
I want to check the first checkbox with id=user_accepts_terms. Tried this among other things, but no luck:
find('.check-group').all('.checkbox')[0].find("#user_accepts_terms").set(true)
The .find("#user_accepts_terms").set(true) doesn't work, it says unable to find the css.
This piece works as follows:
2.1.0 :097 > find('.check-group').all('.checkbox')[0].text
=> "I accept the terms of use and privacy policy"
The .all('.checkbox')[0] portion is already finding the checkbox you want, and the .find("#user_accepts_terms") portion is trying to find another element below that, which doesn't exist. Either of the following should work, provided the syntax is correct (I'm unfamiliar with it)
find('.check-group').find("#user_accepts_terms").set(true)
find('.check-group').all('.checkbox')[0].set(true)
I'm using d3. I have a radio button group called #risk. This includes values "apple", "Orange", "Lemon".
I have a separate button on the screen which resets the value back to "Apple". So if they select "Lemon" then click reset, the new value will be "Apple". Any idea how I would do this. Having some difficulty achieving something that should be pretty trivial.
Here id the radio button code:
<div id="risk">
<form>
<span>
<input type="radio" class="risk" name="mode" value= Apple">
<label> All</label>
</span>
<span>
<input type="radio" class="risk" name="mode" value= Orange">
<label> All</label>
</span>
<span>
<input type="radio" class="risk" name="mode" value= Lemon">
<label> All</label>
</span>
</form>
And here is the code for the update button:
d3.select("#resetChart")
.on("click",function() {
d3.selectAll("#risk").selectAll("input") //somehow make this select a radio button
});
My last edit was rejected. I'm not sure on what basis. If this doesn't fit the criteria could you please let me know what I need to do to improve it? Many thanks :)