Question

How to create vertical Radio Button Group instead of horizontal button group in an html form?

I don’t want to use a table for this. Is there any property/attribute available?

Any type of help/suggestion would be appreciated, thanks.

Answer 1

There are three ways you can do it: two with CSS or 1 with oldschool html:

1) The preferred way would be to use a CSS class. (ie add class=”block” to the element and then .block {display:block} to your stylesheet.

2)Inline styles: Add style=”display:block” to the element.

3)HTML: Add a hard break (br) element after the radio element (or enclose the elements each in a div or p element.)

Example:

<style type="text/css">
   .block {
      display: block;
   }
</style>

…

<form>
<label class="block"><input type="radio" name="radgroup" value="A">Option A</label>
<label class="block"><input type="radio" name="radgroup" value="B">Option B</label>
<label class="block"><input type="radio" name="radgroup" value="C">Option C</label>
<label class="block"><input type="radio" name="radgroup" value="D">Option D</label>
</form>