How to create: inline forms

Página anterior Formulário emergente
Próxima página Limpar caixa de entrada

Learn how to create responsive inline forms using CSS.

Responsive inline forms

Adjust the browser window size to see the effect (labels and inputs will stack, not side by side on smaller screens):

How to create inline forms

Step 1 - Add HTML:

Use the <form> element to handle input. You can learn more about this in our PHP tutorial.

<form class="form-inline" action="/action_page.php">
  <label for="email">E-mail:</label>
  <input type="email" id="email" placeholder="Insira o e-mail" name="email">
  <label for="pwd">Senha:</label>
  <input type="password" id="pwd" placeholder="Insira a senha" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Lembrar-me
  </label>
  <button type="submit">Enviar</button>
</form>

Segundo passo - Adicionar CSS:

/* Definir estilo do formulário - itens exibidos horizontalmente */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
/* Adicionar margem externa a cada rótulo */
.form-inline label {
  margin: 5px 10px 5px 0;
}
/* Definir estilo do campo de entrada */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
/* Definir estilo do botão de envio */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}
.form-inline button:hover {
  background-color: royalblue;
}
/* Adicionar responsividade - na tela com largura menor que 800 pixels, os controles do formulário são exibidos verticalmente em vez de horizontalmente */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

Experimente você mesmo