0% acharam este documento útil (0 voto)

37 visualizações45 páginas

Aula 04 Formularios

O documento apresenta uma aula sobre formulários em HTML, descrevendo os principais elementos como input, label, textarea, radio buttons, checkbox e os atributos name, value, action e method.

Enviado por

Sebiuson Pedro

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

37 visualizações45 páginas

Aula 04 Formularios

O documento apresenta uma aula sobre formulários em HTML, descrevendo os principais elementos como input, label, textarea, radio buttons, checkbox e os atributos name, value, action e method.

Enviado por

Sebiuson Pedro

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 45

AULA:

Formulários
Autoria Web

Alba Lopes, Profa.

http://docentes.ifrn.edu.br/albalopes
[email protected]
Formulários

Osformulários em HTML são usados para selecionar diferentes tipos

de entradas do usuário

Sãobastante utilizados para realizar buscas e introduzir dados

pessoais

Sãodelimitados pelas tags

<form>

</form>

Alba Lopes, Profa.

[email protected]
Formulários

Input (Entrada)
É a tag mais utilizada em formulários
Conjunto de campos e botões
<form>
<input>
<input>
...
<input>
</form>

Alba Lopes, Profa.

[email protected]
Formulários

Input (Entrada)
O tipo é dado através do atributo type
<input type=“text”>

Tipos da tag <input>

text – quando se deseja digitar letras, números, etc
radio – quando se deseja oferecer opções para escolha única
checkbox – múltiplas escolhas
password – campo de senha
button – botão
submit – botão para envio de dados
reset – limpa todos os campos do formulário

Alba Lopes, Profa.

[email protected]
Formulários

Input (Entrada)
A tag <label> pode ser usada para atribuir um título ao campo do
formulário

<label> Nome: </label>

<input type=“text”>

Alba Lopes, Profa.

[email protected]
Formulários

<html>
<head>
<title>Meu primeiro formulário</title>
</head>
<body>
<form>
<p>
<label> Nome: </label>
<input type=“text”>
</p>
</form>
</body>
</html>

Alba Lopes, Profa.

[email protected]
Formulários

<html>
<head>
<title>Meu primeiro formulário</title>
</head>
<body>
<form>
<p>
<label> Nome: </label>
<input type=“text”>
<br>
<label> Sobrenome: </label>
<input type=“text”>
</p>
</form>
</body>
</html>

Alba Lopes, Profa.

[email protected]
Atributo Name

Os formulários são utilizados para repassar dados para outras

páginas web
Quando o formulário é enviado, os dados são empacotados e
enviados para um servidor web que processará os dados através de
scripts
São páginas por exemplo, PHP, ASP, JSP...
O atributo name identifica o dado quando ele for empacotado e
enviado através da web
Por isso, cada campo do formulário deve ter este atributo

Alba Lopes, Profa.

[email protected]
Formulários

<html>
<head>
<title>Meu primeiro formulário</title>
</head>
<body>
<form>
<p>
<label> Nome: </label>
<input type=“text” name=“nome”>
<br>
<label> Sobrenome: </label>
<input type=“text” name=“sobrenome”>
</p>
</form>
</body>
</html>

Alba Lopes, Profa.

[email protected]
Continuando com os tipos de Input

 No tipo de botões “radio” um outro atributo é necessário

 Atributo value

 As opções de um conjunto de elementos rádio são agrupadas

através do atributo name
 Apenas uma das opções com o mesmo valor do atributo name pode
ser selecionada

...
<label> Sexo: </label>
<input type=“radio” value=“Masculino” name=“sexo”> Masculino <br>
<input type=“radio” value=“Feminino” name=“sexo”> Feminino <br>
...

Alba Lopes, Profa.

[email protected]
Radio Button

...
<label> Sexo: </label>
<input type=“radio” value=“Masculino” name=“sexo”> Masculino <br>
<input type=“radio” value=“Feminino” name=“sexo”> Feminino <br>
...

Alba Lopes, Profa.

[email protected]
Password

...
<label> Login: </label>
<input type=“text” name=“login”><br>
<label> Senha: </label>
<input type=“password” name=“senha”>
...

Alba Lopes, Profa.

[email protected]
Checkbox – Caixas de Seleção

 Do mesmo modo que os radio buttons, nos checkbox, as

opções de um conjunto de elementos são agrupadas através
do atributo name

...

<label>Onde estuda:</label> <br>

<input type="checkbox" name="onde_estuda" value="IFRN"> IFRN <br>
<input type="checkbox" name="onde_estuda" value="UFRN"> UFRN <br>
<input type="checkbox" name="onde_estuda" value="UERN"> UERN <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro...

...

Alba Lopes, Profa.

[email protected]
Checkbox – Caixas de Seleção

Alba Lopes, Profa.

[email protected]
Button Submit

 O formulário, ao ser criado, é com a intenção de enviar os

dados para algum processamento
 O tipo “submit” cria um botão para que os dados possam ser
enviados para o destino

<button type=“submit“>Enviar </button>

...

Alba Lopes, Profa.

[email protected]
Button Submit

 Mas enviar para onde?

 Há um atributo action a ser inserido na tag <form> quando o
formulário é criado que deve indicar para onde os dados serão
submetidos. Ao ser pressionado o botão do tipo submit, os dados são
enviados.
<form action=“processa_dados.html”>
...
<input type="checkbox" name="onde_estuda" value="UFRN"> UFRN <br>
<input type="checkbox" name="onde_estuda" value="UERN"> UERN <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br>
<br>

<button type=“submit“>Enviar </button>

</p>
</form>

Alba Lopes, Profa.

[email protected]
Button Submit

 Mas enviar para onde?

 Outro atributo que é importante para o envio de dados é o parâmetro
method. Ele indica de que modo os dados do formulário serão
empacotados.
<form action=“processa_dados.html” method=“GET”>
...
<input type="checkbox" name="onde_estuda" value="UFRN"> UFRN <br>
<input type="checkbox" name="onde_estuda" value="UERN"> UERN <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br>
<br>

<button type=“submit“>Enviar </button>

</p>
</form>

Alba Lopes, Profa.

[email protected]
Button Submit

Osmétodos existentes são GET e POST. Ambos cumprem a mesma

tarefa, mas de maneiras diferentes
POST: empacota as variáveis e as envia de forma oculta para o servidor
GET: também empacota as variáveis, porém anexa os valores antes de
enviá-las para o servidor

http://www.teste.com.br/processa_dados.php?nome=Alba&sobrenome=Lopes

Alba Lopes, Profa.

[email protected]
Button Reset

O tipo “reset” faz com que o formulário volte ao estado inicial

(vazio ou com o valor que for especificado no atributo value)

<form action=“processa_dados.html” method=“GET”>

<button type=“submit“>Enviar </button>

<button type=“reset“> Limpar </button>
</form>
Alba Lopes, Profa.
[email protected]
Textarea

O elemento <textarea> cria um elemento de texto com mais de uma

linha de digitação

<form action=“processa_dados.html” method=“GET”>

...
<input type="checkbox" name="onde_estuda" value="UFRN"> UFRN <br>
<input type="checkbox" name="onde_estuda" value="UERN"> UERN <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br>
<br>
Observações<br>
<textarea name=“observacoes”></textarea>
<input type=“submit“ name=“enviar" value=“enviar”>
</form>

Alba Lopes, Profa.

[email protected]
Textarea

O elemento <textarea> cria um elemento de texto com mais de uma

linha de digitação

<form action=“processa_dados.html” method=“GET”>

...
<input type="checkbox" name="onde_estuda" value="UFRN"> UFRN <br>
<input type="checkbox" name="onde_estuda" value="UERN"> UERN <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br>
<br>
Observações<br>
<textarea name=“observacoes” rows=“4” cols=“20”></textarea>
<input type=“submit“ name=“enviar" value=“enviar”>
</form>

Alba Lopes, Profa.

[email protected]
Textarea

O elemento <textarea> cria um elemento de texto com mais de uma

linha de digitação

<form action=“processa_dados.html” method=“GET”>

...
<input type="checkbox" name="onde_estuda" value="UFRN"> UFRN <br>
<input type="checkbox" name="onde_estuda" value="UERN"> UERN <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br>
<br>
Observações<br>
<textarea name=“observacoes” rows=“4” cols=“20”></textarea>
...
</form>

Alba Lopes, Profa.

[email protected]
Textarea

Parainiciar o campo com algum texto, basta colocar entre as tags

de abertura e fechamento

<form action=“processa_dados.html” method=“GET”>

...
<input type="checkbox" name="onde_estuda" value="UFRN"> UFRN <br>
<input type="checkbox" name="onde_estuda" value="UERN"> UERN <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br>
<br>
Observações<br>
<textarea name=“observacoes” rows=“4” cols=“20”>
Texto inicial qualquer...
</textarea>
...
</form>

Alba Lopes, Profa.

[email protected]
Textarea

Parainiciar o campo com algum texto, basta colocar entre as tags

de abertura e fechamento

<form action=“processa_dados.html” method=“GET”>

...
<input type="checkbox" name="onde_estuda" value="UFRN"> UFRN <br>
<input type="checkbox" name="onde_estuda" value="UERN"> UERN <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br>
<br>
Observações<br>
<textarea name=“observacoes” rows=“4” cols=“20”>
Texto inicial qualquer...
</textarea>
...
</form>

Alba Lopes, Profa.

[email protected]
Select

 O elemento <select> cria um controle de menu na página web

 <select> e </select> delimita o bloco de opções (cria a caixinha do
menu)
 <option> e </option> cria cada uma das opções

Alba Lopes, Profa.

[email protected]
Select

<form action=“processa_dados.html” method=“GET”>

...
<select>
<option> Nova Cruz </option>
<option> Serrinha </option>
<option> Montanhas </option>
<option> Brejinho</option>
<option> Monte Alegre</option>
<option> Natal</option>
</select>
...
</form>

Alba Lopes, Profa.

[email protected]
Fieldset e Legend

Oselementos <fieldset> e <legend> criam uma borda que contorna o

formulário e uma legenda, respectivamente

Alba Lopes, Profa.

[email protected]
Fieldset e Legend

<form action=“processa_dados.html” method=“GET”>

Alba Lopes, Profa.

[email protected]
Fieldset e Legend

<form action=“processa_dados.html” method=“GET”>

<fieldset>
<legend>Exemplo de Formulário </legend>
...
<select>
<option> Nova Cruz </option>
<option> Serrinha </option>
<option> Montanhas </option>
<option> Brejinho</option>
<option> Monte Alegre</option>
<option> Natal</option>
</select>
...
</fieldset>
</form>
Alba Lopes, Profa.
[email protected]
Fieldset e Legend

 Criar uma página processa_dados.html que exiba uma mensagem:

 “Seus dados foram recebidos com sucesso!”

 Testar a submissão do formulário.

 A página processa_dados.html deve estar no action do formulário criado
 Ao clicar no botão Enviar, a página deve ser redirecionada para
processa_dados.html

Alba Lopes, Profa.

[email protected]
Fieldset e Legend

Alba Lopes, Profa.

[email protected]
Exercício de Fixação

Alba Lopes, Profa.

[email protected]
Exercício de Fixação
Crie uma página para ser redirecionada quando o botão de “Enviar”
for pressionado.

Alba Lopes, Profa.

[email protected]
Novidades de HTML 5 para formulários

 Nova versão de HTML

 Trouxe inovações como validação automática de campos de
formulário
 Inclui novos tipos de campo (type)
 email
 url
 Datas e horas
 number