Hi I'm trying to align two set of checkboxes in form side by side and make the checkboxes align nicely but everytime I get the checkboxes side by side the one on the right will be mess up depend on the text size on the left
so I'm wondering if there is a way
here is the code
UPDATE THE BROKEN CODE.
http://jsfiddle.net/Ysf7t/1/
Easiest way would be to give the names (i.e. "Soccer", "Mercedes", etc.) a fixed width through CSS.
Basically something like this:
<h1>Sports</h1>
<div>
<input type='checkbox' name='system_type17' value='2' />
<input type="checkbox" name="system_type3" value="5" />
<span style="width:100px;display:inline-block;">Soccer</span>
<input type='checkbox' name='system_type17' value='2' />
<input type="checkbox" name="system_type3" value="5" />
<span style="width:100px;display:inline-block;">Mercedes</span>
</div>
<div>
<input type='checkbox' name='system_type18' value='3' />
<input type='checkbox' name='system_type4' value='4' />
<span style="width:100px;display:inline-block;">Mercedes</span>
<input type="checkbox" name="system_type7" value="2" />
<input type="checkbox" name="system_type8" value="3" />
<span style="width:100px;display:inline-block;">Mercedes</span>
</div>
Of course, ideally, the CSS shouldn't be inline. But I hope you get what I mean.
Related
I have used a black colour background image for my HTML page. I want to change the radio button labels/ texts to white ( just like the questions) How do I do that? Following is my code snippet.This is how it is looking on the page.
<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<input type="radio" name="cig-stat" style="color:white" value="0" id="never-smoke" required>Never Smoked Cigarettes<br>
<input type="radio" name="cig-stat" style="color:white" value="1" id="curr-smoker">Current Cigarette Smoker<br>
<input type="radio" name="cig-stat" style="color:white" value="2" id="former-smoker">Former Cigarette Smoker<br>
<hr>
You need to wrap those input elements in label tags (which also contain the texts for those respective radio buttons) and apply the styling to those.
BTW: In general it's better to have an external stylesheet for that purpose instead of using inline styles - among other things you avoid havin to repeat the same styles over and over when you simply can apply them to a particular HTML tag or a class.
body {
background: #555;
}
<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="0" id="never-smoke" required>Never Smoked Cigarettes</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="1" id="curr-smoker">Current Cigarette Smoker</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="2" id="former-smoker">Former Cigarette Smoker</label><br>
<hr>
First, I'd set up your markup like this:
<fieldset>
<legend>Cigarette smoking status</legend>
<div>
<input type="radio" name="cig-stat" value="0" id="never-smoke" required />
<label for="never-smoke">Never Smoked Cigarettes</label>
</div>
<div>
<input type="radio" name="cig-stat" value="1" id="curr-smoker" />
<label for="curr-smoker">Current Cigarette Smoker</label>
</div>
<div>
<input type="radio" name="cig-stat" value="2" id="former-smoker" />
<label for="former-smoker">Former Cigarette Smoker</label>
</div>
</fieldset>
Then you can style the <legend> and <label> elements to color: white. I'd split the CSS up from the markup if possible. If not, you can keep them inline.
Here's a fiddle of the above in action:
https://jsfiddle.net/1k3gte76/
If you don't like the white border around the <fieldset> element then just add a border: none rule to that element.
Kindly Select the service you require
<input type="radio" id="currConverter" name="currConverter" value="currConverter" />
<label for="currConverter">Currency Converter</label> <br />
<input type="radio" id="pbChecker" name="pbChecker" value="pbChecker" />
<label for="pbChecker">Prize Bond Checker</label> <br />
<input type="submit" class="submit" />
</form>
I have a form element inside which i have put two radio buttons but want the user to select only one option.When i am clicking on these one by one , both options are getting selected instead of the one on which i clicked.Any solution to this ?
Link to w3School
You have to keep same name. in your case:
<input type="radio" id="currConverter" name="pbChecker"value="currConverter"/>
<label for="currConverter">Currency Converter</label> <br />
<input type="radio" id="pbChecker" name="pbChecker" value="pbChecker" />
<label for="pbChecker">Prize Bond Checker</label> <br />
<input type="submit" class="submit" />
</form>
I have a set of radio buttons in the format below. I'm using a legend and a fieldset to group the radio buttons and give the set a label. I'm styling the input to be hidden, and then styling the label to look more like a button.
My Question:
If I want to add more context for one of the buttons, what is the most accessibility friendly way of doing that? I was thinking about adding a title attribute to the label of "Vote '?' if you wish to abstain". I don't mind this appearing in a tooltip, so title seems work fine, I'm just not sure how it is handled by screen readers.
<fieldset>
<legend>Votes</legend>
<label>
<input type="radio" class="hidden" value="0" /> ?
</label>
<label>
<input type="radio" class="hidden" value="1" /> 1
</label>
<label>
<input type="radio" class="hidden" value="2" /> 2
</label>
<label>
<input type="radio" class="hidden" value="3" /> 3
</label>
</fieldset>
You can Edit Like below:
<fieldset>
<legend>Votes</legend>
<label title="0">
<input name="r1" type="radio" class="hidden" value="0" /> ?
</label>
<label title="1">
<input name="r1" type="radio" class="hidden" value="1" /> 1
</label>
<label title="2">
<input name="r1" type="radio" class="hidden" value="2" /> 2
</label>
<label title="3">
<input name="r1" type="radio" class="hidden" value="3" /> 3
</label>
</fieldset>
Following a common practice, similar to how bootstrap uses its screen reader-only helper (.sr-only), you could use CSS to offset the text within the label so that it is hidden to the visual user and only visible to the screen reader.
Using the title attribute on the label you will be relying on the specific user's AT usage of the label title attribute.
<label for="ir1">
<input id="ir1" name="r1" type="radio" class="hidden" value="0" />
visual text
<span class="sr-only">additional screen reader only text</span>
</label>
https://getbootstrap.com/docs/3.3/css/#helper-classes-screen-readers
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Some screen reader + browser combinations don't honor "implicit" labels (input fields nested in a label) because they don't associate the label with their respective (nested) input element. That's a bug on their end but is something you should try to avoid. So the first thing I would do is add the for attribute to all the <label> elements.
<fieldset>
<legend>Votes</legend>
<label for="r1">
<input name="myradio" id="r1" type="radio" class="hidden" value="0" /> ?
</label>
<label for="r2">
<input name="myradio" id="r2" type="radio" class="hidden" value="1" /> 1
</label>
<label for="r3">
<input name="myradio" id="r3" type="radio" class="hidden" value="2" /> 2
</label>
<label for="r4">
<input name="myradio" id="r4" type="radio" class="hidden" value="3" /> 3
</label>
</fieldset>
Note, your original code did not have a name attribute for each <input> so the radio buttons were not programatically grouped together. I added name="myradio" to each one. I also added an ID to each <input> and now each <label> points to each <input> via its for attribute.
One possible way to add additional text to each label is to use visually hidden text that is still available to screen readers. #jcruz mentioned that and it's one possibility. It's a pretty common technique.
Another solution, and possibly a little simpler than hidden text, is to have an aria-label attribute on each <input>. The aria-label is not visible. It's there solely for the screen reader. The aria-label will override anything in the <label>. But one caution when having both visible text and an aria-label, the aria-label must contain the same text as in the visual label, plus it can have additional text. This is a new WCAG 2.1 guideline and is called "2.5.3 Label in Name". So you can visually have "2" as the <label> but the aria-label could be "vote two times to get your candidate in office". In this case, whether you have "two" or "2" in the label doesn't matter. A speech interface user can say "click two" and the correct radio button will be selected.
(Note that with a braille device, there is a difference. One would show the word "two" and the other would show the number "2", but again, in this case it might not matter.)
<fieldset>
<legend>Votes</legend>
<label for="r1">
<input name="myradio" id="r1" type="radio" aria-label="Not sure who to vote for? Abstain" class="hidden" value="0" /> ?
</label>
<label for="r2">
<input name="myradio" id="r2" type="radio" aria-label="Vote one time to be honest" class="hidden" value="1" /> 1
</label>
<label for="r3">
<input name="myradio" id="r3" type="radio" aria-label="Vote two times to get your candidate in office" class="hidden" value="2" /> 2
</label>
<label for="r4">
<input name="myradio" id="r4" type="radio" aria-label="Vote three times if you're really passionate" class="hidden" value="3" /> 3
</label>
</fieldset>
Note that you might have a special case that I didn't test with speech recognition software. As mentioned, the aria-label needs to contain the visible text from the label. With your first radio, it's a question mark. I'm not sure if speech recognition will expect "click question mark", and if the "?" in the aria-label will match.
It seems simple, but this has been a bit of a headscratcher for me. Given the following (valid xhtml transitional) code:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test" value="5" />
</form>
Why is it that I can't tab between radio buttons? This issue seems to be because they all have the same name attribute, but that seems rather counter-intuitive to me as far as accesbility goes. Why does the focus state only get applied to one? Is this because the group is treated as a single element? Are access keys the only non-Javascript solution here?
You actually use the arrow keys to move within the radio buttons because as you said, they are treated as a single element. This is normal behavior.
As James and Tatu said that is normal, I don't know if you have used "TABINDEX", it might work.
<input type="radio" id="test5" name="test" value="5" tabindex="5" />
But as they are treated as single element it might not work.
Yes, each radio button group is treated as one form element - if you want to skip between the group elements then use the arrow keys. It does make sense; if you're tabbing through a long form with a group of 10 radio buttons halfway down, you'd get annoyed if you had to tab through all 10 radio options before moving to the next form item.
If they're not in the same group, then you can tab between them. In the example below, T5 will gain separate tab focus to the rest:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test2" value="5" />
</form>
I need the ability to place the labels for radio buttons above the selections, and not to the left or the right. Is there a way to use CSS that would give this effect?
THanks!
I think I know what you are looking for, but correct me if I'm missing the mark. I'm assuming you will want the radio buttons centered under their labels. This is a lot easier if you are okay with adding <br>s to your markup.
label {
float: left;
padding: 0 1em;
text-align: center;
}
<label for="myChoice1">Choice 1<br />
<input type="radio" id="myChoice1" name="myChoice" value="1" />
</label>
<label for="myChoice2">Choice ABC<br />
<input type="radio" id="myChoice2" name="myChoice" value="ABC" />
</label>
<label for="myChoice3">Choice qwerty<br />
<input type="radio" id="myChoice3" name="myChoice" value="qwerty" />
</label>
<label for="myChoice4">Choice--final<br />
<input type="radio" id="myChoice4" name="myChoice" value="final" />
</label>
...and then use your own clearing method to move to the next line.
(The use of the for attribute in the <label>s is a little redundant here, but it won't hurt anything.)
Instead of the following:
<label>Label <input type="radio" id="val" name="val" value="hello"></label>
You can use this and style the two separately:
<label for="val">Label</label>
<input type="radio" id="val" name="val" value="hello">
I can't be more specific without seeing exactly what layout you are going for, but if you just want to get the label above the radio button, use display:block on the radio button. (obviously, this is inline just as an example)
<label>Label <input style="display:block;" type="radio" id="val" name="val" value="hello" /></label>
So I know this isn't the answer you are looking for, but I would be confused to see that type of layout. It is not standard and it would put me off. Just my $.02.