Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Material 6 (PARTE 2) Tecnologia para Internet I
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
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
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
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
Compartilhar
Prévia do material em texto
HTML ‐ FORMULÁRIO
PARTE 2
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>
EXEMPLO: Disparo de eventos
SUBMIT E RESET
Disparo de eventos (EXEMPLO)
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 charset="UTF-8">
<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>
Lado Cliente (client‐side)
● O navegador, analisará o código HTML, e descobrirá quais são os
anexos adicionais que são necessários (fotos, imagens, sons) e
solicitará ao servidor.
● Note que nessa tecnologia, quem desempenha a função de
processamento é o cliente, por isso ele é chamada de client‐side.
● A função do servidor é somente fornecer os arquivos solicitados.
Como exemplos de tecnologias, client‐side podemos citar: HTML,
linguagens script (JavaScript, Jscript, VBScript), Java Applet, Flash e
outros.
● Em uma tecnologia desse tipo, normalmente precisa‐se instalar
programas adicionais ou plug‐ins em nosso navegador, já que o
cliente é quem fará o processamento.
Utilizando jQuery (Máscara)
jQuery é uma biblioteca JavaScript cross‐browser desenvolvida para
simplificar os scripts client‐side que interagem com o HTML. jQuery é a
mais popular das bibliotecas JavaScript.
Vamos precisar dos dois arquivos citados abaixo:
Na figura ao lado os campos
DATA, TELEFONE E CEP estão
formatados com a utilizando do
jQuery. O slide a seguir tem o
código deste exemplo.
<!DOCTYPE html>
<html lang="pt‐br">
<head>
<meta charset="iso‐8859‐1">
<script src="jquery‐1.11.1.js"> </script> <script src="jquery.maskedinput.js"> </script>
</head>
<body>   – Siginifica espaço.
<p>Utilizando jQuery (Máscara)</p>
<form>
<label for="campoDt">Data:</label> <input type="text" id="campoDt" size="6"> <br>
<label for="campoTel">Tel.: </label> <input type="text" id="campoTel" size="9">
<br>
<label for="campoCep">CEP:</label> <input type="text" id="campoCep" size="5">
<br> <br>
<input type="submit" value="enviar">
</form>
<script>
jQuery(function($){
$("#campoDt").mask("99/99/9999");
$("#campoTel").mask("(99)9999‐9999");
$("#campoCep").mask("99999‐999"); });
</script>
</body>
</html>
A Tag <label> juntamente com o parâmetro for, poderá fazer um vínculo entre
um rótulo e um campo do formulário de forma que, ao clicar no rótulo, você
terá o mesmo resultado que se clicasse no campo vinculado.
Bookmarks from Material 5 - Ambientes Internet (PARTE 2).pdf
Material 5 - Ambientes Internet
Material 5 - Ambientes Internet 2
Compartilhar