Tutorial Iniciante de HTML: Formulários

2 03 2008

image

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.
    Exemplo de input type=Textbox
  • <input type=”password”/> é similar à caixa de texto, mas o que for digitado pelo usuário não vai ser visível.
    Exemplo de input type=password
  • <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.
    Exemplo de input type=Checkbox
  • <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.
    Exemplo de input type=Radio
  • <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.
    Exemplo de input type=File
  • <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.
    Exemplo de input type=Button
  • <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>

Exemplo de 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>

Exemplo de Select com três Options

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

BlogBlogs Tags: , , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

20 responses

2 05 2008
Mike

Até agora, essa foi a parte mais difícil! Talvez, o problema seja em lembrar tantas tags ao mesmo tempo e ainda há várias outras regras! Tem alguma dica de como lembrar de tudo isso mais facilmente?

Obg!:-)

2 05 2008
Elomar França

Realmente formulários são a parte mais complexa desse tutorial.

Não se preocupa em lembrar todas as tags. Coloque um site como esse ou esse nos seus favoritos, e dê uma olhada sempre que não souber que tag usar.

Com o tempo, você vai passar a precisar disso cada vez menos. =D

Dinada!

16 06 2008
Farley

Seu enviar_form.php esta mandando os campos Nome:, Email:, ICQ: em branco
para o email indicado

o que pode ser isso ?

8 07 2008
Tutorial Avançado de HTML: Formulários Acessíveis « Codando

[…] Formulários (Tutorial Iniciante de HTML) […]

5 08 2008
leonardo de lima silva

Bom eu gostei finalmente achei o que eu queria.
vlw espero que vcs faça o html avançado rapido.

5 08 2008
Elomar França

Olá, Leonardo

Obrigado!

O HTML Avançado já saiu! Acontece que alguns links não foram atualizados ainda. Já corrigi esse aí, e se você encontrar mais algum por favor avise.

4 09 2008
emerson

?????
deu pau não tem nunhuma formamais pratica pra explicar essa etapa ???

4 09 2008
emerson

outra coisa me explica melhor de q forma as mensagens vão
como e onde posso fazer pra visualizar e resultado doformulario q o usario faz.

23 09 2008
jujubinha

lindo esse tutorial

23 11 2008
ronaldo

dvgdfgdf

22 05 2009
Francisco Ferreira

Configurei um formulaio em meu site http://www.iksss.com mais estou encontrando dificuldade para tornar alguns campos obrigatorios, alguem pode nim ajuar?
Francisco Ferreira.
f@emdolicilioff.com.br

15 08 2009
Henrique Pereira de Souza

Muito obrigado mesmo pelas informações sobre formulários HTML. Pretendo montar uma pequena prova de 10 questões numa “homepage”, com opções do tipo “radio button”, sendo que uma caixa de alerta seria mostrada ao final da prova, com as respostas marcadas pelo aluno.

15 11 2009
Wilkinson

Muito interessante as informações. Mas estou com uma dúvida. Gostaria de saber
como faço para passar mais de um valor para a tag . Sendo que eu estou colocando esta tag, em um form e ela é do tipo submit. Estou fazendo dessa forma:

out.print(“”);


out.print(“alterarexcluir“);

eu posso colocar um “alias” para receber um valor para ser uma referência em outra pagina? como fiz ai no exemplo: value=id_altera=”+ red.getId_rede_cinema() ?

9 01 2010
roberto

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

21 03 2010
dhuankles

muito boa as dicas.. grande abraço e sucesso

9 04 2012
Paulo Ericsson

Caro amigo eu tenho uma pequena duvida… no caso para criar o arquivo entreemcontato.php basta criar um bloco de notas e salvar com a extensão .php na pasta que estão os outros arquivos html correto? ja que no nosso caso ja esta declarado… as resposta do formulario não deveriam aparecer nesse arquivo PHP?

Resumindo a pergunta nao consegui ver a resposta do formulario.

abraço!

20 09 2012
jovanildo

nao tem nenhum input so de numeros n?

1 06 2013
dfgd

alert(“olá de novo”)

24 09 2014
hosting

hosting

Tutorial Iniciante de HTML: Formulários | Codando

20 10 2015
Paulo

Olá, muito bom!!! É possível enviar o conteúdo do formulário para uma nova janela ou dentro do próprio formulário em uma caixa de texto?

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: