I have to build a form that has radio-type input to the right of the text (text-label) without changing the order of input-tag and label tag.

As the id's for input and label are being set dynamically and maybe due to this reason changing the order is not working instead the radio button is getting vanished. But I am not finding a way to do it.

Below is the code I wrote and the image of the desired outcome.

My code outcome:

Code below (it's a ruby on rails syntax):

<div >
  <input type="radio" id="<%=qid%>op1" name="<%=qid%>" value="<%= @questions[qid]["option1"] %>">
    <label  for="<%=qid%>op1">A. <%= @questions[qid]["option1"] %></label>
  </div>

And the desired style I want to give

I also tried writing the input[type"radio"] after the label-tag but it's still not happening. I also tried applying float:right css to input[type="radio] but it's not working either.

CodePudding user response：

you need to place the label before input in HTML as

 <div  style="user-select: auto;">
    <label  for="Q2op2" style="user-select: auto;">B. Owners</label>
    <br style="user-select: auto;">
    <input type="radio" id="Q2op2" name="Q2" value="Owners" style="user-select: auto;">&nbsp;
  </div>

and add some CSS

.options{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

CodePudding user response：

Always place the tags in the order that you want to view them. As you need text to appear first here, place the input tag first and then the radio button. As you need spacing between the two components, make the div container flex and space them evenly.

<div  style="user-select: auto;" style="display: flex; justify-content: space-evenly;">
    <label  for="Q2op2" style="user-select: auto;">B. Owners</label>      
    <input type="radio" id="Q2op2" name="Q2" value="Owners" style="user-select: auto;">&nbsp;
</div>

CodePudding user response：

• Class options would be better as singular option, and option-* for the children elements of your atom.
• You could use <label> as the wrapper an therefore no need to use for and id attributes
• Don't use inline style
• Use display flex on the label parent
• Use margin-right: auto on the SPAN to distance it from the INPUT element

.option {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  padding: 1rem;
}

.option-value {
  margin-right: auto;
}

<label >
  <span >B. Owners</span>
  <input  type="radio" name="Q2" value="Owners">
</label>

Tip:
when in need to change the markup order visually, use CSS order (if in a grid or flex context)

.option {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  padding: 1rem;
}

.option-value {
  margin-right: auto;
  order: -1;
}

<label >
  <input  type="radio" name="Q2" value="Owners">
  <span >B. Owners</span>
</label>