Question 43581 in Html Question posted in
Some basic documentation can be found here.

How do I use HTML or CSS to put checkboxes before the text question?

I am trying to create a webform. The checkboxes are coming after the label and therefore all the checkboxes are not lined up. How can I get the checkboxes to come before the text?

<label for="needs">Please select if you have: </label>
<p>
  <p>
    <label for="monitor" class="checkboxes">Monitor(s)
            <input  id="monitor" name="monitor" type="checkbox" value="1" /><br>

            </label>
    <label for="Keyboard" class="checkboxes">Keyboard 
            <input  id="Keyboard" name="Keyboard" type="checkbox" value="1" /><br>
            </label>
    <label for="Mouse" class="checkboxes">Mouse
            <input  id="Mouse" name="Mouse" type="checkbox" value="1" /><br>
            </label>
    <label for="Dock" class="checkboxes">Docking Station
            <input  id="Dock" name="Dock" type="checkbox" value="1" /><br>
            </label>
    <label for="webcam" class="checkboxes">Webcam
            <input  id="webcam" name="webcam" type="checkbox" value="1" /><br>
            </label>
    <label for="Printer" class="checkboxes">Printer 
            <input  id="Printer" name="Printer" type="checkbox" value="1" /><br>

            </label>
Tags:

2

Answers


  1. 0

    Move the checkbox inputs before the labels.

    <label for="needs">Please select if you have: </label>
<p></p>
<label class="checkboxes"><input id="monitor" name="monitor" type="checkbox" value="1" /> Monitor(s)</label><br>
<label class="checkboxes"><input id="Keyboard" name="Keyboard" type="checkbox" value="1" /> Keyboard</label><br>
<label class="checkboxes"><input id="Mouse" name="Mouse" type="checkbox" value="1" /> Mouse</label><br>
<label class="checkboxes"><input id="Dock" name="Dock" type="checkbox" value="1" /> Docking Station</label><br>
<label class="checkboxes"><input id="webcam" name="webcam" type="checkbox" value="1" /> Webcam</label><br>
<label class="checkboxes"><input id="Printer" name="Printer" type="checkbox" value="1" /> Printer</label><br>
    Login or Signup to reply.
  2. 0

    place the label after the input,

    In this case, there is no need for the input to be inside the label, as shown here

    if necessary, use a div to wrap the label and the input as in the example here.

    div {
  display: flex;
}
    <label for="needs">Please select if you have: </label>
<p><p>

<div>
  <input  id="monitor" name="monitor" type="checkbox" value="1" />
  <label for="monitor" class="checkboxes">Monitor(s)</label>
</div>

<div>
  <input  id="Keyboard" name="Keyboard" type="checkbox" value="1" />
  <label for="Keyboard" class="checkboxes">Keyboard</label>
</div>

<div>
  <input  id="Mouse" name="Mouse" type="checkbox" value="1" />
  <label for="Mouse" class="checkboxes">Mouse</label>
</div>

<div>
  <input  id="Dock" name="Dock" type="checkbox" value="1" />
  <label for="Dock" class="checkboxes">Docking Station</label>
</div>

<div>
  <input  id="webcam" name="webcam" type="checkbox" value="1" />
  <label for="webcam" class="checkboxes">Webcam</label>
</div>

<div>
  <input  id="Printer" name="Printer" type="checkbox" value="1" />
  <label for="Printer" class="checkboxes">Printer</label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search