Radio button selection with table layout

Question

Radio button selection with table layout

I am designing a quiz template with radio buttons. However, I would like them to be stacked vertically instead of side by side.

Why doesn't the <br/> tag work? I'm having trouble understanding it. Can someone assist me?

Here is my code:

http://jsfiddle.net/yyw2A/


<tr>
  <td colspan="2">
    <b>"Men are basically little piglets... Males are biologically driven to go out and hunt giraffes."</b>
  </td>
</tr>

<tr id="0">
    <td onmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,0)"><input type="radio" name=que_1 value="1" />Newt Gingrich</td>
    <br>
    <td onmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,1)"><input type="radio" name=que_1 value="0" />Dwight Schrute</td>
    <br>
    <td onmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,1)"><input type="radio" name=que_1 value="0" />Dwight Schrute</td>
    <br>
    <td onmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,1)"><input type="radio" name=que_1 value="0" />Dwight Schrute</td>
    <br>
</tr>

<tr id="correct" style="display:none">
  <td colspan="2">Correct! This quote is from a controversial lecture on the military that Gingrich delivered while teaching at Reinhardt College. He also made comments about women in combat missions.</td>
</tr>

<tr id="wrong" style="display:none;">
     <td colspan="2">Incorrect. This quote is from a controversial lecture on the military that Gingrich delivered while teaching at Reinhardt College. He also made comments about women in combat missions.</td>
</tr>

html css

Answer 1

Answer №1

The br tag should not be placed within tr elements. To ensure that each checkbox appears on a separate line, you can group them all inside the same td element and enclose each input within a label:

<td ...>
    <label>
        <input type="radio" name=que_1 value="1" />
        Newt Gingrich<br>
    </label>
    <label>
        <input type="radio" name=que_1 value="0" />
        Dwight Schrute<br>
    </label>
    ...
</td>

In order to handle mouse events, it's recommended to attach them to each label instead of the td element:

<label onmouseover="checkSelect(this)"
       onmouseout="setBGDefault(this)"
       onclick="applySelect(this,0)">
    ...
</label>

If desired, you can eliminate the br tag using CSS styling:

td label {
    display:block;
}

Check out this JSFiddle demo for reference.

Answer 2

The br tag should not be placed within tr elements. To ensure that each checkbox appears on a separate line, you can group them all inside the same td element and enclose each input within a label:

<td ...>
    <label>
        <input type="radio" name=que_1 value="1" />
        Newt Gingrich<br>
    </label>
    <label>
        <input type="radio" name=que_1 value="0" />
        Dwight Schrute<br>
    </label>
    ...
</td>

In order to handle mouse events, it's recommended to attach them to each label instead of the td element:

<label onmouseover="checkSelect(this)"
       onmouseout="setBGDefault(this)"
       onclick="applySelect(this,0)">
    ...
</label>

If desired, you can eliminate the br tag using CSS styling:

td label {
    display:block;
}

Check out this JSFiddle demo for reference.

Answer 3

Answer №2

Instead of using a table for each radio button, consider using an unordered list (ul) with each radio button in a list item (li). Here is an example:

<ul id='0'>
   <lionmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,0)"><input type="radio" name=que_1 value="1" />Newt Gingrich </li>
     .
     .
     .
</ul>

If you prefer to use a table, you can place all radio buttons in one table cell (td) and add a br tag after each one.

Alternatively,

You can wrap each radio button in a table row (tr).

Answer 4

Instead of using a table for each radio button, consider using an unordered list (ul) with each radio button in a list item (li). Here is an example:

<ul id='0'>
   <lionmouseover="checkSelect(this)" onmouseout="setBGDefault(this)" onclick="applySelect(this,0)"><input type="radio" name=que_1 value="1" />Newt Gingrich </li>
     .
     .
     .
</ul>

If you prefer to use a table, you can place all radio buttons in one table cell (td) and add a br tag after each one.

Alternatively,

You can wrap each radio button in a table row (tr).

Answer 5

Answer №3

The reason for this issue is because the radio buttons are placed within a table structure. Each radio button is part of a column, which causes them to collapse if not properly formatted. To resolve this, each input should be enclosed in a tr tag as shown below:

<tr><td><input id="answer_1" type="radio" /><label for="answer_1">Answer 1</label></td></tr>
<tr><td><input id="answer_2" type="radio" /><label for="answer_2">Answer 2</label></td></tr>
<tr><td><input id="answer_3" type="radio" /><label for="answer_3">Answer 3</label></td></tr>

Instead of using a table, it is recommended to remove it entirely and use the following format:

<input id="answer_1" type="radio" /><label for="answer_1">Answer 1</label><br>
<input id="answer_2" type="radio" /><label for="answer_2">Answer 2</label><br>
<input id="answer_3" type="radio" /><label for="answer_">Answer 3</label><br>

Using the label element with inputs like checkboxes and radios not only improves accessibility for screen readers but also allows users to select the option by clicking on the text. You can test it out with this jsfiddle example: http://jsfiddle.net/8DLXw/

Answer 6

The reason for this issue is because the radio buttons are placed within a table structure. Each radio button is part of a column, which causes them to collapse if not properly formatted. To resolve this, each input should be enclosed in a tr tag as shown below:

<tr><td><input id="answer_1" type="radio" /><label for="answer_1">Answer 1</label></td></tr>
<tr><td><input id="answer_2" type="radio" /><label for="answer_2">Answer 2</label></td></tr>
<tr><td><input id="answer_3" type="radio" /><label for="answer_3">Answer 3</label></td></tr>

Instead of using a table, it is recommended to remove it entirely and use the following format:

<input id="answer_1" type="radio" /><label for="answer_1">Answer 1</label><br>
<input id="answer_2" type="radio" /><label for="answer_2">Answer 2</label><br>
<input id="answer_3" type="radio" /><label for="answer_">Answer 3</label><br>

Using the label element with inputs like checkboxes and radios not only improves accessibility for screen readers but also allows users to select the option by clicking on the text. You can test it out with this jsfiddle example: http://jsfiddle.net/8DLXw/

Radio button selection with table layout

Answer №1

Answer №2

Answer №3

Similar questions

Get rid of the margins on your Wordpress theme

Centered on the screen are the input field and corresponding label

Error encountered when attempting to trigger a Bootstrap dropdown within a designated div

Tips for overlaying text onto a MaterialUI icon

Eliminating the standard padding on a Vuetify v-app-bar

Can you guide me on where to find the login with Facebook button on this site?

Why won't my button's text resize?

Customize the color of the horizontal line in React using dynamic properties

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

Tips for displaying animations only the first time using HTML and CSS:

Restrict Bootstrap Column Width to Container Boundary

Interactive text that changes when hovered over in an HTML document

Is there a solution to move my navbar that is frozen halfway on the screen?

The selection button's threshold

Determining the width of an element in terms of percentage

Traversing tables with JQuery's nextUntil function

Altering the character by striking a key

Modal - sending data through URL

Aligning text in the middle of a div vertically

Divide the PHP code into separate files