Como Estilizar Formulários com CSS

Como Estilizar Formulários com CSS

Neste post, aprenderemos como estilizar elementos de formulários com CSS (input, textarea, button, select) para criar formulários atraentes.

Tutorial CSS Básico
Tutorial CSS Básico

Introdução : Como Estilizar formulários com CSS

Formulários são elementos essenciais em muitos sites, permitindo a interação dos usuários. No entanto, formularios padrão muitas vezes não são visualmente atraentes. Com o CSS, você pode transformar formulários simples em elementos estilizados e modernos. Neste post, vamos mostrar como estilizar elementos de formulário como input, textarea, button e select para criar uma experiência de usuário mais agradável e envolvente.

Estilizando Campos de Entrada (input)

Os campos de entrada são os elementos mais comuns em formulários. Vamos começar estilizando diferentes tipos de input.

Exemplo Básico

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  border-color: #008CBA;
  box-shadow: 0 0 5px rgba(0, 140, 186, 0.5);
  outline: none;
}

Explicação: O estilo define a largura, padding, margem, borda e borda-radius para os campos de entrada. O efeito de foco (:focus) adiciona uma borda colorida e sombra para destacar o campo ativo.

Estilizando Textareas

As áreas de texto (textarea) são semelhantes aos campos de entrada, mas geralmente maiores. Vamos aplicar um estilo semelhante ao input.

Exemplo Básico

textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea:focus {
  border-color: #008CBA;
  box-shadow: 0 0 5px rgba(0, 140, 186, 0.5);
  outline: none;
}

Explicação: Definimos a largura, altura, padding, margem, borda e borda-radius para o textarea. O efeito de foco é o mesmo usado para os campos de entrada.

Estilizando Botões

Botões (button) são elementos interativos cruciais em formulários. Vamos aplicar estilos para torná-los mais atraentes.

Exemplo Básico

button {
  background-color: #008CBA;
  color: white;
  padding: 10px 20px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #006f8c;
}

button:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 140, 186, 0.5);
}

Explicação: O estilo define a cor de fundo, cor do texto, padding, margem, borda-radius e cursor. Adicionamos um efeito de hover para mudar a cor de fundo ao passar o mouse sobre o botão e um efeito de focus para destacar o botão quando está ativo.

Estilizando Campos de Seleção (select)

Os campos de seleção (select) podem ser estilizados para combinar com outros elementos do formulário.

Exemplo Básico

select {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  box-sizing: border-box;
}

select:focus {
  border-color: #008CBA;
  box-shadow: 0 0 5px rgba(0, 140, 186, 0.5);
  outline: none;
}

Explicação: Definimos a largura, padding, margem, borda, borda-radius e a cor de fundo para o select. O efeito de foco é similar aos usados anteriormente.

Exemplo Completo de Formulário Estilizado

Vamos combinar todos os elementos estilizados em um formulário completo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulário Estilizado</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    form {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 300px;
    }

    input[type="text"], input[type="email"], input[type="password"], textarea, select {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
      border-color: #008CBA;
      box-shadow: 0 0 5px rgba(0, 140, 186, 0.5);
      outline: none;
    }

    button {
      background-color: #008CBA;
      color: white;
      padding: 10px 20px;
      margin: 10px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 100%;
    }

    button:hover {
      background-color: #006f8c;
    }

    button:focus {
      outline: none;
      box-shadow: 0 0 5px rgba(0, 140, 186, 0.5);
    }
  </style>
</head>
<body>
  <form>
    <label for="name">Nome</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Senha</label>
    <input type="password" id="password" name="password" required>

    <label for="message">Mensagem</label>
    <textarea id="message" name="message" rows="4"></textarea>

    <label for="country">País</label>
    <select id="country" name="country">
      <option value="br">Brasil</option>
      <option value="us">Estados Unidos</option>
      <option value="uk">Reino Unido</option>
    </select>

    <button type="submit">Enviar</button>
  </form>
</body>
</html>

Conclusão : Como Estilizar formulários com CSS

Estilizar formulários com CSS pode transformar elementos básicos em componentes visualmente atraentes e funcionais. Usando as técnicas e exemplos fornecidos neste post, você pode criar formulários que melhoram a experiência do usuário e se destacam visualmente.

Experimente aplicar essas dicas em seus projetos e veja como a aparência de seus formulários pode ser significativamente melhorada. Com um pouco de prática, você estará criando formulários elegantes e profissionais em pouco tempo!

💡 Gostou do conteúdo?

Apoie-nos: Siga, Curta, Comente e Compartilhe!

📲 Conecte-se com o WebMundi:

▶️ YouTube

▶️ Facebook

▶️ Instagram

▶️ LinkedIn

▶️ TikTok

👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!

🔗 Discord webmundi.com

Posts Similares