Ciro Feitosa

• Início
• Sobre
• Projetos
• Blog
• Cursos
• Hospedagem
• Contato

Blog

Formulários Acessíveis

Quinta-feira, 10 de Fevereiro, 2005 | 22 comentários |

<form>
   <fieldset>
      <legend>Dados Pessoais</legend>
      <label for="nome">Nome:</label> 
      <input type="text" name="nome" id="nome" /><br />
      <label for="telefone">Telefone:</label> 
      <input type="text" name="telefone" id="telefone" />
   </fieldset>
   <fieldset>
      <legend>Dados Profissionais</legend>
      <label for="empresa">Empresa:</label> 
      <input type="text" name="empresa" id="empresa" /><br />
      <label for="site">Site:</label> 
      <input type="text" name="site" id="site" />
   </fieldset>
   <input type="submit" value="enviar" class="botao" />
</form>

form fieldset
{
   float: left;
   margin-right: 7px;
   width: 40%;
   border: solid black 1px;
   padding: 3%;
   margin-bottom: 10px;
}

form legend
{
   padding: 6px;
   margin: 10px;
   border: solid black 1px;
   font-size: 90%;
   font-weight: bold;
   background-color: #e8e8e8;
}

form label
{
   display: block;
   font-size: 11px;
}

form input
{
   width: 100%;
   border: solid #ccc 1px;
   font-size: 11px;
   font-family: 'Trebuchet MS', Verdana, Tahoma, Serif;
}

form input.botao
{
   display: block;
   width: auto;
   float: right;
}

form fieldset label 
{
   cursor: pointer;
   display: block
   font-size: 11px;
} 

form input:focus
{
   border-color: black;
}

22 comentários

#1 | André Luiz disse:

Olá Ciro, bom esta é uma das formas mais acessiveis de se fazer um form memso, tudo bem que em forms mais complexos é quese que indispensavel o uso de tabelas mas para casos mais simples esta é a melhor opção mesmo, nao esquecendo sempre de tomar medidas que facilitem a vida do usuario, como o uso do tabindex.

Forte abraço cara! sucesso!

#2 | Gerson Mendes Bastos disse:

Bom dia Ciro, é com prazer que visito teu site especialmente porque o assunto formulário me interessa muito no momento.
Gostaria de saber como é que faço o formulário do meu site(criado em DreamweaveMX), funcionar, enviando-me os dados preenchidos pelo visitante.
Antecipadamente grato, aguardo retorno.
Cordialmente
Gerson Bastos

#3 | KROL JÂNIO disse:

caio, ajudou muito esse teu código para envio de formulário, mas como faço para adicionar meu e-mail, para receber o que enviarem pelo formulário, obrigado!

#4 | Ciro disse:

Olá.

Dê uma olhada na função MAIL do PHP:
http://php.net/mail

Abraço!

#5 | Bruno Dulcetti disse:

Boa Ciro... Soh pra complementar, e ajudar o KROL JÂNIO, postei no meu blog um post sobre como fazer um formulario em php, nada de css, etc, a parte de envio mesmo...

Para quem quiser verificar:
http://www.brunodulcetti.com/blog/2006/01/25/formulario-em-php.html

Eu ia postar uma segunda parte, postando um formulario acessível, mas jah nem preciso mais... hehehehe...

Aquele abraço rapaz...

#6 | Jessé disse:

A única dúvida que tenho ao utilizar essa estrutura de formulário, é com relação aos radios e checks. Normalmente eles usam um label necessariamente. Mas como devemos usar esse label, de forma que fique acessível e ao mesmo tempo esticamente bom?

#7 | golfetto disse:

perfeito... ainda existe muita deficiência no básco de formatação de código na web e artigos assim ajudam muito a melhorar a qualidade geral dos websites.
parabens!

#8 | Ciro disse:

Jessé,

Você pode usar um label independente para cada radio, por exemplo, setando um ID para cada radio (obviamente um ID tem valor único), mas com nomes (campo name) dos campos iguais.

Abraço!

#9 | Suélen disse:

Olá! Alguém pode me dizer como fazer uma caixa de comentários como essa na qual escrevi essa mensagem?

#10 | wc disse:

achei muito conplicada a esplicação

#11 | Ricardo Braz disse:

Ciro, é possível fazer um formulário em que os campos de texto tenham imagens no background, para ter uma caixa de texto com cantos arredondados, por exemplo?

#12 | Ana Paula disse:

Muito bom este formulario,

#13 | Erika Serra disse:

Oi, gostei muito da sua explicação, estou estagiando e agora estou em programação, paesar de ter iniciado este modulo, necessito criar um formulário para o site de onde estou estagiando, gostari que me enviasse se possivél for um bem melzinho com açúcar em html, pode me ajudar?
Agradeço desde de já!
grande abraço
Erika Serra

#14 | MARCILIO BARTOLOMEU SILVA E SOUZA disse:

como faço um formulário no publisher, pois está dando errado momento em que coloco para os dados serem enviados para meu e-mail.

#15 | JULIO COSTA disse:

Ola Ciro,
Sou totalmente amador, mais cuido do site da escolinha de futsal do meu cunhado, e queria fazer um formulario para promover promoção aos alunos, como faço um formulario para inscricao so com nome, fone , endereço e mensagem e encaminhar as mensagens para meu email..
valeu e obrigaro

#16 | Francisco disse:

Ola Ciro,
Gostaria, se possível, saber como faço para que o formulário que coloquei no site seja enviado para meu email (feito no Publisher 2007). Sou amador no assunto.
Obrigado.

#17 | Debora disse:

Boa noite
Mudei a hospedagem do meu site e agora meu antigo formulario nao funciona mais. Preciso receber uma copia quando o cliente clique em enviar e que o proprio cliente visualize o que escreveu logo depois que clicou em enviar.
Se alguem puder me ajudar agradeço.
Estou procurando contratar alguem que faça isso, porque eu sei que é simples, mas para mim que não entendo nada é muito difícil.
Grata
Debora

#18 | luis alberto disse:

Ciro,

Estou tentando usar o formulário do publisher e encontrei o mesmo problema da maioria. Crio o formulário mas quando edito na internet ele não envia a mensagem.

Você tem alguma dica?

Agradeço

Luis

#19 | Giza disse:

Oi, eu estou querendo criar um formulário q eu possa visualizar assim q abrir o primeiro nome cadastrado no banco de dados e q se mais alguma outra pessoa abrir o mesmo formulário visualizar o segundo nome... e assim sucessivamente e com um botão próximo funcionando.... se puder me ajudar ficarei muito grata!!!

#20 | Ricardo José Ramalho Moreira disse:

Ciro,
queria apenas fazer uma pequena sugestão no css apresentado por você nesta solução para formulário. Sugiro colocar o estilo \'display\' com o valor \'block\' na tag input e não na tag label, com esta modificação conseguimos assim o mesmo efeito, mas não teremos o problema de ao passar o mouse fora do texto da label, o ponteiro do mouse não fique indicando que algo poderia ser \'clicado\' dando uma impressão errada ao visitante.

Espero que a dica seja útil a todos.

C\'ya

#21 | Francisco disse:

Tenho uma página na web feita no publisher, porém não consigo fazer com que os formulários venham para meu email. Até aparece o formulário na publicação, porém quando envio as informações mostra uma página não reconhecida. O publisher fala que a opção de envio para email necessita que o provedor suporte extensões de servidor do Microsoft Front Page 98 (versão 3.0 ou superior) - o que seria isso? Meu provedor é o Terra!
Obrigado.

#22 | Felipe disse:

Caraca! muito show a dica cara, parabéns...

eu tbm gostaria de passar uma dica...

tem um site que cria um form de contato automaticamente, basta preenchar o formulario com seu email nome e etc...e ele gera um codigo do form...

dai eh soh colar na pagina...para iniciantes isso eh muito bom

segue o site:
http://www.scrapfacil.890m.com/formail

flw...vlw

Deixe o seu comentário

As imagens que aparecem são Gravatars. Ao registrar um, sempre que comentar em algum blog que suporte essa funcionalidade, sua imagem aparecerá ao lado. Se você ainda não tem um gravatar, crie aqui.