So I'm starting with angular and I would like filter a list depending on which div is currently selected.
They are selected by being cliked. I suppose this is exactly how radio buttons behave but they are ugly and I would like to have a completely designed div (not just label) which is to be clicked.
I've read that you can add label with for attribute and hide the radio button to have something similar. I suppose what I would like is to be able to add for on a div to bind it.
What would be the best way to achieve this The Angular Way ?
You will find your solution at angular ui bootstrap goto buttons sections
I need to have two radio buttons.
The first is called "Use an existing" and the second is called "Create new scene".
There should be hidden input under radios and if I check the "Create new scene" radio, there should appear the input. If i check the first radio "Use an existing", the input should hide again.
My question is: Is there any way to achieve that by bootstrap or I have to use JQuery?
Yes, you would have to use JQuery, there is not a built in function of Bootstrap do that.
Bootstrap is built on JQuery, so you essentially are always using JQuery.
I am working on a form that is in a format like:
HOME CELL
PHONE_NUM TEXT_INPUT TEXT_INPUT2
Why can't TEXT_INPUT and TEXT_INPUT2 be listed in the for with &&?
The benifit of having the label is to keep the input fields aligned correctly on the same row.. is there any other benifit?
Adding a for attribute to a label makes it so clicking on the label will put focus on the input (assuming it's a text input). Therefore having two ids in a single for attribute doesn't make sense: the browser wouldn't know which input to put focus on.
for attributes also have nothing to do with styling and positioning. You should be able to keep your form looking the same without a for attribute.
There ARE other benefits - The <label>provides a usability improvement for mouse users in that when properly bound to the <input> it will toggle the <input>. Basically it gives mouse users a bigger target to hit. Eg they can click the <label> in addition to the <input> or control to give it focus.
I am wondering if there is a CSS-only way to style those radio buttons of a radio button group that are not clicked after one of them was clicked.
Let's rephrase to clarify. I have a radio button group. Initially, all buttons are in the default state with no button selected. Now I click one radio button so that one now becomes selected. At this point, is there a way to give the other non-selected buttons a different style?
Please note that I don't need help with custom styling radio buttons. I know how to do that. This is specifically about the use case described above.
No, there is no attribute that the CSS can be linked to. There is only checked and "not checked". You'll have to do do some JavaScripting to get this done.
Well, I curious as to the nature of Radio groups and dropdown lists in HTML. I have found that radio buttons are difficult to style but I would like to style my elements for required fields. I asked a previous question regarding styling radio buttons and giving a border color like you can do with text boxes, example:
<input type="text" style="border-color:#FF0000">
<input type="radio" style="border-color:#FF0000">
applying style to a radio button to change the border color does not work.
My Question is there any reason why I shouldnt use a drop down list insead of a radio group?
Drop down lists require more work (on the part of the user) to find out what options are available … and are as twiddly to style as radio buttons anyway.
You might try setting the border colour on the fieldset containing the radio group instead. Remember to also use some other method for indicating required fields though.
A radio group will take more room on your form than a drop down list, and of course the controls look different in appearance. My rule of thumb is if there are more than three or four choices, use a drop down list.
Majority of the users (includes mostly people with no computer background and elderly people) are really very familiar with radio buttons to answer questions of the type yes/no , male/female etc. For the convenience of the users use a radio button for such questions.
With Drop down lists the available options are not visible to the user until they interact (click it). With radio buttons all of the available options are in front of the user. While both allow you to limit the selection choices to just one option, I find that users can decide which option they want quicker with radio buttons. If it is more than 5 options though, I would reconsider.
Related question on ux.stackexchange.
Use a drop-down list for when one choice is regarded as "more important" and the alternatives are okay as being hidden from the user, for example, selecting a state in the U.S. A user lives in one state, and the alternative choices don't matter. When the user comes to the form item, they know exactly what to choose without looking at the alternatives.
On the other hand, use radio buttons for when the choices are all equally important, or the user needs to see all of them before making a selection, for example, rating on a scale from 1 to 5, or choosing an answer choice on a multiple-choice problem.
Another factor to take into account is screen real-estate: you wouldn't want radio buttons for selecting one of 50 states, and you probably wouldn't want a drop-down list for selecting a sex (Male or Female). Depending on your design and philosophy, this factor may or may not trump the factors stated above.