Formulários Semânticos Com Css

Eu desenvolvi um formulário legal em XHTML+CSS, que corresponde às exigências de web semântica do W3C e é totalmente personalizável e não usa nenhum hack, tabela, div ou span.

O link para o download está na página a seguir, que também tem um pequeno tutorial (que ainda receberá mais conteúdo).

Formulários Semânticos com CSS

Você pode baixar o arquivo diretamente, está anexado ao post.

EDIT: Nova versão online: http://gaigalas.net/semanticforms.html

Edição feita por: Tash, 16/08/2008, 10:15.

Legal mesmo....

vlw

Não consegui acessar, nem baixar...

Po, muito bom esse form xD~

Seria legal agora explicar ele, eu particularmente não entendi a parte

label {
	position: absolute;
	left: 0px;
	width: 46%;
	margin-left: 4%;
	text-align: right;
	padding: 2px;
	border: 1px solid #DDDDDD;
	border-top: 0px;
	border-left: 0px;
}

do position absolute ali, quando tirei, deu um monte de bug, de resto entendi x]

Como o link no post inicial encontrasse off, vou postar alguns links "novos" aqui:

http://www.websemant...cessible_forms/
e
http://www.maujor.co...al/formac-a.php

Bons estudos!!!

a função :hover só funciona no Firefox.
Se quiserem borda no HOVER, tem que ser em JS!

Aqui está o "sucessor" dele:

http://gaigalas.net/semanticforms.html

Aqui está o "sucessor" dele:

http://gaigalas.net/semanticforms.html

Por incrível que pareça não está 100% correto.

Não se deve colocar o input dentro da tag <label>, botão de submit não deve ser uma tag <input> e sim uma tag button e o fieldset é pura perfumaria


demo rápida

<form name="login" method="post" action="xxx">
<label for="usuario">Usuário:</label>
<input type="text" id="usuario" />
<label for="senha">Senha:</label>
<input type="password" id="senha" />
<button type="submit">Logar</button>
</form>

Edição feita por: BGGMB, 07/07/2008, 22:16.

Aqui está o "sucessor" dele:

http://gaigalas.net/semanticforms.html

Por incrível que pareça não está 100% correto.

Não se deve colocar o input dentro da tag <label>, botão de submit não deve ser uma tag <input> e sim uma tag button e o fieldset é pura perfumaria


demo rápida

<form name="login" method="post" action="xxx">
<label for="usuario">Usuário:</label>
<input type="text" id="usuario" />
<label for="senha">Senha:</label>
<input type="password" id="senha" />
<button type="submit">Logar</button>
</form>

Me desculpe, mas quem está errado é você. Leia atentamente todos os exemplos da tag LABEL do HTML:

http://www.w3.org/TR...html#edef-LABEL

Verá que, por padrão, o W3C recomenda também o uso de LABELs implícitos, que tem a sintaxe equivalente a que eu usei no exemplo.

O submit, tanto faz. Se você usá-lo como button, ele será apenas um controle, se você usar como input, ele enviará seu próprio value através da requisição. Ambos estão corretos.

E por fim, o fieldset não é perfumaria. Além de ser a melhor tag para separar visualmente campos de formulário, tem melhor acessibilidade em leitores de tela.

O correto do label é deixar fora do input, textarea e afins... Label é label, e input é input. É que nem usar <p> e <b>, isto é, um não tem nada a ver com o outro.

Outra coisa, um documento de XHTML válido deve seguir a ordem de aninhamento. Ou seja, se tu abriu primeiro um <p> e depois um <b>, deve fechar o <b> para depois fechar o <p>, e nunca o inverso -> http://www.w3schools.../xhtml_html.asp

XHTML Elements Must Be Properly Nested

Certo

<p><b>teste</b></p>

Errado

<p><b>teste</p></b>

Outra coisa, todos elementos devem ter uma tag de fechamento tb. No caso deles não possuírem uma tag secundária para isso (ex: <b> e </b>) deve-se fechar na própria tag que abre. Exemplo:

<input type="text" name="teste" />

Reparou o "/" ?? É ele que fecha neste caso. Mesma coisa para <br />, e outras...

Fieldset é questão de organização. Deixar mais fácil a divisão de forms.

Button / Input submit, não tem nada errado... A única diferença é que button deve possuir um conteúdo e input não precisa. Só isso. Ambos estão corretos.

Retirado do site da W3C:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

Este formulário não é XHTML válido.

Dá uma lida no link que passei

Edição feita por: Firehalk, 15/08/2008, 23:22.

O correto do label é deixar fora do input, textarea e afins... Label é label, e input é input. É que nem usar <p> e <b>, isto é, um não tem nada a ver com o outro.

Leia meu último post. Nesse post existe um link para um documento do W3C, nele existem exemplos do label implícito, com controles de formulário dentro. É correto.. Vou copiar aqui só pra você ver:

http://www.w3.org/TR...html#edef-LABEL

In this example, we implicitly associate two labels with two text input controls:<FORM action="..." method="post"><P><LABEL>   First Name   <INPUT type="text" name="firstname"></LABEL><LABEL>   <INPUT type="text" name="lastname">   Last Name</LABEL></P></FORM>

Aliás, eu sugiro para todos os meus alunos e colegas de trabalho que leiam as especificações do W3C, ao invés de ler apenas tutoriais. É uma ótima prática.

Outra coisa, um documento de XHTML válido deve seguir a ordem de aninhamento. Ou seja, se tu abriu primeiro um <p> e depois um <b>, deve fechar o <b> para depois fechar o <p>, e nunca o inverso -> http://www.w3schools.../xhtml_html.asp

Você ao menos leu o fonte do exemplo? Está tudo aninhado corretamente.

Outra coisa, todos elementos devem ter uma tag de fechamento tb. No caso deles não possuírem uma tag secundária para isso (ex: <b> e </b>) deve-se fechar na própria tag que abre. Exemplo:

<input type="text" name="teste" />

Reparou o "/" ?? É ele que fecha neste caso. Mesma coisa para <br />, e outras...

Nem todos. Isso é uma regra apenas para XHTML, no HTML não. Ambos ainda são recomendações do W3C, e meu exemplo é apenas em HTML. No HTML5, em desenvolvimento, também não será necessário fechar tags "vazias". De qualquer forma, é bastante simples converter qualquer documento para XHTML.

Se quer saber porque usei HTML ao invés de XHTML, sugiro que leia o seguinte artigo: http://brunotorres.n...sando-no-futuro

Este formulário não é XHTML válido.

Dá uma lida no link que passei

Repito: Meu formulário é escrito em HTML, não XHTML.

Nele existe um botão para validar o documento, clique no botão. Há também um validador de CSS, faça o teste

Eu sei que seu documento não é XHTML, mas como você ressuscitou o tópico, irá confundir quem abrir ele agora.

No seu título está assim: Formulários Semânticos Com Css, XHTML+CSS+Semantic Web+Tableless

Por isso que comentei que não é XHTML válido...

Quanto ao comentário do aninhado, foi para dar complemento apenas, do porque é uma prática melhor usar os labels em separado, em documentos XHTML.

Eu sei que seu documento não é XHTML, mas como você ressuscitou o tópico, irá confundir quem abrir ele agora.

No seu título está assim: Formulários Semânticos Com Css, XHTML+CSS+Semantic Web+Tableless

Por isso que comentei que não é XHTML válido...

Quanto ao comentário do aninhado, foi para dar complemento apenas, do porque é uma prática melhor usar os labels em separado, em documentos XHTML.

Atualizei o título, então De qualquer forma, os labels podem ser usados no XHTML também:

<label>
Campo _linenums:0'><label>Campo: <input type="text" name="teste" /></label>

O aninhamento está correto ^^

bem, ressucitando o tópico, input dentro de label é valido desde que seja um unico input.

As duas maneiras estão corretas, eu particularmente prefiro colocar o input dentro do label, pois ao clicar no "rotulo" ele reconhece o input...

melhora minha acessibilidade.