I need to know how can I focus the "box" inside the checkbox element when the user hovers the mouse over this element. The only way I can focus the box is hovering my mouse over the box itself, but not over the text. In fact, I cannot even check the box when I click the text.
Thanks in advance!
Wrap the checkbox and text in a <label> tag.
Ex: <label><input name="myCheckbox" type="checkbox" />My Checkbox</label>
I am not sure what you mean by the first line. If you use a <label>, this allow you to click the text, and makes it accessible for people with disabilities.
<input type='checkbox' id="male"><label for="male">Male</label>
see WebAIM's page on accessible controls
Related
You can label an input field with a <label> tag like this:
<label for="username">Username:</label>
<input id="username" name="username" type="text">
But why?
Is it effective for SEO? Or browser rendering? Or better support for mobile or other devices?
The label tag supports with a click the focus on the input element where id attribute equals labels for attribute.
If you have e.g. a checkbox you can choose this one also with a click on the label.
Example:
<input type="checkbox" value="1" id="myCheckbox"/>
// A click here set the focus on the according checkbox without javascript things
// And it's easier to select than a small checkbox element
<label for="myCheckbox">My Checkbox</label>
The primary benefits are:
Accessibility - it lets screen readers know which form control the text applies to, this lets them accurately tell the user what they are expected to enter in a field
Click targets - clicking on the label has the same effect as clicking on the form control, larger click targets are easier to hit, especially when the input is as small as a radio button
I have <input type="radio" which i need to make activated when i click on <li> element. I have <label><li></li></label>, label is used to activate radio here (it works). The problem is <li> visually gets separated from other <li>s. I tried making <li><label></label></li> but it makes radio activated only when text inside <label> is clicked. In other words, i need <li><label></label><li> to work even when i'm clicking not the insides of <label></label>. Here's the picture of when it's <label><li></li></label> (ignore radios, those are not the problem):
This problem isn't about radio - I have shown radio on screenshot just to know if radio successfully activated by clicking on label or not. The problem is <label><li></li></label> has <li> inside but it's the <label> which should be inside <li>. If I do so (label inside li), then only "test-60" text is clickable and activates radio, not the whole <li>
<label for="radio-button">test 60</label>
<input type="hidden" value="test-60" id="radio-button"/>
also, recommend making input in position absolute and top 0 and left 0
Example
I have two inputs of type radio. For each input there's a correspoding label with a single button inside.
I was expecting that clicking the button would have the same effect as clicking the label: that the corresponding input would be checked.
However, this does not happen. As shown by the following snippet, hovering and pressing the buttons does trigger the corresponding style changes in the radio buttons, but the click action does not select the input, even though the simple labels work as expected.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
I have also tried to add an event listener to both buttons' click events, and within them calling event.preventDefault(), just to make sure that the default behaviour of the button was not preventing the event from bubbling up to the label, but to no avail, the label is receiving the event.
Since this seems to be consistent across browsers (Tested on Firefox 41a and Opera 31b / Chrome 44):
What's happening here that I'm missing?
How can I implement this without trickery (such as styling the label as if it were a button)?
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<button type="button">One</button>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<button type="button">Two</button>
</label>
</div>
A label can only be associated with one form control at a time. This is evidenced by the fact that the for attribute points to an element with a matching ID attribute.
You have a button that is a descendant of your label; the expected interpretation of this is that the label serves as a label for the button. However, you're trying to associate the radio button, not the button element, with the label. The real problem here is that there is a conflict between the form controls and the label; it's unable to figure out which control it's supposed to be associated to.
I'm guessing that the fact the radio button isn't working correctly is a side effect of this. Perhaps it's down to some activation behavior in both the radio button and the button element.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
The validator does nevertheless produce the following error with your markup:
Error: Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.
This is because a label element with a for attribute needs to have a form control with that ID value for the for attribute to point to, even if that control is a descendant of the label itself. But you can't assign the same ID to more than one element. The result is the aforementioned conflict.
Without knowing what you're trying to accomplish here, the best advice I can give if you just want the label to have the appearance of a button is to just style it as such.
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<span style="color: red;">One</span>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<span style="color: blue;">Two</span>
</label>
</div>
You can label an input field with a <label> tag like this:
<label for="username">Username:</label>
<input id="username" name="username" type="text">
But why?
Is it effective for SEO? Or browser rendering? Or better support for mobile or other devices?
The label tag supports with a click the focus on the input element where id attribute equals labels for attribute.
If you have e.g. a checkbox you can choose this one also with a click on the label.
Example:
<input type="checkbox" value="1" id="myCheckbox"/>
// A click here set the focus on the according checkbox without javascript things
// And it's easier to select than a small checkbox element
<label for="myCheckbox">My Checkbox</label>
The primary benefits are:
Accessibility - it lets screen readers know which form control the text applies to, this lets them accurately tell the user what they are expected to enter in a field
Click targets - clicking on the label has the same effect as clicking on the form control, larger click targets are easier to hit, especially when the input is as small as a radio button
I am trying to change the font-size of some radio buttons :
<input type="radio" name="rdDate" id="ShowAll" value="Show All" style="border-style:none;margin-left:0px;font-size:11px;"/>Show All
<input type="radio" name="rdDate" id="ShowCurrent" value="Show Current" style="border-style:none;font-size:11px;"/>Show Current
But adding style="font-size:11px;" to the input tag does not change the text size. The only way I have found to do this is to wrap the text in a font tag, but then you are limited to a font size of 1 to 7, none of which is the right size for what I require.
Does anybody know how to change the font size of a radio button text?
The text is beside the radio button, not inside it.
First, add a <label> element (make sure the for attribute matches the id of the input with which it is associated, this will link them so people will have a bigger click target and screen reader users will know which label belongs with which control).
Then style the label.
Wrap the text with a <label> tag and then you can style up this tag.
<input type="radio" name="rdDate" id="ShowAll" value="Show All" style="border-style:none;margin-left:0px;font-size:11px;"/><label style="font-size: 11px;">Show All</label>
<input type="radio" name="rdDate" id="ShowCurrent" value="Show Current" style="border-style:none;font-size:11px;"/><label style="font-size: 11px;">Show Current</label>
Also consider NOT using inline styles and use an external stylesheet.