Estilizando formulários, exemplo de Andy Budd

Este artigo é uma demonstração de como um formulário web pode ser estilizado como CSS

Este artigo é uma demonstração de como um formulário web pode ser estilizado como CSS. O exemplo é retirado do livro Criando Páginas Web com CSS de Andy Budd.

Repare que o formulário faz uso do elemento fieldsets para dar mais significado na estrutura. As labels também se fazem presente no exemplo, esse elemento é utilizado para adicionar um nome significativo e descritivo a cada elemento do formulário. Em muitos navegadores, clicar no elemento label fará com que o elemento do formulário ganhe o foco.

See the Pen advanced-form by Flávio Micheletti (@flaviomicheletti) on CodePen.

A estrutura básica de cada controle deve ser semelhante ao seguinte trecho:

<p>
    <label for="url">Web Address:</label>
    <input name="url" id="url" type="text" />
</p>

Para que as labels fiquem à esquerda e os campos à direita, aplicamos a propriedade float e um tamanho adequado no elemento label.

label {
    float: left;
    width: 10em;
}

Os controle de opção no fieldset "remember-me" estão agora a 10em de distância um do outro. Se você quiser, por exemplo, diminuir para 4em a distância entre eles sem interferir nos demais controle podemos colocar um id no fileadset e aplicar uma regra as labels.

#remember-me label {
    width: 4em;
}

A largura das caixas de texto foi definida aplicando-se uma largura ao elemento de entrada input. Entretanto, esse elemento (input) abrange outros recursos de formulário como checkboxe’s, radio buttons e botões de envio. Dessa forma, configurando o elemento input com uma largura de 200 pixles, todos os elementos input terão 200 pixels.

input {
    width: 200px;
}

Uma maneira de evitar esse problema é utilizar o seletor de atributo para selecionar a input específica.

input[type="radio"], input[type="checkbox"], input[type="submit"] {
    width: auto;
}

Fazer com que os botões de opção flutuem à esquerda irá trazê-los de volta ao mesmo nível dos seus labels, e uma pequena quantidade de margem direita fornecerá o espaçamento desejado entro os dois elementos.

input[type="radio"] {
    float: left;
    margin-right: 1em;
}

Criar um layout de duas colunas para grandes grupos de caixas de seleção ou de botões de opção é um pouco mais complexo. O autor (este exemplo é do Andy Budd) justifica a utilização do elemento de título h2 no lugar das labels pelo fato delas (as labels) só funcionam para elementos individuais. Poderíamos utilizar outro fieldset para esse pequeno grupo mas novamente o autor justifica problemas de incompatibilidade entre os navegadores estragaria o layout, o autor elaborou o exemplo em uma época que o IE6 e o IE7 eram os navegadores mais utilizados, ficará a cargo do leitor decidir qual seria a melhor estratégia para alcançar tal objetivo. A solução do Budd é definir o id ao fieldset para receber estilização exclusiva e utilizar o elemento h2 simulando uma label:

...
    <fieldset id="favoriteColor">
        <h2>Favorite Color:</h2>
...

Veja as estilizações:

#favoriteColor {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}
#favoriteColor h2 {
    width: 10em;
    float: left;
    font-size: 1em;
    font-weight: normal;
}
#favoriteColor div {
    width: 8em;
    float: left;
}
#favoriteColor label {
    width: 3em;
    float: none;
    display: inline;
}
#favoriteColor p {
    margin: 0.3em 0;
}

A campo data de aniversário útiliza-se de 3 elementos em sua composição: 2 textbox e 1 combobox. Esse formato é considerado uma entrada facilita para esse tipo de campo e, apesar de antigo, ainda bastante encontrado nos sites atuais (pelo menos enquanto escrevo o este artigo). O CSS é bastante intuitivo e dispensa comentários, então vou apenas ilustrá-los:

#monthOfBirthLabel, #yearOfBirthLabel {
    /**
    A intenção do autor foi esconder a label das vistas
    mas não dos softwares leitores de tela */
    text-indent: -1000em;
    width: 0;
}
#dateOfBirth {
    width: 3em;
    margin-right: 0.5em;
}
#monthOfBirth {
    width: 10em;
    margin-right: 0.5em;
}
#yearOfBirth {
    width: 5em;
}

Para finalizar, os formulários precisarão de algum tipo de mensagem de feedback a fim de destacar os campos ausentes ou aqueles incorretamente preenchidos. Para isso usamos o a regra abaixo:

label .feedback {
    position: absolute;
    margin-left: 11em;
    left: 200px;
    right: 0;
    font-weight: bold;
    color:#760000;
    padding-left: 18px;
    background: url(http://www.devfuria.com.br/html-css/introducao-formularios-web/error.png) no-repeat left top;
}

E o HTML deve ser...

<p>
    <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label>
    <input name="email" id="email" type="text" />
</p>

Fonte:

Comentários

comments powered by Disqus