Formulários Bonitos com CSS: O Guia para Estilizar Inputs

 Olá, equipa! Na aula passada, construímos a estrutura do nosso formulário de contato. Ele funciona, mas sejamos honestos: é feio. Ninguém se sente inspirado a preencher um formulário com a aparência dos anos 90. A boa notícia é que não precisa de ser assim.

Hoje, vamos pegar nesse esqueleto HTML e vesti-lo com o poder do CSS. Vou mostrar-vos como estilizar cada parte do nosso formulário — os campos de texto, as etiquetas e os botões — para que ele fique limpo, moderno e convidativo.

Parte 1: A Estrutura Base e o Espaçamento

Primeiro, vamos dar ao nosso formulário um contentor e algum espaço para respirar. No nosso estilos.css, vamos adicionar o seguinte:

CSS

form {
    max-width: 600px; /* O formulário não ficará demasiado largo em ecrãs grandes */
    margin: 40px auto; /* Centra o formulário na página com margem em cima/baixo */
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

form div {
    margin-bottom: 15px; /* Cria um espaço vertical entre cada campo do formulário */
}

Parte 2: Estilizando as Etiquetas e os Campos de Texto (label e input)

Agora, vamos fazer com que os campos e as suas descrições pareçam profissionais.

CSS

label {
    display: block; /* Faz a etiqueta ocupar a sua própria linha */
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

/* Este seletor aponta para os inputs de texto, email e a textarea ao mesmo tempo! */
input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* Faz os campos ocuparem toda a largura do formulário */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif; /* Usa a nossa fonte bonita */
}

Parte 3: Dando Feedback ao Utilizador com :focus

Queremos que o utilizador saiba exatamente em que campo está a escrever. Para isso, usamos a pseudo-classe :focus.

CSS

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none; /* Remove a borda azul padrão do navegador */
    border-color: #007bff; /* Muda a cor da borda para o nosso azul */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Adiciona um brilho subtil */
}

Parte 4: O Botão de Ação

O botão padrão é a coisa mais feia de um formulário. Vamos transformá-lo num botão que dá vontade de clicar.

CSS

button[type="submit"] {
    width: 100%;
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer; /* Muda o cursor para uma "mãozinha" */
}

/* Efeito ao passar o rato por cima */
button[type="submit"]:hover {
    background-color: #0056b3;
}

Conclusão

Que diferença! Com umas quantas regras de CSS, transformámos um formulário básico e feio num componente com aspeto profissional e agradável de usar. Aprendemos a usar seletores específicos como input[type="text"] e a dar feedback visual com :focus.

Reparaste no efeito subtil quando passas o rato por cima do nosso novo botão? A cor muda instantaneamente. Mas e se pudéssemos fazer essa mudança acontecer de forma suave e elegante? Na próxima aula, vamos aprender a controlar o tempo com as Transições em CSS!