Menu
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.
477
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
