Estilizando Campos de Entrada e Botões de Envio com CSS
Visão Geral Rápida
Os campos de entrada e os botões de envio podem ser estilizados utilizando o seguinte código CSS:
/* Estilizando campos de entrada */
input[type="text"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
/* Estilizando botões de envio */
input[type="submit"] {
padding: 10px;
color: #fff;
background-color: #5cb85c;
cursor: pointer;
}
/* Efeito de hover para botões de envio */
input[type="submit"]:hover {
background-color: #449d44;
}
/* Efeito de foco para campos de entrada */
input[type="text"]:focus {
border-color: #66afe9;
}Basta copiar e colar esses trechos de código para dar ao seu formulário um design mais dinâmico. Sinta-se à vontade para ajustar os valores de propriedades como padding, border e background-color para se adequar ao seu conceito de design.
Estilização Específica: CSS Direcionado
Estilização Precisa Usando Seletores de Atributo
Os seletores de atributo permitem estilizar elementos específicos. O atributo type é utilizado para campos de texto:
input[type="text"] {
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
}Estilo de Foco para Chamar a Atenção
A pseudo-classe :focus destaca o campo de entrada ativo, chamando a atenção do usuário:
input[type="text"]:focus {
outline: none;
box-shadow: 0 0 3px #66afe9;
}Botão de Envio: Mais Que Apenas um Botão
Os botões de envio precisam de contraste, espaçamento e, possivelmente, um gradiente para atrair a atenção do usuário:
input[type="submit"] {
padding: 10px 15px;
border: none;
border-radius: 5px;
background-image: linear-gradient(to right, #57a0ee, #355f7c);
color: white;
text-transform: uppercase;
transition: background-color 0.25s;
}
input[type="submit"]:hover {
background-image: linear-gradient(to right, #355f7c, #57a0ee);
}Comparação Visual
Uma tabela de comparação para o estilo e comportamento dos campos de entrada e botões de envio:
| Campo de Entrada | Botão de Envio |
|---|---|
| Padding: 8px 10px | Padding: 10px 15px |
| Raio de Borda: 5px | Raio de Borda: 5px |
| Cor de Fundo: Branca | Cor de Fundo: Verde |
| Cor do Texto: Preta | Cor do Texto: Branca |
Note a consistência nos estilos (igual border-radius) e o contraste entre o campo de entrada e o botão.
Aumentando a Interatividade: Não Afaste os Usuários
Efeito de Hover: Interação do Usuário
O estado :hover guia os usuários através de uma interface acolhedora.
Elemento de Botão: Ampla Gama de Funcionalidades
Usar a tag <button> em vez de <input type="submit"> oferece maiores capacidades de estilização, permitindo que você adicione ícones e imagens.
Rótulos: Simplicidade e Clareza
Rótulos bem estilizados ajudam os usuários a navegar com mais facilidade:
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}Design Responsivo: Adaptando-se a Qualquer Tela
Formulário Adaptável: Flexibilidade de Exibição
Use unidades relativas (%, em, rem) para otimizar a exibição do formulário em diferentes dispositivos.
Consultas de Mídia: Responsividade Sem Esforço
As consultas de mídia ajudam a garantir a compatibilidade com qualquer tamanho de tela:
@media (max-width: 768px) {
input[type="text"], input[type="submit"] {
width: 100%;
box-sizing: border-box;
}
}Testes e Demonstração: Mostre Suas Habilidades com JSFiddle
O JSFiddle é perfeito para compartilhar feedback e melhorar seus resultados. Compartilhe seu trabalho e cresça junto com a comunidade!
Recursos Úteis
- Estilizando formulários web - Aprenda desenvolvimento web | MDN — Um guia de estilo para formulários do MDN.
- Formulários CSS — Um tutorial sobre estilização de formulários do W3Schools.
- Desenhando Formulários Web Eficientes: Estrutura, Entradas, Rótulos e Ações — Smashing Magazine — Melhores práticas para design de formulários da Smashing Magazine.
- Formulários Acessíveis e Bonitos – A List Apart — Criando formulários acessíveis e amigáveis ao usuário.
- Ganhe Dinheiro Escrevendo Tutoriais para Envato Tuts+ Design & Ilustração | Envato Tuts+ — Um artigo útil para dominar o design de formulários, apesar do título enganoso.