Formulário semanticamente correto com XHTML e CSS
O XHTML é uma recomendação do W3C, e pode ser definida como uma Linguagem Extensível para Marcação de Hipertexto escrita para substituir o HTML. O XHTML nada mais é do que um documento HTML, porém com código mais claro e limpo.
Ao usar o XHTML, estamos escrevendo um código XML.
Principais características:
- carregamento mais rápido das páginas
- maior acessibilidade aos browsers
- código de escrita limpa e evidente
Principais diferenças do HTML:
- os documentos devem ser bem formados
- as tags devem ser escritas em letras minúsculas
- as tags devem estar convenientemente aninhadas
- o uso de tags de fechamento é obrigatório
- elementos vazios devem ser fechados
Neste post será apresentado como montar corretamente um formulário na Web utilizando XHTML e CSS, evitando assim o uso de tabelas para o alinhamento de textos e campos do formulário.
Vamos ao código XHTML do formulário.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulário semanticamente correto com XHTML e CSS</title>
</head>
<body>
<form action="#">
<fieldset>
<legend>Login de Usuários</legend>
<p>
<label for="name" accesskey="1">E-mail</label>
<input type="text" id="name" />
</p>
<p>
<label for="e-mail" accesskey="2">Senha</label>
<input type="password" id="e-mail" />
<br />
</p>
<button name="action" type="submit">Logar</button>
</fieldset>
</form>
</body>
</html>
Sobre os elementos: fieldset, legend e label:
- O elemento fieldset cria uma estrutura de agrupamento nos formulários, isto é, desenha uma caixa em torno dos seus conteúdos.
- O elemento legend é considerado um subtítulo do elemento fieldset.
- O elemento label associa-se ao elementos: input, textarea, select e object. O label facilita a usabilidade dos utilizadores nos formulários. A tag
Agora só falta o CSS para estilizarmos o nosso formulário:
fieldset {
border: 1px solid #6F6F6F;
width: 20em;
background-color:#F5F5F5;
font:13px "Verdana", sans-serif;
}
legend {
color: #fff;
background: #6F6F6F;
border: 1px solid #781351;
padding: 2px 6px
}
label {
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
input {
color: #781351;
background: #fff;
border: 1px solid #ccc;
}
input:focus {
color: #781351;
background: #fff;
border: 1px solid #606060;
}
button{
color: #000;
background: #EEE;
border: 2px outset #ccc;
margin-left: 11.0em;
}
Para visualizar o formulário clique aqui.
Até a próxima.
Comentários
Deixe o seu comentário
barracuda mocambicana on fevereiro 21st, 2010
Very nice!!