Formulários podem ser usados para enviar dados pela web. Freqüentemente são usados como formulários de contato para converter informação inserida por um usuário em um email, como esse.
Sozinhos, formulários são inúteis. Eles precisam estar ligados a um programa que irá processar os dados inseridos pelo usuário. Esses programas podem ser feitos de muitas formas e estão fora do escopo desse minicurso. Se você mantém seu site em um serviço de host (como o 000webhost), eles vão poder te ajudar com isso e provavelmente te dar instruções claras e simples de como, por exemplo, fazer um formulário “formulário-para-email” funcionar.
As tags básicas usadas num formulário HTML são form, input, textarea, select e option.
Form define o formulário. Dentro desta tag existe um atributo obrigatório, o action, que diz o endereço do programa para onde os dados do formulário serão enviados.
O atributo opcional method diz a forma em que o formulário será enviado, e pode ter o valor get (que é o default) ou post. Freqüentemente usa-se post que esconde a informação (get manda a informação através da URL). Leia mais sobre esses métodos de requisição.
Um elemento form vai se parecer com isso:
<form action="script.php" method="post"></form>
A tag input é a “mãezona” no mundo dos formulários. Ela pode ter dez formas, mostradas abaixo:
- <input type=”text”/> é a caixa de texto padrão. Ela também pode ter uma atributo value, que define o valor inicial da caixa de texto.
- <input type=”password”/> é similar à caixa de texto, mas o que for digitado pelo usuário não vai ser visível.
- <input type=”checkbox”/> é uma checkbox, que pode ser marcada e desmarcada pelo usuário. Ela pode ter um atributo checked, usado no formato <input type=”checkbox” checked=”checked” />, que faz com que o estado inicial do checkbox seja estar marcado.
- <input type=”radio”/> é similar a um checkbox, mas o usuário só pode selecionar um radio button em um grupo. Um grupo de radio buttons é definido pelo atributo name – radio buttons com o valor de name igual pertencem ao mesmo grupo. Também pode ter um atributo checked, usado do mesmo modo que no checkbox.
- <input type=”file”/> é uma campo que permite procurar e escolher um arquivo em seu computador, como você vê quando abre ou salva um documento na maioria dos programas, e é usado para permitir ao usuário fazer upload de arquivos.
- <input type=”submit”/> é um botão que quando clicado envia o formulário. Você pode controlar o texto que aparece no botão de enviar (como você pode fazer com os tipos button e reset – veja abaixo) com o atributo value, por exemplo:
<input type="submit" value="Ooo. Veja. Texto em um botão. Wow"/>
- <input type=”image”/> é uma imagem que vai enviar as coordenadas do ponto em que o usuário clicou. Também exige um atributo src, como a tag img.
- <input type=”button”/> é um botão que não faz nada sem código extra adicionado. Quando a gente estudar javascript você vai entender qual a utilidade dele.
- <input type=”reset”/> é um botão que quando clicado vai limpar os campos do formulários para seus valores default. Nem sempre é uma boa idéia, porque não tem tanta utilidade assim (quantas vezes você já precisou limpar um formulário?) e o usuário pode acabar clicando nele sem querer (e acredite, isso não é legal). Portanto, só coloque esse botão na sua página se você realmente achar necessário.
- <input type=”hidden”/> é um campo que não aparece na tela e é usado para passar informação como o nome da página em que o usuário está, o endereço de email para o qual o post vai ser enviado ou qualquer outro dado que não seja inserido pelo usuário.
Perceba que a tag input fecha a si mesma com um “/>” no final.
Uma textarea é, basicamente, uma textbox grande. Ela requer os atributos rows (linhas) e cols (colunas) e funciona assim:
<textarea rows="5" cols="20">Um monte de texto aqui.</textarea>
A tag select trabalha junto com a tag option pra criar caixas de seleção drop-down.
Elas são usadas assim:
<select>
<option value="primeira opção">Opção 1</option>
<option value="segunda opção">Opção 2</option>
<option value="terceita opção">Opção 3</option>
</select>
Quando o formulário é enviado (quando você clica no botão submit), o valor da opção (tag option) selecionada é enviado.
Similar ao atributo checked de checkboxes e radio buttons, uma tag option também pode ter um atributo selected (selecionado), usado no formato:
<option value="mouse" selected="selected">Roedor</option>
Todas as tags mencionadas acima vão aparecer “bem bonitinhas” na página, mas se você enviar seu formulário pra um programa que manipule formulários todos esses campos vão ser ignorados. Isso acontece porque campos de formulários precisam de nomes, pra que possam ser identificados pelo programa responsável por eles. Por isso, pra todos os campos do formulário, o atributo name precisa ser adicionado, por exemplo:
<input type="text" name="esponjafalante"/>
Um formulário pode parecer com esse aí embaixo. (Nota: esse formulário não vai funcionar a menos que exista um arquivo “entreemcontato.php”, declarado no atributo action da tag form tag, pra manusear os dados enviados).
<form action="entreemcontato.php" method="post">
<p>Nome:</p>
<p><input type="text" name="nome" value="Seu Nome"/></p>
<p>Comentários:</p>
<p><textarea name="comentários" rows="5" cols="20">
Seus comentários
</textarea></p>
<p>Você é:</p>
<p><input type="radio" name="vocee" value="homem" checked="checked"/>
Homem
</p>
<p><input type="radio" name="vocee" value="mulher"/>
Mulher
</p>
<p><input type="checkbox" name="cefet" checked="checked"/>Estudo no Cefet</p>
<p>O que você achou desse minicurso?</p>
<select>
<option value="bom">Bom</option>
<option value="regular" selected="selected">Regular</option>
<option value="ruim">Ruim</option>
</select>
<p><input type="submit" value="Enviar"/></p>
<p><input type="reset" value="Limpar"/></p>
</form>
Formulários tem um outro nível de complexidade que você vai poder se aprofundar quando a gente chegar no Tutorial Avançado de HTML.
Páginas Relacionadas
Exemplos
Referência
Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
