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:
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