Como formatar um formulário com CSS

Escrito por kevin lee | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como formatar um formulário com CSS
Estilize os seus formulários web usando CSS para torná-los visualmente atraentes (Comstock/Comstock/Getty Images)

Antes das "folhas de estilo em cascata" existirem, os desenvolvedores de internet colocavam definições de estilo dentro de tags HTML. Essas definições, como a cor e tamanho da fonte, controlavam a forma em que os elementos apareciam nos navegadores. Hoje, os desenvolvedores usam CSS para formatar formulários criando definições de classes nas seções "head" (cabeçalho) dos documentos HTML. Depois de configurar essas classes nas caixas de texto, etiquetas e áreas de texto do seu formulário, você poderá alterar as características visuais de forma rápida e eficiente atualizando o código CSS.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o Bloco de Notas ou um editor HTML. Crie um formulário colando o seguinte texto no corpo do seu documento:

    <div id="formDiv"> <form method="post" action=”acaoExemplo.php">

    <label for="Nome">Nome:<label> <input type="text" name="Nome" id="Nome" />

    <label for="Email">Email:</label> <input type="text" name="Email" id="Email" />

    <label for="Nota">Nota:</label>

    <textarea name="Note" rows="5" cols="30" id="Note"></textarea>

    <input type="submit" name="submitButton" value="Submit Form" />

    </form> </div>

    Isso criará um formulário contendo caixas de textos, etiquetas, um controle de área de texto e um botão "enviar". O formulário estará dentro de um elemento div cujo ID será "formDiv".

  2. 2

    Adicione o seguinte código CSS à seção "head" do documento:

    formDiv {

    width: 600px; margin-top: 25px; }

    formDiv label {

    color:Blue; font-size: 1.2em; margin-right: 10px; margin-top: 15px; width: 100px; text-align: right; float: left; }

    A definição "#formDiv" configura a largura e a margem superior do formulário. É possível ajustar o valor "margin-top" (margem superior). Se você colocar um valor maior, aumentará a distância entre o topo do formulário e o elemento que o preceda. Se o valor for menor, a distância diminuirá.

    A definição "#formDiv label" define os atributos de todas as etiquetas do formulário. Nesse exemplo, a cor da etiqueta será azul e o tamanho da fonte será "1.2em". É possível alterar esses valores. Os valores "margin-right" (margem direita) e "margin-top" (margem superior) controlam as margens da etiqueta.

  3. 3

    Cole o seguinte código CSS embaixo do último bloco (mostrado no passo anterior):

    formDiv textarea, #formDiv input {

    font-size: 1.1em; margin-top: 15px; border-style:solid; border-width:1px; padding: 5px; width: 440px; }

    Essa definição configurará os atributos para o controle "textarea" e as caixas de texto. O atributo "font-size" (tamanho da fonte) configurará o tamanho da fonte nas caixas de texto em "1.1em" e os atributos "border" (borda) controlarão a aparência da borda ao redor das caixas de texto. O atributo "padding" (enchimento) lhe permitirá ajustar a distância entre as bordas das caixas de texto e o texto dentro das mesmas.

  4. 4

    Cole esta última definição embaixo do código do passo anterior:

    formDiv textarea {

    background-color:Yellow; }

    Com isso, você definirá um atributo adicional para o controle "textarea". O fundo será de cor amarela.

  5. 5

    Salve o seu documento HTML e abra-o em um navegador. O formulário aparecerá e mostrará as características físicas definidas no código CSS.

Dicas & Advertências

  • Dois dos atributos CSS mais importantes em uma etiqueta, que se encontram na classe "label", são "text-align" (alinhamento do texto) e "margin-right". O valor "text-align", se o valor for "left" (esquerda), alinhará o texto de todas as tabelas à esquerda, o que fará com que os navegadores alinhem as bordas esquerdas das etiquetas. Mude o valor para "right" (direita) para alinhar as bordas da direita. O atributo "margin-right", cujo valor é "10px" nesse exemplo, determina a distância entre o lado direito de uma etiqueta e o lado esquerdo da caixa de texto próxima a ela. Ajuste os valores para obter o layout visual que considere melhor.

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