SdevLab – Tutorial | HTML Form

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

HTML Form

Um formulário é uma região de um arquivo html que tem a função de interagir com quem está navegando. O formulário normalmente é utilizado para colher informações, e para isto utiliza as tags demonstradas no exemplo abaixo.


<html>
   <head>
      <title>
           Teste 17
      </title>
   </head>
   <body>
      <form>
           Nome:
           <input type="text" name="nome">
           <br>
           Conhece HTML?:
           <br>
           <input type="radio" name="html" value="sim">Sim
           <br>
           <input type="radio" name="html" value="nao">Não
           <br>
           Ja fez os outros tutoriais?
           <br>
           <input type="checkbox" name="respostas" value="sim">Sim
           <br>
           <input type="checkbox" name="respostas" value="nao">Não
           <br>
           <input type="checkbox" name="respostas" value="quase">Quase todos
           <br>
      </form>
   </body>
</html>

Copie o código acima e cole no Bloco de Notas, salve como teste17.html e execute o exemplo para ver o resultado.

O exemplo mostra um formulário simples, sua tag principal é a <form> que junto com seu par </form> delimitam a região do formulário.
A tag input é utilizada para inserir um elemento, os elementos do exemplo acima são uma caixa de entrada de texto, que serve para receber texto obviamente, um radio, que é utilizado para receber respostas de pergunta de resposta única, e um checkbox, que é utilizado para receber respostas de uma pergunta de multipla escolha.
Estas tags são diferenciadas pelo argumento do atributo type. Para eu definir um elemento <input> do tipo entrada de texto, utilize o argumento type=”text”. Para definir um radio, type=”radio”, e para definir um checkbox, type=”checkbox”.

Em todas as tags do exemplo temos outro atributo em comum, que é o name. Este atributo é utilizado como variável, e vai “receber” o que o usuário digitar ou selecionar no elemento. Coloquei receber entre aspas porque na verdade não é que ele recebe o que o usuário digitar, se fossemos tratar os dados utilizando alguma outra linguagem como php por exemplo, este “nome” que eu defino para o elemento é a referência que o html passa para o php, mas por enquanto não se preocupe com isso.

Por último, no caso do checkbox e do radio tinha ainda um outro atributo dentro do elemento type, o value. Este atributo é o valor que o html vai enviar para a linguagem de programação que vai tratar os dados do formulário. No exemplo não colocamos value dentro da caixa de texto porque a idéia era deixá-la em branco. Caso desejássemos inicializá-la com algum valor, bastaria inserir o atributo value com o texto desejado.

Outros elementos de formulário

TextArea
TextArea é uma caixa de entrada de texto semelhante a text, porém ela pode receber uma quantidade muito maior de caracteres. Exemplo:

<textarea rows="10" cols="30">
     texto
</textarea>

Note que diferente de outros elementos, se eu quiser inicializar o meu textarea basta eu colocar o texto desejado entre as tags <textarea> e </textarea>. Os atributos rows e cols vão estabelecer o tamanho da área de texto.

Menu drop down
O menu drop down é uma lista que tem várias opções e o usuário só pode escolher uma delas. Segue o exemplo abaixo:


<select name="opcoes">
   <option value="1"> Opção 1
   <option value="2"> Opção 2
   <option value="3"> Opção 3
</select>

Todas as tags <option> com seus respectivos valores que estiverem dentro das tags <select> e </select> farão parte do menu drop down.

Fieldset
O fieldset coloca uma borda no formulário, se você tiver mais de um formulário dentro da mesma página compensa usar porque fica mais organizado. Segue exemplo:

<fieldset>
   <legend>Teste</legend>
   <form>
      Item 1 <input type="text">
      Item 2 <input type="text">
   </form>
</fieldset>

Tudo que estiver entre as tags <fieldset> e </fieldset> vai ficar entre as bordas, e a tag <legend> define o título do fieldset.

Botão
Os usos do botão se dão quando o html se mistura com outra linguagem, mas como este não é nosso foco, vou somente postar sua tag.

<button>
     Texto
</button>

Botão Submit
O botão submit quando clicado, vai enviar o conteúdo de um formulário para algum outro arquivo. Como ele faz isso? Muito simples, adicionando o atributo action=”nome_arquivo_exemplo.php” method=”get” dentro da tag <form> isto é possível. Segue abaixo exemplo:


<form action="teste.php" method="get">
   Enviar este texto <input type="text" name="texto">
   <input type="submit" value="Submit">
</form>

No exemplo quando o usuário clicar no botão Submit, o conteúdo da caixa de texto será passada para o arquivo teste.php.

Enviando um formulário por email

Para enviar um formulário por email o procedimento é bastante parecido com o anterior. Basta fazer como no exemplo abaixo:

<form action="MAILTO:seuemail@host.com.br" method="post" enctype="text/plain">
   Enviar este texto por email<input type="text" name="texto">
   <input type="submit" value="Enviar">
</form>

Este foi o tutorial sobre formulários. Até a próxima!
😛

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

Fonte de pesquisa: w3schools.com/html

2 comentários sobre “SdevLab – Tutorial | HTML Form

  1. Pingback: SdevLab – Tutoriais | Imagem em HTML « Sanoj's devLab
  2. Pingback: SdevLab – Curso| Aprenda HTML 4.1 Online | Sanoj's devLab

Deixe uma resposta

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