Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Material 4 (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
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)
Submit - Envio do formulário.
Reset ‐ Reinicialização do formulário.
<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
BUTTON – EVENTO PROGRAMADO POR JAVASCRIPT
CALCULADORA SIMPLES
<CENTER>
<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text" NAME="Input" SIZE="16">
<BR>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one"
VALUE=" 1 " onClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two"
VALUE=" 2 " onClick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three"
VALUE=" 3 " onClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus"
VALUE=" + " onClick="Calc.Input.value += ' + '">
<BR>
EXEMPLO (PARTE 1):
<INPUT TYPE="button" NAME="four"
VALUE=" 4 " onClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five"
VALUE=" 5 " onClick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six"
VALUE=" 6 " onClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus"
VALUE=" - " onClick="Calc.Input.value += ' - '">
<BR>
<INPUT TYPE="button" NAME="seven"
VALUE=" 7 " onClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight"
VALUE=" 8 " onClick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine"
VALUE=" 9 " onClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times"
VALUE=" x " onClick="Calc.Input.value += ' * '">
<BR>
<INPUT TYPE="button" NAME="clear"
VALUE=" c " onClick="Calc.Input.value = ''">
BUTTON – EVENTO PROGRAMADO POR JAVASCRIPT
CALCULADORA SIMPLES
EXEMPLO (PARTE 2):
<INPUT TYPE="button" NAME="zero"
VALUE=" 0 " onClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt"
VALUE=" = " onClick="Calc.Input.value =
eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div"
VALUE=" / " onClick="Calc.Input.value += ' / '">
<BR>
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>
BUTTON – EVENTO PROGRAMADO POR JAVASCRIPT
CALCULADORA SIMPLES
EXEMPLO (PARTE 3):
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>
ATIVIDADE 1:
O tag <textarea> é um campo de texto multi‐linha.
● Os atributos rows e cols definem o número de linhas de altura e o de "caracteres"
de largura, respectivamente.
● O atributo wrap define se a mudança de linha será automática durante a digitação
("on"), ou somente quando for pressionado ENTER ("off").
<head>
<meta charset="UTF-8">
<title>textarea</title>
</head>
<body>
<form>
Observações: <p> <textarea name="obs" rows="5" cols="80"
placeholder="Digite o seu texto aqui" ></textarea> </p>
</form>
</body> No navegador:
Form: textarea
ATIVIDADE 2:
Outros: input type=“tipos”
No navegador:
Type=”range”
<body>
<font face="Trebuchet MS" size="15" color="green">
<marquee direction=right behavior=alternate scrollamount=1 scrolldelay=50>
Bem‐Vindo ao meu SITE
</marquee>
</font>
<form>
<font face="Trebuchet MS" size="5" color="blue">
Informe o valor em centímetros: </font> <br>
<input color="red" type="range" name="valuex"
value="12.4" step="0.2" min="0" max="20">
</form>
<font face="Trebuchet MS" size="2" color="red">
<span style = "position: absolute; left: 0px; top: 120px"> 0 </span>
<span style = "position: absolute; left: 65px; top: 120px"> 10 </span>
<span style = "position: absolute; left: 130px; top: 120px"> 20 </span> </font>
</body>
</html>
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.
ATIVIDADE 3:
<!DOCTYPE html>
<html lang="pt‐br">
<head>
<meta charset="UTF-8">
<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
Bookmarks from Material 4 (PARTE 2) - Tecnologia para Internet I.pdf
Bookmarks from Material 5 - Ambientes Internet (PARTE 2).pdf
Material 5 - Ambientes Internet
Material 5 - Ambientes Internet 2
Bookmarks from Material 6 (PARTE 2) - Tecnologia para Internet I.pdf
Bookmarks from Material 5 - Ambientes Internet (PARTE 2).pdf
Material 5 - Ambientes Internet
Material 5 - Ambientes Internet 2
Bookmarks from Material 5 (PARTE 2) - Ambientes Internet.pdf
Bookmarks from Material 5 - Ambientes Internet (PARTE 2).pdf
Material 5 - Ambientes Internet
Material 5 - Ambientes Internet 2
Bookmarks from Material 4(PARTE 3) - Tecnologia para Internet I.pdf
Bookmarks from Material 5 - Ambientes Internet (PARTE 2).pdf
Material 5 - Ambientes Internet
Material 5 - Ambientes Internet 2
Compartilhar