Instituto Federal de Educação, Ciência e Tecnologia
Introdução ao HTML
Introdução ao HTML
(Formulários)
(Formulários)
Prof. Henrique Neto
Técnico em
Técnico em
Computação Gráfica
AGENDA
Definindo formulários em HTML
Páginas Web nem sempre se resumem à amostragem
de conteúdo estático;
Em momentos, surge a necessidade de permitir, por
meio de alguns elementos, a interação com o usuário;
Tal interação consiste em apresentar algo ao usuário,
Definindo formulários em HTML
Formulários consistem em mecanismos pelo qual o
navegador pode coletar informações de usuários;
Eles são utilizados para enviar dados pela web;:
– De uma página para um servidor (aplicação);
O servidor trata de entender os dados oriundos do
formulário e fica responsável por gerar um resultado ou
Definindo formulários em HTML
Definindo formulários em HTML
Definindo formulários em HTML
Definindo formulários em HTML
Definindo formulários em HTML
Exemplos:
Serviço de CEP via formulário
A tag <form>
As tags <form> e </form> são responsáveis por definir o
formulário.
Essa tag possui três atributos:
–
action
–
name
A tag <form>
Atributo obrigatório:
– action:
• Especifica o endereço de destino ou
aplicação web para onde os dados do formulário serão enviados para
processamento;
Atributos opcionais:
– name: especifica um nome para o formulário;
A tag <form>
Os valores que podem ir no atributo method:
– get:
• Quando se deseja requisitar alguma informação do servidor;
– post:
A tag <form>
Lembrar de fazer uma imagem com os passos do envio
A tag <form>
Corpo geral de um formulário:
<form
action=
”www.site.com/web_app”
name=
”form1”
method=
”get”
>
. . .
A tag <form>
O formulário em si (tag <form>) é, basicamente, uma caixa
(container) pelo qual configuramos a action (aplicação) e o method
de envio de dados (get ou post);
Somente assim, ele não é capaz de realizar nenhuma interação
com a aplicação web;
Para que tal interação seja possível, é necessários outros
elementos que possibilitem coletar dados em diferentes formatos:
Existem três subtags para esse propósito:
– input;
– textarea;
A tag <form>
Um formulário é pode ser composto por três subtags:
– input:
• Entradas curtas diversas, como caixas de texto, botões de escolha, senhas, arquivos.
– select:
• Entradas predefinidas em listas de seleção.
– textarea:
A tag <form>
Corpo geral de um formulário:
<form
action=
”www.site.com/web_app”
name=
”form1”
method=
”get”
>
<input
. . .
/>
<select
. . .
/>
<textarea
. . .
/>
A tag <form>
Corpo geral de um formulário:
<form
action=
”www.site.com/web_app”
name=
”form1”
method=
”get”
>
<input
. . .
/>
<select
. . .
/>
<textarea
. . .
/>
</form>
OBS: Um formulário não precisa possuir as três tags juntas.
A tag <form>
Um formulário pode ser composto por três subtags:
– input:
• Entradas curtas diversas, como caixas de texto, botões de escolha, senhas, arquivos.
– select:
• Entradas predefinidas em listas de seleção.
– textarea:
A tag <input>
Serve para coletar alguma informação e se apresenta de
dez tipos diferentes de entrada:
– text;
– password;
– checkbox;
A tag <input>
Cada tipo de entrada possui determinado propósito e
aparece no navegador da seguinte forma:
– text: área de texto
– password: texto com leitura protegida (campo
A tag <input>
Cada tipo de entrada possui determinado propósito e
aparece no navegador da seguinte forma:
– radio: botão de opção única
– checkbox: texto com leitura protegida (campo
A tag <input>
Cada tipo de entrada possui determinado propósito e
aparece no navegador da seguinte forma:
– text: área de texto
– password: texto com leitura protegida (campo
A tag <input>
Cada tipo de entrada possui determinado propósito e
aparece no navegador da seguinte forma:
– file: permite a escolha de um arquivo do computador
– button: botão com ação a ser definida pelo
A tag <input>
Cada tipo de entrada possui determinado propósito e
aparece no navegador da seguinte forma:
– reset: botão com ação de limpar os dados do
formulário.
– submit: botão com ação de enviar (submeter) os
A tag <input>
Cada tipo de entrada possui determinado propósito e
aparece no navegador da seguinte forma:
– image: imagem clicável para submeter os dados
A tag <form>
Um formulário pode ser composto por três subtags:
– input:
• Entradas curtas diversas, como caixas de texto, botões de escolha, senhas, arquivos.
– select:
• Entradas predefinidas em listas de seleção.
– textarea:
A tag <select>
Essa tag define uma lista de itens para escolha do
A tag <form>
Um formulário pode ser composto por três subtags:
– input:
• Entradas curtas diversas, como caixas de texto, botões de escolha, senhas, arquivos.
– select:
• Entradas predefinidas em listas de seleção.
– textarea:
A tag <textarea>
Primeiro Formulário ...
Vamos fazer nosso primeiro formulário!
–
Vamos fazer um formulário de pesquisa e
aproveitar o
para isso;
Vamos utilizar a tag
<input>
para entrada de dados:
–
text
;
–
submit
;
Como diria
Jack, o estripador:
Primeiro Formulário ...
Criando o corpo do formulário:
<form
action=
”http://www.google.com/search”
name=
”form1”
method=
”get”
>
Primeiro Formulário ...
Criando o corpo do formulário:
<form
action=
”http://www.google.com/search”
name=
”form1”
method=
”get”
>
</form>
Primeiro Formulário ...
Criando o corpo do formulário:
<form
action=
”http://www.google.com/search”
name=
”form1”
method=
”get”
>
</form>
Primeiro Formulário ...
Atributos da tag <input>:
– type:
• Define as forma do input;
– name:
• Define o nome do campo (campo do objeto para o formulário);
• É por meio do nome que um componente pode ser referenciado por alguma linguagem de programação;
– value:
• Define o valor do campo;
Primeiro Formulário ...
Colocando um input (tipo text) no formulário:
<form
action=
”http://www.google.com/search”
name=
”form1”
method=
”get”
>
O que você quer pesquisar?
<input
type=
”text”
name=
”q”
value=
””
/>
Primeiro Formulário ...
Colocando um input (tipo text) no formulário:
<form
action=
”http://www.google.com/search”
name=
”form1”
method=
”get”
>
O que você quer pesquisar?
<input
type=
”text”
name=
”q”
value=
””
/>
Primeiro Formulário ...
Colocando um input (tipo text) no formulário:
<form
action=
”http://www.google.com/search”
name=
”form1”
method=
”get”
>
O que você quer pesquisar?
<input
type=
”text”
name=
”q”
value=
””
/>
Primeiro Formulário ...
Colocando um input (tipo text) no formulário:
<form
action=
”http://www.google.com/search”
name=
”form1”
method=
”get”
>
O que você quer pesquisar?
<input
type=
”text”
name=
”q”
value=
””
/>
Primeiro Formulário ...
Código HTML
Primeiro Formulário ...
Código HTML
OBS: Campo input do tipo “text”
e com nome “q” e com nenhum
Primeiro Formulário ...
Código HTML
Primeiro Formulário ...
Colocando um input (tipo submit) no formulário:
<form
action=
”http://www.google.com/search”
name=
”form1”
method=
”get”
>
O que você quer pesquisar?
<input
type=
”text”
name=
”q”
value=
””
/>
<input
type=
"submit"
name=
"pesquisa"
value=
"Pesquisar"
>
Primeiro Formulário Completo
Código HTML
Vamos fazer mais outro?
Vamos fazer nosso segundo formulário!
–
Vamos fazer um formulário de
cadastro
e
aproveitar uma
aplicação
no computador
do professor;
Vamos utilizar a tag
<input>
para entrada de
dados:
–
text;
Segundo Formulário ...
Criando o corpo do formulário:
<form
action=
”http://IP_notebook/app.php”
name=
”form2”
method=
”post”
>
Segundo Formulário ...
Criando o corpo do formulário:
<form
action=
”http://IP_notebook/app.php”
name=
”form2”
method=
”post”
>
</form>
Segundo Formulário ...
Criando o corpo do formulário:
<form
action=
”http://IP_notebook/app.php”
name=
”form2”
method=
”post”
>
</form>
Servidor que contém a aplicação
OBS: IP_notebook representa
Segundo Formulário ...
Criando o corpo do formulário:
<form
action=
”http://IP_notebook/app.php”
name=
”form2”
method=
”post”
>
</form>
Vamos utilizar nesse formulário ambos os
Métodos e ver o que acontece.
Segundo Formulário ...
Colocando um input (tipo text) no formulário:
<form action=”http://IP_notebook/app.php”
name=”form2”
method=”post”>
Informa os dados para cadastro:
<br>
Nome do Aluno:
<input
type=
”text”
name=
”nome”
value=
””
/>
Curso do Aluno:
<input
type=
”text”
name=
”curso”
value=
””
/>
Segundo Formulário ...
Colocando um input (tipo submit) no formulário:
<form action=”http://IP_notebook/app.php”
name=”form2”
method=”post”>
Informa os dados para cadastro: <br>
Nome do Aluno:
<input type=”text” name=”nome” value=””/> <br><br>
Curso do Aluno:
<input type=”text” name=”curso” value=””/> <br><br>
<input type=”submit” name=”Enviar”>
Segundo Formulário Completo
Código HTML
Navegador
Vamos testar com o método
GET
<form action=”http://IP_notebook/app.php”
name=”form2”
method=”get”>
Informa os dados para cadastro: <br>
Nome do Aluno:
<input type=”text” name=”nome” value=””/> <br><br>
Curso do Aluno:
<input type=”text” name=”curso” value=””/> <br><br>
<input type=”submit” name=”Enviar”>
</form>
Método GET
Vamos testar com o método
GET
Só mais uma vez ...
Vamos fazer nosso terceiro formulário!
–
Vamos fazer um formulário de
login
e
aproveitar uma
aplicação
no computador do
preofessor;
Vamos utilizar a tag
<input>
para entrada de
dados:
–
text
;
–
passworld
;
Terceiro Formulário ...
Criando o corpo do formulário:
<form
action=
”http://IP_notebook/app.php”
name=
”form3”
method=
”post”
>
Terceiro Formulário ...
Criando o corpo do formulário:
<form
action=
”http://IP_notebook/app.php”
name=
”form3”
method=
”post”
>
</form>
Terceiro Formulário ...
Criando o corpo do formulário:
<form
action=
”http://IP_notebook/app.php”
name=
”form3”
method=
”post”
>
</form>
Servidor que contém a aplicação
OBS: IP_notebook representa
Terceiro Formulário ...
Criando o corpo do formulário:
<form
action=
”http://IP_notebook/app.php”
name=
”form3”
method=
”post”
>
</form>
Com é um formulário de login, é interessante
Terceiro Formulário ...
Fomulário completo:
<form
action=
”http://IP_notebook/app.php”
name=
”form3”
method=
”post”
>
Entre com os dados para efetuar o seu Login:
<br> <br>
Login:
<input
type=
"text"
name=
"login"
/> <br> <br>
Senha:
<input
type=
"password"
name=
"pass"
/>
<br> <br>
Terceiro Formulário ...
Exemplo:
Código HTML
Exercício
Modifique o formulário feito anteriormente, acrescentando
Exercício
Exercício
Modifique o formulário feito anteriormente, acrescentando um input
Exercício
Exercício
Modifique o
formulário feito anteriormente,
acrescentando um
input do tipo
“checkbox”,
conforme mostrado ao lado:
Exercício
Exercício CASA/CLASSE
Escreva o HTML que representa a seguinte página de
Exercício CASA/CLASSE
Escreva o HTML que representa a seguinte página de
Algumas fontes interessantes ...
Dúvidas sobre tags?
–
http://www.w3schools.com/
Aprofundar mais os conhecimentos
• https://www.udacity.com
• https://www.udemy.com
• https://www.coursera.com
