Positioning label and inputs in an html form

Question

Positioning label and inputs in an html form

Navigation

#1 by (0 votes)

0

Hello, I'm studying HTML5 and CSS3 and I'm trying to style it by performing the placement of the inputs / checkbox / combobox and their labels.

Suppose I have the following code:

<form>
    <label for="Input1" id="lbl1">Input 1</label>
<input id="Input1" type="text">

<label for="Input2" id="lbl2">Input 2</label>
<input id="Input2" type="text">

<label for="Input3" id="lbl3">Input 3</label>
<input id="Input3" type="text">

<label for="combobox1" id="lbl4">Combobox 1</label>
<select id="combobox1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<label for="combobox2" id="lbl5">Combobox 2</label>
<select id="combobox2">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<label for="Input4" id="lbl5">Input 4</label>
<input id="Input4" type="text">

<input type="checkbox" id="checkbox" value="selecionado"> <label for="checkbox" id="lbl6">Checkbox</label>

<label for="Input5"id="lbl7">Input 5</label>
<input id="Input5" type="text">
</form>

How do I make the page stand in this style:

html html5 css3

asked by anonymous 24.07.2017 / 23:48

1 answer

Ionic Push: Error: INVALID_SENDER - IONIC 2 Define an array as circular in JavaScript

score 0 · Accepted Answer

There are several solutions to this layout. One solution is to visualize the space in three columns and thus create three <div> , one for each column and the <div> side by side with display flex . Then it is necessary to place each of the elements that were in <form> in the appropriate column.

Example:

form {
  display:flex; /*O form tem os três divs logo é o que fica com o display flex*/
}

.coluna {
  padding:10px; /*cria um espaçamento para dentro nas colunas para não ficarem "coladas"*/
}

.coluna input, .coluna select {
  margin-bottom:20px; /*distanciar as caixas verticalmente dentro dos divs*/
}

<form>
  <div class="coluna"> <!-- aqui a coluna 1 -->
    <label for="Input1" id="lbl1">Input 1</label>
    <input id="Input1" type="text">
    
    <label for="combobox1" id="lbl4">Combobox 1</label>
    <select id="combobox1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <br>
    
    <label for="Input4" id="lbl5">Input 4</label>
    <input id="Input4" type="text">
    
    <label for="Input5"id="lbl7">Input 5</label>
    <input id="Input5" type="text">
  </div>
  
  <div class="coluna"> <!-- aqui a coluna 2 -->
    <label for="Input2" id="lbl2">Input 2</label>
    <input id="Input2" type="text">
    <label for="combobox2" id="lbl5">Combobox 2</label>
    <select id="combobox2">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <br>
    <input type="checkbox" id="checkbox" value="selecionado"> <label for="checkbox" id="lbl6">Checkbox</label>
  </div>
  
  
  <div class="coluna"> <!-- aqui a coluna 3 -->
    <label for="Input3" id="lbl3">Input 3</label>
    <input id="Input3" type="text">
  </div>
  
</form>