O documento descreve os principais elementos de formulários HTML, incluindo caixas de texto, listas de opções, botões de rádio, caixas de checagem e botões. Ele explica como usar esses elementos para coletar informações do usuário e enviar os dados digitados por meio de métodos GET ou POST.

1. Aula 005
Aplicativos
PRONATEC
Programa Nacional de Acesso ao
Ensino Técnico e Emprego

2. PRONATEC
Programa Nacional de Acesso
ao Ensino Técnico e Emprego

3. 1. Formulários HTML
• <form>...</form> define um formulário dentro do
documento html o que está interno à tag
• Parâmetros: ACTION indica a ação a ser tomada na
submissão do formulário: abrir um novo documento,
enviar um email ou executar um script
• Method: POST – os dados do formulário são enviados
de forma oculta, GET os dados são enviados descritos
na própria URL separados pelos caracteres “?” e “&”
• Exemplo de URL com GET:
www.pronatec.com/cadastra.php?codigo=1&nome=cl
audio%20luis – indica chamado GET com dois campos:
“codigo” valendo “1” e “nome” valendo “claudio luis”

4. 2. Elementos de Formulários
• Dentro dos <form>..</form> podemos incluir
diversos elementos próprios de formulários :
• Caixa de entrada de texto curto
• Caixa de entrada de texto longo
• Lista de opções
• Botões de rádio
• Caixas de validação
• Botões: enviar, apagar e personalizados

5. 3. Texto Curto
• <INPUT type=text name=nome value=texto id=t1>
• TYPE: text indica texto comum curto
• NAME: nome do elemento para o formulário
• ID: identificador único do objeto para javascript
• VALUE: valor de texto padrão para aparecer, esse
valor também será o conteúdo entrado pelo
teclado
• Pode ser usado com senha se type=“password”
• Pode limitar o tamanho com SIZE=Nº caracteres

6. 4. Lista de Opções
• <SELECT> <OPTION>..</OPTION>...</SELECT
• Exemplo:
<SELECT name=estação>
<OPTION>Primeiro</OPTION>
<OPTION>Segundo</OPTION>
<OPTION>Terceiro</OPTION>
</SELECT>
• Monta uma lista de opções com 3 itens: Primeiro, Segundo ou Terceiro.
• O tipo de lista é “caixa combinada”, você clica na seta da direita para abrir
a lista e escolher qual deseja
• Parâmetro SELECT: NAME=nome do elemento, ID=identificador do
elemento
• Parâmetro OPTION: NAME=nome da opção para o formulário, VALUE =
valor numérico ou texto assumido pelo SELECT quando essa opção for
escolhida

7. 5. Botões de Rádio
• <INPUT type=radio name=estação value=1>Primavera <BR>
• <INPUT type=radio name=estação value=2>Verão <BR>
• <INPUT type=radio name=estação value=3>Outono <BR>
• <INPUT type=radio name=estação value=4>Inverno <BR>
• TYPE: sempre “radio”
• NAME: o mesmo para o grupo de botões, se for diferente
pertence a outro grupo
• VALUE: valor assumido pelo grupo quando esse botão for
selecionado
• CHECKED: indica que o botão está marcado (ativo)

8. 6. Caixa de Validação
• <INPUT type=checkbox name=ativo>Ativado
• TYPE: sempre “checkbox”
• NAME: nome do elemento para o formulário
7. Botão Enviar Dados
• <INPUT type=submit name=ok value=Enviar>
• TYPE: sempre “submit”
• NAME: nome do elemento para o formulário
• VALUE: texto que aparece no botão
• Sempre que clicado o formulário executará ACTION

9. 8. Botão Apagar Campos
• <INPUT type=reset value=Apagar Campos>
• TYPE: sempre “reset”
• VALUE: texto que aparece no botão
• Sempre que clicado volta o formulário ao estado padrão
9. Dados ocultos
• <INPUT type=hidden name=site value=1>
• TYPE: sempre “hidden”
• NAME: nome do elemento no formulário
• VALUE: valor que fica oculto e será enviado
• Serve para conter valores pré-definidos