Programando Soluções

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?

Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok
Privacy Policy