Using HTML Checkbox as a Radio Button Alternative

Feedback


Question:

To fulfill the requirement, I must include three types of questions – one with
RADIO BUTTON
options, another with checkboxes, and the third with a textarea. However, the challenge is to place all these questions on a single line along with their respective options. While I managed to use a table to achieve this, the issue is that I am unable to align the options (
radio button
, checkboxes, and the textarea) beneath their corresponding questions.

This is what I am receiving:

 Your question here: choice 1 choice 2. ques. here: c1, c2, c3, c4

I need this:

Your question here:       
Choice 1                                        
Choice 2

In that format, the other two questions are positioned adjacent to the mentioned question.

Below is the HTML code I am currently utilizing.






Your question here: Choice 1 Choice 2 Your question here: Choice 1 Choice 2 Choice 3 Choice 4 Your question here:

I attempted to utilize ‘for each’ for the available options, but it resulted in showing both the queries and solutions in a vertical manner, which is not my desired outcome. This is causing me frustration since I believe the solution is uncomplicated. Is there anyone who can share the fix for this issue?


Solution 1:

While I concur with Nader’s response, regarding your inquiry, the Choices and Questions are arranged horizontally because they are located in separate cells within a single row. This creates a new column. If you were to add a second row with a single cell for all the choices, the layout would resemble what you are aiming for.

Your question here: Your question here: Your question here:
Choice 1
Choice 2
Choice 1
Choice 2
Choice 3
Choice 4

To enhance the visual appeal, I incorporated some styling to create sufficient spacing. To better visualize the arrangement, outlining the tables’ borders would be beneficial.


Solution 2:


My suggestion would be to opt for divs instead of tables as I don’t believe tables are the ideal solution. To implement this, you can create three divs with a width of 33% each, and float them left. These divs can then be used to display the questions and answers.

Question 1
Choice 1 Choice 2 Choice 3
Question 2
Choice 1 Choice 2 Choice 3
Question 3
Choice 1 Choice 2 Choice 3


Solution 3:


In my opinion, if you are considering using tables as a solution, then this might be what you need.



Your question here: Your question here: Your question here:
Choice 1
Choice 2
Choice 1
Choice 2
Choice 3
Choice 4

Frequently Asked Questions

Posted in Css