25/10/06 Tutorial: Formulários usando CSS
Muita gente usa meios bem P.O.G. para fazer formulários. Até hoje, o melhor que eu tinha achado era um que usava a tag br para quebrar a linha entre um campo e outro. Eu sempre achei meio porco mas até ontem, não tinha feito nada à respeito disso. Agora, finalmente criei um form que só usa inputs e labels, sem br’s, sem li’s ou qualquer outra tag inapropriada para o caso. Veja a lição de casa feita:
CSS:
input{
display:block;
margin-left:110px;
margin-bottom:5px;
}
label{
clear:left;
display:block;
float:left;
margin-top:3px;
width:100px;
}
fieldset{
border:0px;
}
Form (use num documento com Doctype XHTML Strict):
<form>
<fieldset title="Teste" >
<label>Título</label>
<input type="text" size="50" />
<label>Data</label>
<input type=”text” size=”10″ />
<label>Local</label>
<input type=”text” size=”50″ />
<input type=”submit”value=”Enviar” />
</fieldset>
</form>
Não tem muito o que explicar, mas em caso de dúvidas, a caixa de comments está ai para isso. Testado e aprovado nos browsers Firefox 2, IEca 6, IEca 7 e Opera, quem testar em outros e puder avisar, agradeço.
Edit: O Marcos Gomes me alertou que não validava. Conferi com o código original e faltava a tag fieldset, para agrupar os labels e inputs.
rss