Material 4 - Tecnologias WEB

•

ESTÁCIO

Felipe Falcao

26.04.2015

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 19 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 19 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 19 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias Web

5.958 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

HTML ‐ FORMULÁRIO
● Para permitir uma maior interação entre “sistemas
computacionais” e os seus usuários, é necessário a
existência de mecanismos de entrada que permita
o computador identificar o que seus usuários
querem, quais ações a serem executadas, etc...
● O formulário em HTML é um meio do usuário entrar 
com informações para um sistema. 
HTML ‐ FORMULÁRIO
Os formulários são delimitados pela Tag<FORM>… </FORM>.
● Esta tag permite agrupar vários elementos de formulário (botões,
campos de texto, campos de seleção,…) e possui os atributos
obrigatórios:
NAME
● Indica o nome que identifica o elemento formulário na página.
● Um id pode ser especificado, ou não. (como se fosse um apelido)
METHOD
Indica sob qual método de envio dos dados (digitados no formulário)
será utilizado:
● “POST” os dados são enviados em pacotes.
● “GET” os dados são enviados e codificados na URL.
Tag FORM
ACTION
Indica o endereço para onde os dados serão enviados.
mailto:someone@somewhere.com
● Permite abrir o programa de e‐mail correspondente.
Tag FORM
Tag FORM
É possível inserir qualquer elemento HTML básico
numa tag FORM (textos, botões, quadros, relações,…)
mas, sobretudo, é interessante inserir elementos
interativos.
Estes elementos interativos são: 
● INPUT 
● TEXTAREA
● SELECT 
Tag FORM: Campo INPUT
A tag INPUT é a tag essencial dos formulários, pois permite criar um
bom número de elementos “interativos”.
A sintaxe desta tag é a seguinte:
<input type="tipo" value= "valor padrão" name= "nome do elemento" >
● O atributo type permite definir o tipo de elemento que será exibido
no form.
● Atributo value permite definir um valor padrão para o campo.
● Atributo name é essencial pois ele permite a manipulação do campo
nos javascript ou servlets (linguagem script).
Form: input type=“tipos” 
Campos de Texto: Os campos de texto são usados quando você quer que o
usuário digite letras, números, etc. em um formulário.
<!DOCTYPE html>
<html lang= "pt‐br" >
<head>
<meta http‐equiv= "content‐type “ content= "text/html; charset=iso‐8859‐1 ">
<title>Campo Texto</title>
</head>
<body>
<form>
Primeiro nome:
<input type="text" name="firstname">
<p> Último nome: <input type="text" name="lastname"> </p>
</form>
</body> No navegador:
</html>
● Campos ocultos consistem de um par nome/valor embutido no
código HTML;
● São úteis para que o autor da página possa enviar informações ao
servidor ;
● Informações sobre configuração da aplicação;
● Comandos, para selecionar comportamentos diferentes da aplicação;
● Parâmetros especiais para controle da aplicação, sessão ou dados
que pertencem ao contexto da aplicação.
Sintaxe
<input type="hidden" name="nome" value="valor">
Campos Ocultos
Form: input type=“tipos” 
CAMPOS DE SENHA
<form>
<p> Nome do Usuário: <input type="text" name="user"> </p>
<p> Senha: <input type="password" name="senha"> </p>
</form>
No navegador:
Note que quando você digita caracteres
num campo de senha, o navegador
exibe asteriscos ou bullets em vez dos
caracteres.
Form: input type=“tipos” 
Caixas de Seleção: As caixas de seleção são usadas quando você quer que o
usuário selecione uma ou mais opções de uma quantidade limitada de escolhas.
<!DOCTYPE html>
<html lang="pt‐br">
<head>
<meta http‐equiv="content‐type" content="text/html; charset=iso‐8859‐1">
<title>Caixa de Seleção</title>
</head>
<body>
<form>
<input type="checkbox" name="transporte" value="1" checked>
Eu tenho uma bicicleta
<p>
<input type="checkbox" name="transporte" value= "2" >
Eu tenho um carro </p>
</form> No navegador:
</body>
</html>
Form: input type=“tipos” 
Botões Radiais: Os botões radiais são usados quando você quer que o usuário
selecione uma entre uma quantidade limitada de escolhas.
<!DOCTYPE html>
<html lang="pt‐br">
<head>
<meta http‐equiv="content‐type" content="text/html; charset=iso‐8859‐1">
<title>Botão Radio</title>
</head>
<body>
<form>
<input type="radio" name="sex" value="male" checked> Masculino
<p> <input type="radio" name="sex" value="female">
Feminino </p>
</form>
</body>
</html> No navegador:
No lado servidor:
Variável chama "sex".
Seu conteúdo será male
ou female dependendo da seleção.
Os elementos <input> com atributo TYPE: Submit, Reset e Button servem para 
disparar eventos: 
Submit ‐ Envio do formulário.
Reset ‐ Reinicialização do formulário.
Button ‐ Evento programado
por JavaScript. 
● O value do botão define o
texto que mostrará. 
● Apenas se o botão contiver um
atributo name, o  conteúdo de 
value será enviado ao servidor. 
Disparo de eventos
Disparo de eventos (EXEMPLO) 
<form action="mailto:destino@email.com" method="post" enctype="text/plain"> 
Nome <input type="text" name="nome" size="30" maxlength="100"> 
<br> 
E‐mail <input type="text" name="email" size="25" maxlength="100" value="@"> 
<br> 
Cidade <input type="text" name="cidade" size="20" maxlength="60"> 
<br> Sexo <br> 
<input type="radio" name="sexo" value="Masculino" checked> Homem
<br> 
<input type="radio" name="sexo" value="Feminino"> Mulher
<br> 
<input type="checkbox" name="receber_info" checked> 
Desejo receber novidades deste site em meu e‐mail. 
<br> <br> 
<input type="submit" value="Enviar formulário"> 
<br> <br> 
<input type=“reset" value="Apagar tudo"> 
</form>
Disparo de eventos (EXEMPLO) 
Disparo de eventos (EXEMPLO) 
formulario.html
Disparo de eventos
Button 
● Botões do tipo button não têm comportamento pré‐definido, sendo
usados apenas em scripts no lado cliente.
<!DOCTYPE html>
<html lang="pt‐br">
<head>
<meta http‐equiv="content‐type" content="text/html; charset=iso‐8859‐1">
<title>Button Type</title>
</head>
<body>
<form> <input type="button" name="exibirSenha" value="Mostrar senha" >
</form>
</body>
</html> 
File
● O campo de entrada de arquivo permite ao usuário especificar um
arquivo local cujo conteúdo será enviado junto com o formulário
submetido, como upload.
● Para isso, o elemento form do formulário que o contém deve
especificar os atributos method="POST" e
enctype="multipart/form‐data".
<form id="formCLiente" name="formCli" method="post“
enctype="multipart/form‐data">
<input type="file" name="arquivo"/>
</form>
No navegador:
Form: input type=“tipos” 
A tag <select> exibe o campo de seleção baseado em uma lista
previamente definida.
Sintaxe:
<select name= "nome" size= “10" >
● Quem define o nome (name) do controle é o elemento select, enquanto cada
valor (value) é dado por um option.
● O rótulo de cada opção é dado pelo texto entre as tags de abre e fecha
option.
● O atributo size define o número de opções (linhas) exibidas da lista.
● A exibição da barra de rolagem é automática e fica a cargo do browser.
● O atributo selected define uma opção pré‐selecionada (inicialmente "ligada").
É recomendado sempre definir explicitamente o que estará pré‐selecionado,
para evitar ambigüidade de comportamento em diferentes browsers.
Form: select
Form: select
<!DOCTYPE html> 
<html lang="pt‐br"> 
<head> 
<meta http‐equiv="content‐type" content="text/html; charset=iso‐8859‐1"> 
<title>Select</title> 
</head>  No navegador: Antes de clicar      Depois de clicar
<body> 
<form> 
<select name="cars" size="1"> 
<option value="Volvo">Volvo 
<option value="Volkswagen">Volkswagen 
<option value="FIAT" selected>FIAT  
<option value="Ford">Ford 
</select>
</form>
</body> 
</html>