Como estilizar fieldset e legend com CSS

Escrito por ehow contributor | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como estilizar fieldset e legend com CSS
Fieldset e legend estilizados

Um elemento de formulário que te ajudará a organizar e dar um aspecto limpo a um formulário é o fieldset. Um formulário pode conter mais de um fieldset. Por exemplo: pode haver um fieldset com elementos de formulário para informações pessoais de usuário (nome, email e outros detalhes); e outro fieldset pode coletar informações sobre um assunto, produto ou serviço. Dependendo do propósito do formulário, fieldsets podem ajudar a dividi-lo em seções de campos que tenham relação entre si e áreas visualmente distintas. Este artigo te ensinará como estilizar fieldset e legend.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Conhecimento básico de HTML
  • Conhecimento básico de CSS
  • Editor HTML

Lista completaMinimizar

Instruções

  1. 1

    Crie o fieldset mostrado na introdução com o seguinte código HTML:

    <fieldset> <legend>Reserve Seu Espaço</legend> <p> <label>Seu nome completo <input type="text" name="name" id="name" /> </label> </p> <p> <label>Email <input type="text" name="email" id="email" /> </label> </p> <p> <label>Telefone <input type="text" name="telefone" id="telefone" /> </label> </p> <p> <input type="submit" name="botao" id="botao" value="Enviar" /> </p> </fieldset>

  2. 2

    Olhe para os vários elementos no formulário. Estes elementos podem ser estilizados: <fieldset>, <legend>, <p>, <label>, <input>. Os elementos <p> não são necessários; pode-se usar ou <div> ao invés de <p> no exemplo; e na maioria dos formulários o botão de envio não seria parte de um <fieldset>, especialmente se o formulário tem mais de um <fieldset>, o que é muito provável.

  3. 3

    Qualquer regra de CSS pode ser aplicada a um ou a todos os elementos de formulário presentes. Você pode escrever regras para fontes, cores, plano de fundo, imagem de plano de fundo, espaço entre linhas, espaço entre conteúdo e bordas, margem, borda ou qualquer outra coisa que você queira apresentar de forma particular.

  4. 4

    Estas são as regras de CSS que eu escrevi para estilizar <fieldset> e <legend>. Você pode fazer isto de várias outras formas. Meu modo fazer não é a única forma.

    fieldset { border: 1px solid #CCA383; width: 50%; background: #FFE8EF; padding: 3px; } fieldset legend { background: #CCA383; padding: 6px; font-weight: bold; }

  5. 5

    Alguns toques simples em CSS usando as propriedades color, padding e border fazem o conteúdo da tag <legend> se destacar e concedem ênfase visual ao formulário na página.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível