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 no Quirks Mode 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 e Opera, quem testar em outros e puder avisar, agradeço.
Quer aprender mais sobre programação? Conheça o acervo da livraria cultura sobre o assunto!
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.
Ué… Não entendi qual é o problema com BR. Fica organizado com ele também.
Você testou o exemplo com o CSS desativado? Fica tudo na mesma linha. Nada contra, claro. Mas acho que daria o mesmo resultado com o uso de BR.
Só uma dica ;)
Comment by Khristofferson Silveira — October 26, 2006 @ 6:47 pm
testado em:
firefox 1.5.0.7
mozilla 5.0 [SeaMonkey 1.0.5]
konqueror 3.3.1-5.13
Lynx 2.8.5dev.16 (pra testar sem o css como disse o comentario anterior)
funcionou em todos!
Comment by pirata — November 1, 2006 @ 6:23 pm
Muito legal. Me intrometendo e respondendo ao Khristofferson (se é que ele vai passar aqui pra ver a resposta), o legal de tirar o BR é que amanhã você pode resolver que seu design não deve ter quebra de linha e só precisa alterar o CSS.
Se bem que eu ainda acho meio utópico esse lance de fazer redesign só mundando CSS, ehehe. Até porque redesign quase sempre vem acompanhado de mudanças no funcional do site…
Comment by Cristiano Dias — November 3, 2006 @ 8:14 pm
Esta sua técnica funciona, mas não é compatível com os Padrões Web. Estes exigem que os campo de formulário estejam dentro de um outro bloco, que não o form, exatamente como acontece com blockquote e body, elementos de texto não podem ser filhos diretos destes elementos.
O mais sensato é usar lista ordenada para organizar os “passos” de preenchimento do formulário.
Pode usar p ou div também, mas é menos elegante que a lista.
Comment by Marco Gomes — February 16, 2007 @ 2:24 pm
Putz, eu sempre usei com table.. auehuaheuahe
é muito feio? Só uma tabelinha pequena, só pro formulário, pode? ahaha
abraço!
Comment by Lourenço — March 22, 2007 @ 9:33 am
Marco Gomes, acho que você se enganou no seu comentário. Dentro do bloco form realmente não pode, mas no exemplo, as tags de input estão dentro do fieldset. Portanto, não vejo nada de errado no código. Muito limpo e objetivo.
Quanto a renderização do CSS, alguém aqui ainda usa browser sem capacidade para CSS?
Comment by Mark de Souza Costa — March 27, 2007 @ 1:28 pm
Eu tenho um site que ainda está na fase de edição, gostaria de fazer uma página para que as pessoas mandassem um e-mail por uma página minha SEM USAR OUTRO PROGRAMA.
vocês poderiam me ajudar? eu não emtendo muito de html.
Grato.
Comment by Rafael — January 28, 2008 @ 4:11 pm
Rafael, pra fazer isso, só se tu usar uma linguagem do lado do servidor, tipo PHP ou ASP (e acho que JSP tb). De outro jeito não dá (não que eu saiba).
Abraço!
Comment by Rodrigo — March 22, 2008 @ 12:44 am
Muito bom!
Válido e correto.
Comment by Rafael Affonso — April 11, 2008 @ 10:27 am
Rafael, pra fazer isso, só se tu usar uma linguagem do lado do servidor, tipo PHP ou ASP (e acho que JSP tb). De outro jeito não dá (não que eu saiba).
Abraço!
-
Sim, só usar uma linguagem Server-Side, como PHP, ASP (ECA!) e, sim, JSP (da Sun, eca tb!). Melhor PHP.
Não tem como fazer usando uma linguagem Client-Side (pra que não conhece, uma coisa mais, digamos, “superficial”, como JavaScript).
Use PHP. O MELHOR, sem dúvida. E se quiser usar nele, só usar a o comando mail();.
Um field, por exemplo, chamado mensagem:
$msg = $_POST[’mensagem’];
mail (”seuemail@provedor.com”,”$msg”,”$cabecalho”);
No caso, a variável correspondente ao cabeçalho não foi definida, nao foi definida o Reply e nada. mas é facil.
E não, não revisei. É simples.
Comment by Jota — May 23, 2008 @ 11:09 pm