Hi! Do you wanna see the English version?
Quinta-feira, 10 de Fevereiro, 2005 | 34 comentários
Um dos temas que mais irei debater neste espaço, sem dúvida, são os padrões web. Nada melhor começar por um assunto tão comum e tão praticado por qualquer programador ou designer web. A idéia é criar formulários XHTML acessíveis com formatações em CSS.
O desenvolvimento em XHTML tende a separar a estrutura de dados da formatação do documento. No caso dos formulários, sempre utilize as tags fieldset e label. A primeira cria um grupo de dados para um determinado espaço do formulário (ex.: Dados Pessoais e Dados Profissionais, são 2 grupos distintos de informações), e a segunda tag rotula um campo do formulário (uma espécie de título para cada campo, utilizando a própria descrição).
Entre questões de acessibilidade e usabilidade, estas tags possuem funcionalidades bem interessantes. Experimente usar o fieldset no seu formulário sem formatações. O browser renderiza criando uma borda ao redor do grupo de dados. É comum utilizar uma legenda para este grupo, usando a tag legend. Veja um exemplo:
Veja o código em XHTML:
<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>
Agora, utilizando do CSS, veja a diferença do mesmo código acima formatado:
Veja o código CSS (download):
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;
}
Uma função da tag label por exemplo, faz com que quando o usuário clique em cima do rótulo, o browser foque o campo ao qual ela se refere. É interessante mudar o seletor CSS cursor para pointer (isto faz com que ao passar o mouse, o usuário tenha noção de que se trata de algo clicável).
Ainda se pode modificar a formatação de um campo a depender de seu status, por exemplo, ao ser focado (focus). Veja o restante do código CSS:
form fieldset label
{
cursor: pointer;
display: block
font-size: 11px;
}
form input:focus
{
border-color: black;
}
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!
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
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!
Ciro Feitosa disse:
Olá.
Dê uma olhada na função MAIL do PHP:
http://php.net/mail
Abraço!
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...
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?
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!
Ciro Feitosa 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!
Suélen disse:
Olá! Alguém pode me dizer como fazer uma caixa de comentários como essa na qual escrevi essa mensagem?
wc disse:
achei muito conplicada a esplicação
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?
Ana Paula disse:
Muito bom este formulario,
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
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.
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
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.
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
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
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!!!
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
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.
Felipe disse:
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
Jedson Leandro disse:
Bom, legal esse formulario, mais o pessoal preenche e aew? clika em enviar, e pra onde será enviado o preenchimento????
Vinícius Caricatte disse:
Opa....
cara, quero saber como faço pra criar um formulário tipo esse que eu preenci, pelo PUBLISHER...
valew abraaaaaaaço
carol disse:
como faço pra que eu tenha a função de \\\'\\\'imprimir\\\'\\\'um formulário assim que for preenchido?
Celio disse:
Olá pessoal. Percebi que muito por aqui estão tendo problemas com a criação de formulários com o publisher. Não sou nenhum expert em web, mas tenho uma solução bem tosca para aqueles que querem usar o formulário do publisher. A coisa funciona assim: Depois de seu site ficar tudo certinho e publicado, sempre que você preenche o formulario e clica no botão \'ENVIAR\', surge um erro no navegador informando que a página --WEBBOT-SELF-- não foi encontrada. Pois bem, vamos driblar o sistema então. Crie seu formulário normalmente. Depois de criado, antes de publicar o mesmo, abra ele no seu navegador e clique em \'EXIBIR\' e depois em \'CÓDIGO FONTE\', no caso do explorer e altere essa linha de comando \'\' de modo que fique assim \'\'. Agora crie uma nova pagina (No publisher mesmo) de resposta ou agradecimento pelo o email enviado pelo internauta. No topo dessa página insira um campo \'FRAGMENTO DE CÓDIGO HTML\' (No caso do Publisher) e cole dentro dele esse código: \'
\' sem as \'ASPAS\'. Deixe-o bem pequeno no topo de sua página, e no restante da mesma você pode inserir o agradecimento como desejar, incluindo fotos, textos, etc.
Obs.: Este é apenas um exemplo. Antes de inserir esse código no fragmento de html do publisher, troque os nomes que estão entre \'CHAVES\' e \'ASPAS\' ($corpo .= \'Nome: \' . $_POST[\'NOME\'] . \'\\n\';) pelo nome o qual você nomeou quando o criou no publisher. Publique-o com o nome de --WEBBOT-SELF-- e automaticamente o publisher irá salvá-lo com a extensão .htm e depois é só upar para seu dominio e renomeá-lo para a extensão .php Pronto!! Se você quer usar o formulário do publisher, ai está um asolução para resolver seus problemas. Dúvidas?? Entre em contato pelo meu email e tentarei ajudar... Flws...
alex disse:
ola fiz meu site no publiher e inceri um formulario de resposta no meu site mas da erro comfigurei as tres maneiras enviar por email.deu erro enviar para uma pasta no servidor deu erro aparece isso /--WEBBOT-SELF--/ pode me ajudar?
Warmxtrong disse:
Estou fazendo um site da web pelo PUBLISHER, coloquei seu formulario, mas como faço pra ele ser enviado para o meu e-mail?
ruam disse:
Vc usou o PUBLISHER para fazer esse site?
Eu ja fiz o meu pelo PUBLISHER,mas como deixo online?
TIAGO disse:
ola;
a minha duvida é a seguinte, estou fazendo um site e estou querendo adicionar um formulario na minha pagina mas nao estou sabendo como deixa-lo no lugar que desejo por ex: no canto direito, ou qualquer outra parte da pagina como faço isto???
abraço
antonio disse:
ola,bom dia , ja coloquei o formulario no meu site , queria apenas saber como faço pra receber num email os dados do cliente , quando o mesmo preenche o formulario
Celio disse:
Ola pessoal,
Percebi que alguns aqui tem problemas com o formualrio do publisher. Vou postar aqui alguns codigos bem simples pra quebrar a jaca com esse problemão.
<?php
if (!$_POST){
?>
<form id="form1" name="form1" method="post" action="">
<table width="351" border="1" cellpadding="0" cellspacing="0" bordercolor="#3333FF" bgcolor="#66CCFF">
<tr>
<td><table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="center" valign="top" class="style3 style4"><span class="style1">Contato
</span>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><p class="style5 style4"><strong>Entre em contato conosco pelo formulário ou se preferir, envie um email para<a href="mailto:celio25reis@hotmail.com"> celio25reis@hotmail.com</a>.</strong></p>
<p class="style5 style4"> </p></td>
</tr>
</table></td>
</tr>
<tr>
<td width="21%" align="left" valign="top" class="style5">Nome:</td>
<td width="79%" align="left" valign="top"><span id="sprytextfield5"><span id="sprytextfield1">
<input name="nome" type="text" id="nome" size="40" maxlength="60" />
<span class="textfieldRequiredMsg">Nome Obrigatório.</span></span><br />
</span></td>
</tr>
<tr>
<td align="left" valign="top" class="style5">Email:</td>
<td align="left" valign="top"><span id="sprytextfield2">
<input name="email" type="text" id="email" size="40" maxlength="60" />
<br />
<span class="textfieldRequiredMsg">Email Obrigatório</span><span class="textfieldInvalidFormatMsg">Email Inválido.</span></span>
<span class="textfieldRequiredMsg">
</span></td>
</tr>
<tr>
<td align="left" valign="top" class="style5">Telefone:</td>
<td align="left" valign="top"><span id="sprytextfield3">
<input name="contato" type="text" id="contato" size="30" maxlength="60"/>
<span class="textfieldRequiredMsg"><br />
Telefone Obrigatório.</span></span><br />
</td>
</tr>
<tr>
<td align="left" class="style5">Assunto:</td>
<td align="left" valign="top"><textarea name="pedido" cols="24" rows="3" id="pedido"></textarea>
</td>
</tr>
<tr>
<td align="left" class="style5">Observações:</td>
<td align="left" valign="top"><textarea name="observacao" cols="24" rows="3" id="textfield2"></textarea>
<span id="countsprytextarea3"> </span> <br />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="left" valign="top"><input type="submit" name="button" id="button" value="Enviar" />
<input type="reset" name="button2" id="button2" value="Limpar" /></td>
</tr>
</table></td>
</tr>
</table>
</form>
<?php
}else{
$headers = "Content-type: text/html; charset=Unicode-UTF-8\r\n";
$corpo .= "<font color=6666FF><h2><b><i>Formulário Recebido Via Site</i></b></h2></font><br><br>";
$corpo .= "<font color=6666FF size=3><b><i>Nome:</i></b></font> " . $_POST["nome"] . "<br>";
$corpo .= "<font color=6666FF size=3><b><i>Email:</i></b></font> " . $_POST["email"] . "<br>";
$corpo .= "<font color=6666FF size=3><b><i>Telefone:</i></b></font> " . $_POST["contato"] . "<br><br>";
$corpo .= "<font color=6666FF size=3><b><i>Pedido:</i></b></font> " . $_POST["pedido"] . "<br><br>";
$corpo .= "<font color=6666FF size=3><b><i>Observações:</i></b></font> " . $_POST["observacao"] . "<br>";
mail("celio25reis@hotmail.com", "Contato Via Site", $corpo, $headers);
echo "<h1><Font Color=6666FF> Mensagem Enviada com Sucesso!</color></h1>";
}
?>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {validateOn:["blur"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {validateOn:["blur"]});
//-->
</script>
Logicamente, esse codigo ai ta com validação de campos, mas caso alguem deseje ter a pasta de validação, envie um email para celio25reis@hotmail.com e tentarei ajudar no que puder.
Lembrem-se que esse codigo que passei, é pra ser colado dentro de um fragmento html na sua pagina de contato.
Não se esqueçam que se forem utilizar esse codigo como esta, devem tirar as tags para validação dos campos, ou a frase de advertencia aparecera no formulario.
Um forte abraço à todos e uma boa navegação pelo Publisher
Célio Reis
Anderson Sales disse:
adicionei este formulário ao site do publisher que criei. porém não sei onde configurar para que os comentários nele deixados sejam encaminhados par meu e-mail. e quero saber se há um modo de ancaminhar automaticamente minha newsletter para os meus visitantes que assim permitirem bastando um clique num local específico.
Ezequiel disse:
Gostaria de saber como faz para criar um formulário de inscrição de um congresso e nesse formulário ter uma opção de pagamento em boleto bancário.