Assine:
Formulário Nos Padrões
Xhtml + css
Escrito por CassianoOliver em WebStandards e CSS. Data: 09/12/2007
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Olá pessoal, sei que não sou nenhum "expert" em webstandards, mas venho aqui deixar uma contribuição para quem está iniciando.
Esse tutorial mostrará como desenvolver um formulário semanticamente correto. Sempre vejo em sites que muitos utilizam tabelas para estrutar o formulário, mas todos nós sabemos (ou deveriam saber) que tabelas são utilizadas para exibir dados tabulados.
Vamo lá então...
1º, montando o XHTML da página...
* Para quem ainda não conhece a tag <label>, é utlizada em elementos de formulário, proporcionando uma maior facilidade de acesso a esses elementos. Com o parâmetro "for='nome_do_elemento'" fazemos com que o <label> fique "clicável", assim podemos por acessar ou marcar o elemento. Só não deve ser usada em elementos do tipo botão.
A visualização inicial do formulário será essa:
Agora vamos ao CSS:
Caso alguém comente, não utilizei <fieldset> porque acho que para esse tipo de formulário(pequeno e sem grupos) não seja necessário. E também não utilizei <legend> porque não gosto mesmo
.
Resultado final
simples não?
espero ter contribuído com alguma coisa...
dúvidas, críticas e elogios, mandem aê!
Esse tutorial mostrará como desenvolver um formulário semanticamente correto. Sempre vejo em sites que muitos utilizam tabelas para estrutar o formulário, mas todos nós sabemos (ou deveriam saber) que tabelas são utilizadas para exibir dados tabulados.
Vamo lá então...
1º, montando o XHTML da página...
CODE
<!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="application/xhtml+xml; charset=utf-8" />
<title>Formulário semanticamente correto</title>
</head>
<body>
<form action="" method="post">
<label for="nome" id="lnome">
<span class="campo">Nome</span> <input type="text" name="nome" id="nome" />
</label>
<label for="email" id="lemail">
<span class="campo">E-mail</span> <input type="text" name="email" id="email" />
</label>
<label for="cidade" id="lcidade">
<span class="campo">Cidade</span> <input type="text" name="cidade" id="cidade" />
</label>
<label for="estado" id="lestado">
<span class="campo">Estado</span>
<select name="estado" id="estado">
<option>ES</option>
</select>
</label>
<label for="assunto" id="lassunto">
<span class="campo">Assunto</span> <input type="text" name="assunto" id="assunto" />
</label>
<label for="mensagem" id="lmensagem">
<span class="campo">Mensagem</span> <textarea name="mensagem" id="mensagem"></textarea>
</label>
<button type="submit" id="enviar">Enviar</button>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Formulário semanticamente correto</title>
</head>
<body>
<form action="" method="post">
<label for="nome" id="lnome">
<span class="campo">Nome</span> <input type="text" name="nome" id="nome" />
</label>
<label for="email" id="lemail">
<span class="campo">E-mail</span> <input type="text" name="email" id="email" />
</label>
<label for="cidade" id="lcidade">
<span class="campo">Cidade</span> <input type="text" name="cidade" id="cidade" />
</label>
<label for="estado" id="lestado">
<span class="campo">Estado</span>
<select name="estado" id="estado">
<option>ES</option>
</select>
</label>
<label for="assunto" id="lassunto">
<span class="campo">Assunto</span> <input type="text" name="assunto" id="assunto" />
</label>
<label for="mensagem" id="lmensagem">
<span class="campo">Mensagem</span> <textarea name="mensagem" id="mensagem"></textarea>
</label>
<button type="submit" id="enviar">Enviar</button>
</form>
</body>
</html>
* Para quem ainda não conhece a tag <label>, é utlizada em elementos de formulário, proporcionando uma maior facilidade de acesso a esses elementos. Com o parâmetro "for='nome_do_elemento'" fazemos com que o <label> fique "clicável", assim podemos por acessar ou marcar o elemento. Só não deve ser usada em elementos do tipo botão.
A visualização inicial do formulário será essa:
Agora vamos ao CSS:
CODE
<style type="text/css">
/* ZERANDO ATRIBUTOS EM TODOS OS SELETORES */
* {
margin: 0;
padding: 0;
}
/* FORMATANDO A FONTE, TAMANHO E COR PADRÃO */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
margin: 50px 0 0 50px; /* SÓ PARA NÃO FICAR COLADO NAS MARGENS DA PÁGINA */
}
/* LABEL */
label {
display: block; /* DEIXANDO UM ACIMA DO OUTRO */
margin: 5px 0 5px 0; /* ESPAÇO ACIMA E ABAIXO */
}
/* FORMATANDO OS IDENTIFICADORES DOS CAMPOS */
label span {
display: block;
width: 80px;
margin-top: 2px;
float: left;
}
/* FORMATANDO INPUT, SELECT E TEXTAREA */
input, textarea, select {
color: #336699;
width: 200px;
border: solid 1px #006699;
}
/* SELECT COM LARGURA AUTOMÁTICA */
select {
width: auto;
}
textarea {
height: 100px;
overflow: auto; /* BARRA DE ROLAGEM AUTOMÁTICA */
}
/* FORMATAÇÃO DO BOTÃO */
button {
background: #0099CC;
color: #FFF;
font-weight: bold;
margin-top: 10px;
border: none;
}
</style>
/* ZERANDO ATRIBUTOS EM TODOS OS SELETORES */
* {
margin: 0;
padding: 0;
}
/* FORMATANDO A FONTE, TAMANHO E COR PADRÃO */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
margin: 50px 0 0 50px; /* SÓ PARA NÃO FICAR COLADO NAS MARGENS DA PÁGINA */
}
/* LABEL */
label {
display: block; /* DEIXANDO UM ACIMA DO OUTRO */
margin: 5px 0 5px 0; /* ESPAÇO ACIMA E ABAIXO */
}
/* FORMATANDO OS IDENTIFICADORES DOS CAMPOS */
label span {
display: block;
width: 80px;
margin-top: 2px;
float: left;
}
/* FORMATANDO INPUT, SELECT E TEXTAREA */
input, textarea, select {
color: #336699;
width: 200px;
border: solid 1px #006699;
}
/* SELECT COM LARGURA AUTOMÁTICA */
select {
width: auto;
}
textarea {
height: 100px;
overflow: auto; /* BARRA DE ROLAGEM AUTOMÁTICA */
}
/* FORMATAÇÃO DO BOTÃO */
button {
background: #0099CC;
color: #FFF;
font-weight: bold;
margin-top: 10px;
border: none;
}
</style>
Caso alguém comente, não utilizei <fieldset> porque acho que para esse tipo de formulário(pequeno e sem grupos) não seja necessário. E também não utilizei <legend> porque não gosto mesmo
.Resultado final
simples não?
espero ter contribuído com alguma coisa...
dúvidas, críticas e elogios, mandem aê!
Mais recentes em WebStandards e CSS
- Mini-lib css reset do micox
- Por Micox - Abaixo mostrarei tipo uma mini-lib css com o qual eu...
- Mapear regiao
- Por faro - Substituindo a tag map pelo css....
- Layout diferente.
- Por faro - Boa noite pessoal como vão todos... esse é meu primeiro...
- Rollover via css
- Por NightSpy - Achei este efeito na net, como não achei novamente,...
- Menu drop-down só com css - até 4 níveis
- Por Micox - Código pronto - só copiar, colar e usar...
Ver mais Artigos de WebStandards e CSS.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
David Cruvinel disse:
no form tenho alguns input type="radio" e eles ficaram iguais os outros campos com a formatação de borda azul e grande, do mesmo tamanho dos campos.
como resolver isso?
ps: nao sei nada de css ainda.....rs
luishenrique disse:
David Cruvinel disse:
uai, não deu certo não, coloquei assim:
color: #336699;
width: 200px;
border: solid 1px #006699;
}
input[type="radio"] {
border:none;
}
CassianoOliver disse:
faz assim david,
atribui uma classe aos inputs radio...
e no css
border: none;
}
tentaí...
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).