Jump to content


Photo

Formulários Semânticos Com Css


  • Faça o login para participar
15 replies to this topic

#1 Tash

Tash

    Alexandre Gomes Gaigalas

  • Usuários
  • 315 posts
  • Sexo:Não informado
  • Localidade:Mauá - SP
  • Interesses:Desenvolvimento para Web, Web Standards, Tableless, XHTML, CSS, PHP, MySQL, JavaScript, XML

Posted 29/01/2005, 05:17

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

Attached Files

  • Attached File  form.zip   1.42KB   634 downloads

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

Alexandre Gomes Gaigalas
http://alexandre.gaigalas.net

#2 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 29/01/2005, 14:00

Legal mesmo....

vlw

#3 eduardo_

eduardo_

    Turista

  • Usuários
  • 56 posts
  • Sexo:Não informado
  • Localidade:São Paulo - SP

Posted 02/02/2006, 15:07

Não consegui acessar, nem baixar...

#4 GreyWolf

GreyWolf

    Mestre

  • Usuários
  • 674 posts
  • Sexo:Não informado

Posted 06/06/2006, 09:33

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]

#5 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 04/09/2006, 11:19

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!!!

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum


#6 diogo_vedder

diogo_vedder

    Turista

  • Usuários
  • 34 posts
  • Sexo:Não informado

Posted 11/12/2006, 23:36

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

#7 Tash

Tash

    Alexandre Gomes Gaigalas

  • Usuários
  • 315 posts
  • Sexo:Não informado
  • Localidade:Mauá - SP
  • Interesses:Desenvolvimento para Web, Web Standards, Tableless, XHTML, CSS, PHP, MySQL, JavaScript, XML

Posted 28/05/2008, 18:15

Aqui está o "sucessor" dele:

http://gaigalas.net/semanticforms.html
Alexandre Gomes Gaigalas
http://alexandre.gaigalas.net

#8 BGGMB

BGGMB

    12 Horas

  • Usuários
  • 156 posts
  • Sexo:Masculino
  • Localidade:Vinhedo SP
  • Interesses:CSS, XHTML, SEO, Photoshop, Illustrator, After Effects, InDesign, Fireworks, Dreamweaver...

Posted 07/07/2008, 22:15

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.

front-end engineer <tags: css/xhtml/javascript/seo/usability/semantic>
www.brunobincoletto.com - twitter @brunobincoletto

#9 Tash

Tash

    Alexandre Gomes Gaigalas

  • Usuários
  • 315 posts
  • Sexo:Não informado
  • Localidade:Mauá - SP
  • Interesses:Desenvolvimento para Web, Web Standards, Tableless, XHTML, CSS, PHP, MySQL, JavaScript, XML

Posted 15/08/2008, 22:35

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.

;)
Alexandre Gomes Gaigalas
http://alexandre.gaigalas.net

#10 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 15/08/2008, 23:16

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 (y)

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

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#11 Tash

Tash

    Alexandre Gomes Gaigalas

  • Usuários
  • 315 posts
  • Sexo:Não informado
  • Localidade:Mauá - SP
  • Interesses:Desenvolvimento para Web, Web Standards, Tableless, XHTML, CSS, PHP, MySQL, JavaScript, XML

Posted 15/08/2008, 23:45

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 (y)


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 :lol:
Alexandre Gomes Gaigalas
http://alexandre.gaigalas.net

#12 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 15/08/2008, 23:57

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.
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#13 Tash

Tash

    Alexandre Gomes Gaigalas

  • Usuários
  • 315 posts
  • Sexo:Não informado
  • Localidade:Mauá - SP
  • Interesses:Desenvolvimento para Web, Web Standards, Tableless, XHTML, CSS, PHP, MySQL, JavaScript, XML

Posted 16/08/2008, 10:18

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 ^^
Alexandre Gomes Gaigalas
http://alexandre.gaigalas.net

#14 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 16/02/2009, 12:50

bem, ressucitando o tópico, input dentro de label é valido desde que seja um unico input.
Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#15 tamigo

tamigo

    Novato no fórum

  • Usuários
  • 3 posts
  • Sexo:Não informado

Posted 26/02/2009, 21:17

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.




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq