Como estilizar fieldset e legend com CSS

Escrito por ehow contributor | Traduzido por vinícius albuquerque
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.

Instruções

  1. 1

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

    Reserve Seu Espaço

  2. 2

    Olhe para os vários elementos no formulário. Estes elementos podem ser estilizados:

    , ,

    ,

    não são necessários; pode-se usar ou

    ao invés de

    no exemplo; e na maioria dos formulários o botão de envio não seria parte de um

    , especialmente se o formulário tem mais de um
    , 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

    e . 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 se destacar e concedem ênfase visual ao formulário na página.

O que você precisa?

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

Lista completaMinimizar

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