You are currently viewing Como estilizar formulário HTML com CSS
formulario

Como estilizar formulário HTML com CSS

Introdução

Os formulários estão presentes em quase toda página ou sistema web.

Tendo isso em vista, é importante saber como estilizar, fazer validações, máscaras de campos, melhorar acessibilidade e entre outros.

Todos esses itens podem deixar o seu formulário melhor e mais profissional.

Nesse post você vai ver como criar e estilizar um formulário com HTML e CSS.

Preview

O projeto final irá ficar assim:

formulario

HTML

Primeiramente, vamos começar com o HTML, que será a estrutura do documento.

Para iniciar, vamos criar um arquivo chamado index.html colocar algumas tags de estrutura base.

Caso você esteja utilizando o VsCode, basta digitar html, selecionar a opção “html:5” e apertar “tab” que ele cria essa estrutura.

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulário com HTML e CSS</title>

  <link rel="stylesheet" href="style.css" />
</head>

<body>
<!-- o conteúdo vai ficar aqui -->
</body>

</html>

Repare que na linha 10, fiz a referência a um arquivo CSS, para linkar o arquivo de estilos com o HTML, já vamos criar esse arquivo.

Esta estrutura base conta com o cabeçalho, utilizando a tag head e também o corpo do documento com a tag body, e é onde ficará o formulário.

Dando sequência ao conteúdo principal, o form vai ficar dentro de uma div com a classe container, que irá centralizar o conteúdo, irá ter um titulo e depois a tag do form.

Dentro do form, será composto por linhas que vão ter as classes col-*, e cada linha vai ter um input que será o campo em si, e um span que é um texto relacionado ao campo.

E no final do form tem a tag do botão, que será o botão para “enviar” os dados.

Eu costumo colocar os nomes das classes e códigos em inglês, normalmente as empresas adotam isso como padrão, então já acostumei, mas caso queira, você pode substituir para colocar em português.

O index.html com o código completo vai ficar assim:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulário com HTML e CSS</title>

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container">
    <div class="row">
      <h1>Formulário com HTML e CSS</h1>
    </div>
    <form>
      <div class="row input-container">
        <div class="col-xs-12">
          <div class="styled-input wide">
            <input type="text" id="nome" name="nome" autocomplete="off" required />
            <label for="nome">Nome</label>
          </div>
        </div>
        <div class="col-md-6 col-sm-12">
          <div class="styled-input">
            <input type="text" id="email" name="email" autocomplete="off" required />
            <label for="email">E-mail</label>
          </div>
        </div>
        <div class="col-md-6 col-sm-12">
          <div class="styled-input phone-input">
            <input type="text" id="telefone" name="telefone" autocomplete="off" required />
            <label for="telefone">Telefone</label>
          </div>
        </div>
        <div class="col-xs-12">
          <div class="styled-input wide">
            <textarea id="mensagem" name="mensagem" autocomplete="off" required></textarea>
            <label for="mensagem">Mensagem</label>
          </div>
        </div>
        <div class="col-xs-12">
          <button type="submit" class="btn-lrg submit-btn">Enviar mensagem</button>
        </div>
      </div>
    </form>
  </div>

</body>

</html>

CSS

A próxima etapa é começar a estilizar, então agora vamos criar o arquivo style.css, que já vinculamos no head do documento HTML.

Primeiramente vamos estilizar o documento principal, e o texto do titulo, com esse código:

//style.css
body {
  background-color: #444442;
  padding-top: 30px;
}

h1 {
  font-family: 'Poppins', sans-serif, 'arial'; //estilo de fonte
  font-weight: 600; //peso da fonte
  font-size: 48px; //tamanho da fonte
  color: white;
  text-align: center;
}

Agora vamos colocar o estilo para os campos, essa é uma parte maior do código, porque os campos tem um efeito de ao clicar em cima por exemplo ali do campo “nome”, a descrição “nome” irá subir e dar espaço para o usuário digitar.

//style.css
input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
  font-size: 0.75em; //tamanho da fonte
  color: #999;
  top: -5px;
  transition: all 0.225s ease; //efeito de transição para fazer a animação ficar mais suave
} //estilo para fazer "subir" a descrição

.styled-input {
  float: left;
  width: 293px;
  margin: 1rem 0;
  position: relative;
  border-radius: 4px;
}

.styled-input label {
  color: #999;
  padding: 1.3rem 30px 1rem 30px; //espaçamento interno
  position: absolute; //posicionamento da caixa
  top: 10px;
  left: 0;
  transition: all 0.25s ease;
} //estilo da caixa de fora do campo

.styled-input.wide { 
  width: 650px;
  max-width: 100%;
}

input,
textarea {
  padding: 30px;
  border: 0;
  width: 100%;
  font-size: 1rem;
  background-color: #2d2d2d;
  color: white;
  border-radius: 4px;
} //estilo padrão do campo

input:focus,
textarea:focus { outline: 0; } //tira uma borda adicional quando o campo for focado

input:focus ~ span,
textarea:focus ~ span {
  width: 100%;
  transition: all 0.075s ease;
}

textarea {
  width: 100%;
  min-height: 15em;
}

.input-container {
  width: 650px;
  max-width: 100%;
  margin: 20px auto 25px auto;
}

.phone-input {
  float: right;
}

Agora todos os campos já estarão estilizados e nos lugares corretos.

A próxima parte é estilizar o botão de enviar mensagem.

O código é relativamente mais simples, tem menos estilo, e conta com um pequeno efeito ao passar o mouse:

//style.css
.submit-btn {
  padding: 7px 35px; //adiciona espaçamento interno
  border-radius: 60px; //faz as bordas ficarem arredondadas
  display: inline-block;
  background-color: #4b8cfb;
  color: white;
  font-size: 18px;
  cursor: pointer; //faz o cursor virar a "mãozinha" ao passar o mouse
  transition: all 300ms ease;
  outline: none; //remove a borda padrão ao ser clicado
  border: none; //remove a borda padrão do botão
}

.submit-btn:hover {
  transform: translateY(1px); //efeito de "subir" ao passar o mouse por cima, é um efeito bem leve, vai mover só de 1px
}

Por fim, tem também uma estilização para caso esteja em telas menores ou dispositivos móveis.

A um estilo só pra isso utilizando media queries do CSS, para fazer todos os campos ficarem em linha nesses dispositivos.

//style.css
@media only screen and (max-width: 768px){
  .styled-input {
      width:100%;
  }
}

@media (max-width: 768px) {
  .submit-btn {
      width:100%;
      float: none;
      text-align:center;
  }
}

Código fonte

O código fonte do projeto está no meu CodeSandbox.

Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.

Conclusão

Pronto, com esse código completo você terá um formulário HTML e estilizado com CSS.

É interessante que você pegue esse código e tente fazer mudanças nele, mudar as cores, fonte, tamanhos, tudo que conseguir tentar será bom para aprender ainda mais.

Esse é apenas um exemplo, quanto mais formulários você treinar e estilizar, será melhor para desenvolver seu aprendizado, você vai conseguir se adaptar a mais casos, layouts e treinar os outros pontos também, como validações, máscaras, acessibilidade e entre outros.

Referências

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Projeto referência

Este conteúdo te ajudou de alguma forma?