Formulários são uteis e práticos pois possibilitam o envio de informação rapidamente entre o visitante do site e o webmaster (no caso de ser um formulário de contacto).

Para começar um form é necessária uma página que processe o caminho e a informação do site ao e-mail, esta é a parte complicada, pois poderá ter de ser uma página em PHP, pelo que o servidor tem de suportar esta linguagem de programação. Mas também existem sites com serviços grátis de forms. Sugiro um em PHP: Contact PHP Email Form e um grátis: Bravenet.com: Email Forms.

Este é o código contentor dos controlos que o utilizador vai ver e que poderá preencher:

1. <form action="pagina_da_acção.html" method="post">
2. Aqui vamos colocar os controlos do formulário.
3. </form>

A pagina_da_acção.html será, ou a página PHP, por exemplo, como o site que sugeri, ou uma que o serviço disponibilize. Também é possível colocar o e-mail do webmaster, mas o utilizador depois de preencher, ao enviar, é aberto o programa que esteja por defeito para envio de e-mails, poderá ser o Outlook ou outro programa, mas o utilizador pode tê-lo como defeito e não o utilizar ou não estar configurado.

Aqui ficam os controlos possíveis para utilizador num form, não são obrigatórios, cada pessoa coloca os que achar necessário e até podem repetir os mesmos controlos (convém colocar nomes diferentes para distinguir).

Input

Caixas de texto:

1. <input type="text" name="nome" id="nome" value="" size="16">

Estes controlos não fecham da mesma maneira que os códigos gerais, pelo que, se utilizares XHTML, terás de colocar a barra no fim.

1. <input type="text" name="nome" id="nome" value="" size="16" />

• type="text" - este é o que identifica que se trata de um campo para introdução de texto.
• name="nome" - identifica e diferencia os campos
• id="nome" - o id pode ser utilizado para formatar o estilo através de CSS.
• value="" - neste caso está vazio, o valor que estiver entre aspas, será o que aparecerá dentro do campo, pode servir de identificação também, mas o utilizador ao escrever a sua informação terá de apagar esse texto… também pode deixar ficar mas confundirá a informação dele com esse texto.
• size="16" - tamanho do campo

Com o value="Nome"

1. <input type="text" name="nome" id="nome" value="Nome" size="16" />

Radio buttons:

Estes são pequenos círculos onde escolhemos um do grupo.

1. <input type="radio" name="grupo" value="singular">

• type="radio" - mais uma vez este identifica que se trata de um radio button
• name="grupo" - como este tipo de botões é para haver vários e selecionar um, o nome do grupo será igual para todos os radio button onde será possível escolher 1 desse grupo
• value="singular" - este será o nome de cada radio button

Checkboxes:

Semelhantes aos radio buttons, neste podemos selecionar quantas opções quisermos.

1. <input type="checkbox" name="grupo" value="singular">

Dropdown

Economiza espaço, é bom quando temos muitas opções. Ocupa apenas o espaço de um item, clicando podemos ver os restantes na vertical. Esta tag já fecha normalmente e as opções vêm entre essas tags de <select> e </select>.

1. <select name="localicade" size="1">
2. <option selected>Minho
3. <option>Porto
4. <option>Aveiro
5. <option>Coimbra
6. <option>Leiria
7. <option>Lisboa
8. <option>Sines
9. <option>Algarve
10. </select>

• size="1" - diz quantos items podemos ter visiveis
• selected - apenas colocamos numa das linhas, que será a que aparecerá selecionada

Textarea

Caixas de texto maiores para várias linhas de texto, para maiores mensagens. Abre-se a tag <textarea> e fecha-se </textarea> normalmente mas não se coloca nenhuns valores entre elas, apenas dentro da primeira.

1. <textarea name="mensagem" rows="6" cols="40"></textarea>

Labels

As labels não são controlos para o form, mas identificam-nos e separam-os melhor. Parecem ser textos nomes, mas em código relacionam-se com os campos.

1. <label for="nome">Nome</label>
2. <input type="text" name="nome" id="nome">

• label for="nome" o nome tem de ser igual ao name="nome" do input

Fieldset e Legend

O fieldset agrupa controlos do form que estejam relacionados, e o Legend atribui um nome.

1. <fieldset>
2. <legend>Informação Pessoal</legend>
3. Nome: <input name="nome" type="text">
4. Morada: <input name="morada" type="text">
5. </fieldset>
6. <fieldset>
7. <legend>Informação Adicional</legend>
8. Email: <input name="email" type="text">
9. </fieldset>

Send button

O botão mais importante: o botão de envio, pelo que não seria possível enviar a informação sem o botão… e sem a página bem configurada no action do form, no topo deste tutorial.

1. <input type="submit" value="Enviar">

• type="submit" - desta vez o tipo é "submit" para ficar com o efeito de um botão
• value="Enviar" - este será o texto que aparece no botão, senão colocarmos nada, aparecerá Submit

Temos também um botão para reset, onde é só alterar o type. Considero este controlo frustrante, pois costuma estar ao lado do botão para Enviar, e se uma pessoa está habituada a clicar no lado esquerdo para enviar e algumas pessoas trocam e metem primeiro o do Reset apaga a informação toda que colocámos no formulário, o que muita gente pode nem sequer dar-se ao trabalho de voltar a preenchê-lo. Não costuma ser muito necessário este botão, se o utilizador se enganar nalgum campo pode apagar por ele mesmo, não deverá haver assim tantas probabilidades de se enganar em todos os campos.

1. <input type="reset" value="Apagar">

Este post foi escrito em Sunday, February 18th, 2007 às 12:50 pm e encontra-se na categoria HTML-XHTML. Podes seguir qualquer comentário a esta entrada a partir dos RSS 2.0 feed. Podes deixar um comentário, ou trackback do teu próprio site.