I'm using MVC, and I've got a simple radio button setup:
<%=Html.RadioButton("my_flag", True)%><label>Yes</label>
<%=Html.RadioButton("my_flag", False)%><label>No</label>
The only thing I'm missing is that you can't click the label to select the radio button. Normally you'd use:
<label for="my_flag">
but that associates both labels with the last radio button. Is there any way to associate the labels with the correct radio button?
Note: This is mimicking a paper form, so switching to a checkbox is not an option.
You have two different ways to implement this.
The first one is the simple solution is to embed the radio button inside a <label/> tag.
<p>
<label><%=Html.RadioButton("option", "yes") %> Yes</label>
</p>
<p>
<label><%=Html.RadioButton("option", "no") %> No</label>
</p>
The second path is to associate each radio button with an ID. This is also quite simple with the htmlAttributes argument and it allows for more flexibility in regard to the form layout:
<p>
<label for="option_yes">Yes:</label>
<%=Html.RadioButton("option", "yes", new { id = "option_yes" }) %>
</p>
<p>
<label for="option_no">Np:</label>
<%=Html.RadioButton("option", "no", new { id = "option_no" }) %>
</p>
I would recommend the latter, and it seems to be the one you are asking for too.
EDIT
In fact you should give the argument with the ID attribute no matter what. If you don't do this, your site will have multiple elements with the same ID, and this fails HTML validation.
You need to give the two radio buttons the same name (so that they're in the same group), but different ids (so that you can associate the label with each one individually). I'm not familiar with ASP.NET MVC, so I don't know how to actually accomplish this, but that's the solution.
Edit: a second possibility is to wrap the radio buttons inside the label tag, like so:
<label><%=Html.RadioButton("my_flag", True)%>Yes</label>
<label><%=Html.RadioButton("my_flag", False)%>No</label>
* Note that this way may actually have better browser compatibility, I know some browsers are still iffy about the name/id distinction
I'm not an asp programmer, so sorry if i'll tell something off :P
Label's attribute for is referenced to input's id. So you will have to do something like
<input type="radio" name="rad1" id="rad1_1"><label for="rad1_1">Rad1</label>
<input type="radio" name="rad1" id="rad1_2"><label for="rad1_2">Rad2</label>
You can do it like this: (This is using Razor, but it's easy to translate.)
#Html.RadioButtonFor(model => model.MyValue, true, new { id = "MyValue_True" })
<label for="MyValue_True">Yes, this is true</label>
#Html.RadioButtonFor(model => model.MyValue, false, new { id = "MyValue_False" })
<label for="MyValue_False">No, this is false</label>
Basically you manually specify the id attribute for the radio buttons.
Related
im working on updating a site for compliance. the site is mostly AngularJS which im still new to but learning. i found a situation where there is a label targeting a div tag however the label has no :for attribute, instead has an :id and the div has a :label-id targeting the :id of the label tag...when i tried to adjust it, it broke on the front-end so im not sure what im seeing...im curious if this will pass WCAG AA?
i have tried a screen reader, NVDA, no issues...however a crawler i used flagged the label element for not having a :for attribute...i have tried searching for the :label-id attribute with no luck which im guessing means its custom...im guessing a lot of the issue is related to my lack of understanding angularJS...
<div class="groupA">
<label id="elementA">Element A is for Apple</label>
<div class"customSelectA" label-id="elementA">...stuff shows up here after clicking the label and there are also a bunch of angular attributes on this div that are not relevant to my question</div>
</div>
I'd recommend going to the basics and ignoring angular for the moment.
Look at the spec for the <label> element. It has a for attribute that can point to a form element. The ID must point to a "labelable element" (<input>, <button>, <select>, etc).
So the following is valid:
<label for="myID">Element A is for Apple</label>
<input id="myID" type="checkbox">
but the following is not:
<label for="myID">Element A is for Apple</label>
<div id="myID"></div>
In fact, if you run the above example through an html validator, https://validator.w3.org/nu, it will flag it in error:
Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
Regarding the label-id attribute, it does not exist. It's not part of the html language. It appears to be a custom attribute but custom attributes should start with "data-".
You can have a <label> without a for attribute such as:
<label id="newID">Element A is for Apple</label>
<input type="checkbox" aria-labelledby="newID">
In this case, the <input> points back to the <label> instead of the <label> pointing to the <input>, but that's a poor use of the <label> element. You won't gain the benefit of the <label>. The first example lets you click on the text of the <label> and the checkbox will be selected. In the last example, while the checkbox will be labeled by the text, you can't click on the text to select the checkbox.
Hello I have a form that allows the user to check as many options as they like and then hit submit. Is there any way to have the input type 'checkbox' submit more than one value?
For example right now I have:
<input type="checkbox" value="testuser">
But I want something like:
<input type="checkbox" value="testuser" valuetwo="1">
Is there any way to achieve this second option?
Thanks!
Since there is no way to submit to values, is there a way to submit them both in value one?
For example:
<input type="checkbox" value="testuser,1">
And if so how would I separate the value into two?
From your comments, it sounds like you have some JavaScript that handles the data before it's submitted. If that's the case, you can add a data attribute to the checkbox. To use your example, you could call it data-valuetwo.
<input type="checkbox" value="testuser" data-valuetwo="1">
Then, your JavaScript can use getAttribute to retrieve the value in your data-valuetwo attribute and handle it appropriately. It could look something like this:
var valuetwo = checkbox.getAttribute("data-valuetwo");
I found a way to do this without JavaScript or Libraries using a hidden form-field instead:
<input name="selectedValue" type="hidden" value="defaultValue">
<input name="selectedValue" type="checkbox" value="secondValue">
Now, if the checkbox is not selected, the hidden value is sent, if it is selected, the hidden value is overridden.
You might try alternative using select2, see: https://select2.github.io/examples.html (Tagging support, use two options limit). Again, there is no enough information supplied to fully satisfy Your question.
Another approach with select box and JSON is Can an Option in a Select tag carry multiple values? (can be rewritten for checkbox)
I'm new to web development
I want to submit a form with the label names.
I mean in my html page i have shown some details of a person. Those details are showing using labels. After clicking submit button i want to submit that details to another HTML page
Anyone have a Idea how to do that?
Use the concept of hidden fields.
http://www.w3schools.com/tags/att_input_type.asp
Why not style input fields to look like labels? You could even stop them from being editable. That way a form submit will ensure they get posted.
You can use hidden field with labels
input type="hidden"
I'll give You an example of my way of solving this:
I declare two html elements as this:
<label name="importe_label" id="importe_label" />
<input type="hidden" id="importe" name="importe" value=""/>
Then, for example, I set both of them with jQuery:
$("#importe_gravado").val(99.99);
$("#importe_gravado_label").text(99.99);
So, when I submit the form, I get the value I need in back-end (In the "importe" parameter, in this case).
I don't know if is this the best way, but It works! :)
Hope It helps anybody. Best regards!
I'm using some radio buttons to influence the behavior states of a jQuery widget.
That widget can be used in a form but, since these radios don't contain any actual data, I don't want them to submit noise to the server, or cause naming conflict to whoever will use the widget in his form.
Here are two potential solution starts, not yet satisfying though :
remove the name attribute : seems to work fine for other inputs, but turns my radios into checkboxes : it kills the link between them so selecting one doesn't unselect the others. Is there an HTML way (i.e. other than Javascript event) to bind them without a name attribute ?
disable the input : As expected, nothing is submitted, but the radios become grey and can't be clicked. Is there any way that they stay clickable yet unsubmittable, like disabled at submit time ?
As far as possible, I'm rather looking for a cross-browser solution.
Try call a function before submit, that disables the radio buttons.
function disableBtn() {
document.getElementById('idbtn1').setAttribute('disabled', 'disabled');
document.getElementById('idbtn2').setAttribute('disabled', 'disabled');
return true;
}
Then, in form:
<form action="file" method="post" onsubmit="return disableBtn()">
Try this:
<form>
<input type="radio" name="group1" value="1" form="">
<input type="radio" name="group1" value="2" form="">
</form>
This still uses the name attribute which is required for radio buttons, and it also leaves the inputs enabled for interaction. No JavaScript code, no during-submit patching of the document in hope that the submit will turn out fine and destroying the document before submit will leave no visible traces.
The form="" attribute indicates that these input elements are not included in their parent form. Actually you're supposed to put the ID of another existing <form> element in this attribute, but then again, by the HTML standard, you're probably not supposed to exclude radio buttons from a form. So this hack is the only solution to the problem. (Doesn't work in Internet Explorer, but what does today.)
I'm intending to use this method for radio button groups that are in a data table which is populated from a <template> element. In this case, there will be a radio group in each table row, so their number is unknown. But since the name attribute is the only way to build radio button groups, they'll need to get counting names assigned. Since the table data is put in a JSON field before submitting anyway, I don't need field names for a form submit. Radio buttons do need names for themselves, but this method will still exclude them from being submitted.
Why are "for" attributes for form labels necessary? I've never had a use for them
The main advantage is that clicking on a label with a "for" attribute will auto-focus on that form element. So, a label for an input field will be associated with that input field, and clicking on the label will autofocus the input.
#ChristopherArmstrong's answer is technically correct - but the reason it's a good thing is that people who have trouble pointing correctly (older users, people with disabilities, etc.) are helped by this. It lets them get the cursor "about right" and still land in the right field.
When used with radio buttons, it lets the click on the label select the radio button:
http://jsfiddle.net/DLL73/
notice that clicking on ONE does nothing because it's not using the for attribute, but clicking on TWO selects that radio button.
It will associate the label with the form field. This is especially useful for radio buttons so that you can click the label to select the button, not just the tiny button itself.
However, you don't need to use the for attribute for that, you can also put the radio button inside the label:
<label>
<input type="radio" name="selection" value="yes" />
Certainly
</label>
I usually put a span tag around the text also, so that it can easily be styled using CSS.