Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create Vertical Radio Button Group in html form without table tag

Tags:

html

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.

like image 477
John Avatar asked Aug 29 '12 10:08

John


People also ask

How do I create a radio button group in HTML?

Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group.

How do I put radio buttons side by side in HTML?

To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.


1 Answers

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>
like image 184
Chelsea Urquhart Avatar answered Sep 28 '22 05:09

Chelsea Urquhart