I'm trying to make a system which asks users to specify what kind of content they are submitting, using PNG icons to represent each type. Ideally, what I'd like is a group of three buttons (with images on them) which behave like radio buttons - the user can use arrow keys to switch between them, they are treated as one group, etcetera. However, that appears to be impossible, and the closest I can get is putting the images alongside the pre-existing radio buttons. Is there a good way to 'fake' this functionality?
I would suggest using radio buttons as a user will recognise these inputs and it'll work without javascript.
<form>
<input type="radio" name="sex" value="male" id="male"/><label for="male">Male</label>
<br />
<input type="radio" name="sex" value="female" id="female" /> <label for="female">Female</label>
</form>
You can then put an image inside the labels, or better, a background image to supplement the text.
Sure, make two variants of each image (normal and highlighted) and use JavaScript to remember which one is selected and switch the images.
How about radio buttons next to the images. Then use JavaScript to hide the radio buttons and change the (hidden) selected radio when an image is clicked. Combine that with some sort of hightlighting effect on the selected image, and you have an attractive interface that degrades nicely. JQuery or a similar JavaScript library would be useful in achieving this.
Related
I want to create two radio buttons, Small and Large. I want those two buttons on multiple places on my page so that when I click small on one of the buttons, all the smalls are checked. Is there a way to simply do that without calling a function in javascript?
This is done by assigning an ID property and then in the label use the for property and make it the same as the ID
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
I encountered a problem, where one radio button group is dependant on other state, which caused a disabled radio button to be selected. This is not a problem when selecting another value in the radio button group with the mouse for example, but it seems it is impossible to tab to the radio button group now. I realise that I maybe should not let this happen, but I think it is strange that you can build radio button group that you cannot change by keyboard alone. Here is a simple example:
<input type="radio" disabled checked name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
<input type="radio" name="test" value="4">
Is there something I can do to "fix" this behaviour, or does anyone have a good way to handle these edge cases, or how to code if differently all together to avoid this issue?
This is clearly a browser issue, although i'm not sure what would be the expected bahaviour.
The problem is that when you have a radio group, the keyboard goes to the selected element. If this element is disabled, then the focus will jump the whole radio group even if the other one are not disabled.
One "fix" would be to avoid the problem by dissociating the radio buttons in two groups and relying on some javascript code to let them appear as a whole group. You can also reimplement the whole radio button feature by using aria role="radio" on 4 div elements.
It's also possible to ask and wait for the bug to be fixed.
I have seen it on several webpages (cannot recall where exactly atm) where I am able to check or uncheck checkboxes by clicking on the text in front of the checkbox. I know how to do it in JavaScript (create a span with onclick()) , but I want to know if there is any way I can do it without JavaScript.
You can achieve this functionality using label tag as given below.
<input type="checkbox" id="option">
<label for="option">Select this option</label>
I want the user to be able to select an image from a set of images. I want to do it in a way that is a) both part of a form element and b) works well for older browsers/browsers without javascript enabled.
I thought about overwriting the css to make a set of radio buttons display the images, but that looks like it's really hard to hide the bullet.
Another option was to overwrite the css in an option...select structure to display images, but that only worked on some browsers.
Is there any easy way to do this? Or should I create two options: one for browsers with Javascript and one for browsers without?
You could make the image part of a <label> for each radio button, and hide the radio button with visibility: hidden or something.
<label>
<img src="image1.png" alt="Some image" />
<input type="radio" name="image" value="1" />
</label>
… come to think of it, that’s pretty much the only way you can give a radio button an image, and it should work as expected. (Unless you were going to use background-image?)
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the For attribute for in an HTML tag?
I have been trying to find this out. What is the reason for using the "for=" when you use a label in HTML?
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
If it's needed then is there some equivalent in HTML 5 or is it the same?
It makes a click on the label focus the input element it is for.
In the example you posted, you simply click on the word Male or the radio button in order for it to get selected. Without this, you have a much smaller target to click...
If it's needed then is there some equivalent in HTML 5 or is it the same?
It is not required, but is good practice for labels that have a direct form element to focus on (it wouldn't make much sense for a label that doesn't have a counterpart on a form).
The syntax is the same for HTML 5.
For binds the <label> and the <input> field together. for should point to the id of the <input>. It is not actually needed, but it is useful for example on radio buttons, where the user can click the label to check the radio button, thus creating a larger click area and a better user experience.
You use for the same in way HTML5 as you do in HTML4 or XHTML or whatever you used before.
If you use the for attribute of the label, and set its value to the id of a related input element, most browsers will focus the input element when the label is clicked on. This is especially useful for small elements like checkboxes and radio buttons.