Vertical Radio Buttons

HTML & CSS
1

Am I breaking some unwritten rule of the Universe by having vertically positioned Radio Buttons on a form? :confused:

2

None that I’m aware. You’ll frequently find radio buttons laid out like that for a poll, for example.

3

Nope.

Except one of the commandments written by the horizontal radio button Gods. That’s a pretty serious offense.

1 Like
4

That is what I am trying to do, for example…

What is your favorite form of entertainment...
__ TV
__ Radio
__ Newspaper
__ Books
__ Magazines
__ Talking
5

I see a few personal-choice entertainment options not listed :wink: .

Radio buttons are fine. I know personally I have a hard time choosing ONE favorite thing but perhaps your client doesn’t want checkboxes.

6

What’s your poison?

No, here it has to be your ONE favorite thing.

BTW, any special tips/tricks I should know about the HTML or CSS for vertical Radio Buttons?

7

Not particularly. Just make sure all your items are accessible (label) but other than that nothing special.

This is a family friendly forum :wink: .

8

Hah!!

@RyanReese,

What are the best styles to make the Radio Buttons vertical?

Do I want to make each one display:block ?

Some other approach?

Sorry, I haven’t done CSS in a long time and it is not my strong point.

9

Ideally each radio will have a label, so the easiest would be doing this and making sure the label is display:block;

<label><input type="radio" name="car" value="car">Text</label>
10

Looking through my code-base, I found this for Gender - which is horizontal…

<label class="inlineRadioLabel" for="gender_opt1">
     <input id="gender_opt1" type="radio" name="gender" value="1" <?php echo (isset($gender) && $gender == "1") ? 'checked="checked"' : ''; ?>/>
     Male
</label>

Do I need a for in there?

Do I need a class in there?

11

[quote=“mikey_w, post:10, topic:116294”]
Do I need a for in there?
[/quote]The input is nested inside, so no. You could remove that if you want. If it was <label></label><input> then you would need the for attribute.

Depends; what does the class do? Anything important? Labels are inline by default so I’m not surprised that is inline.

1 Like
12

Okay, thanks.

According to FireBug, that class just says display:inline-block, padding: 0;

I guess the answer is, “It depends (on whether you can style it just using < label > or if you need a class to distinguish it)”

Right?

13

Yeah I mean it just depends on what you want.

Inline-block is basically like display:inline; but you get some functionality like setting paddings, widths, etc, etc. Also keeping the shrink-to-fit behavior that is unlike block elements.

If all elements will be vertical you could just set a class on the form and do:

.my-form label
{
  display:block;
}

You have many options; choose something adn then come back if you feel like you want a review :slight_smile: .

1 Like
14

Should I wrap my Radio Buttons in something?

When I look back at my code for Gender, I just had this…

<!-- Gender -->
<label for="gender">Gender:</label>                        
<label class="inlineRadioLabel" for="gender_opt1">
  <input id="gender_opt1" type="radio" name="gender" value="1" <?php echo (isset($gender) && $gender == "1") ? 'checked="checked"' : ''; ?>/>
   Male
</label>
                        
<label class="inlineRadioLabel" for="gender_opt2">
   <input id="gender_opt2" type="radio" name="gender" value="2" <?php echo (isset($gender) && $gender == "2") ? 'checked="checked"' : ''; ?>/>
    Female
</label>
15

Your radio buttons are already wrapped in labels. What do you mean?

16

It seems to me that you are supposed to wrap things like Radio Buttons in some HTML “group” thing… :confused:

17

You mean a fieldset?

18

No, isn’t there some “Option Group” thing too?

19

That is for drop downs, but there may be one for radio buttons too…

20

Optgroup is/are only for selects.