TECNOLOGIAS PARA INTERNET II (AULA 05)
8 pág.

TECNOLOGIAS PARA INTERNET II (AULA 05)


DisciplinaProgramação para Internet Rica322 materiais900 seguidores
Pré-visualização1 página
07/03/2019
1
TECNOLOGIAS PARA
INTERNET II
Aula 05 \u2013 Formulários em HTML5.
Prof. Ronaldo Candido
posinf_ronaldo@yahoo.com.br 2019.1
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Conteúdo Programático
1. Formulários em HTML5;
2. Tags básicas de entrada;
3. Tabela de tipos;
4. Tags avançadas ;
5. Exemplos e exercícios.
07/03/2019
2
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Formulários em HTML5
\u2022 Os formulários são usados para entrada de dados na internet.
Com certeza você já preencheu dados, fez algum cadastro, ou
algo parecido na internet e isto foi feito usando um formulário.
\u2022 Um formulário vai pegar os dados que o usuário digitar e enviá-
los para uma aplicação que fica em um servidor para que estes
dados sejam processados por alguma linguagem residente no
servidor, como PHP, ASP, Python, tendo alguma finalidade
(cadastro, atualização de dados, etc.). O processamento é
realizado mediante as regras de negócio definidas para a
aplicação.
\u2022 A nova versão do HTML5 proporciona muitas
novidades sobre o uso dos formulários.
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Elementos de um formulário
\u2022 <form> \uf0e8 Elemento que representa um formulário. Todos os
elementos do formulário devem ficar dentro deste bloco,
fechado com </form> dentro do <body>. Atributos:
\uf0d8 id = &quot;nomeFormulário&quot;
\uf0d8 action = &quot;url&quot; (para onde serão enviadas as informações).
\uf0d8 method = &quot;método&quot; (envio das informações - get ou post).
<!-- exemplo01.html -->
<form id=&quot;frmTeste&quot; action=&quot;http://www.google.com/search&quot; method=&quot;get&quot;>
<label>Google: <input type=&quot;search&quot; id= &quot;txtBusca&quot; /></label>
<input type=&quot;submit&quot; value=&quot;Buscar...&quot; />
</form>
07/03/2019
3
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Elementos de um formulário
\u2022 <fieldset> \uf0e8 Permite um agrupamento de informações geralmente
utilizado como seção dentro de um formulário.
\u2022 <legend>\uf0e8 Especifica um título para o fieldset.
\u2022 <label>\uf0e8 Usado para o título de uma tag de entrada.
\u2022 <input>\uf0e8 Permite a entrada de vários tipos diferentes de dados, por
exemplo, números, e-mail, telefone, url, senha, data, cor, checkbox,
etc. Usar o atributo type=\u201c\u201d.
\u2022 <button> \uf0e8 Representa um botão no HTML, podendo ou não estar
associado a um formulário.
\u2022 <select> \uf0e8 Criação de uma caixa de listagem onde somente um
elemento será escolhido.
\u2022 <datalist>\uf0e8 Lista de opções para a entrada de dados.
\u2022 <textarea>\uf0e8 Caixa de texto com múltiplas linhas e colunas.
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Tipos de <input>
\u2022 Especificado no atributo type=&quot;&quot; :
*Suportado pelo Safari
07/03/2019
4
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Tipos de <input>
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Outros atributos dos elementos do form
\u2022 autocomplete\uf0e8 Ativa/desativa o valor a ser autocompletado.
\u2022 autofocus\uf0e8 O foco será colocado no campo automaticamente.
\u2022 maxlength\uf0e8 Limita a quantidade de caracteres em um campo.
\u2022 multiple\uf0e8 Ativa múltiplas seleções em listas.
\u2022 pattern\uf0e8 Permite definir expressões regulares de validação.
\u2022 placeholder\uf0e8 Texto explicativo do conteúdo do campo.
\u2022 readonly\uf0e8 Campo somente de leitura, não permite alterar.
\u2022 required\uf0e8 Campo obrigatório (valor precisa ser preenchido).
\u2022 selected \uf0e8 Usado para indicar um valor automaticamente
selecionado em uma lista.
\u2022 size\uf0e8 Tamanho em caracteres do campo.
\u2022 title\uf0e8 Texto de dica que aparecerá no elemento.
Os atributos devem ser informados na tag no formato atributo=\u201cvalor\u201d 
07/03/2019
5
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo02.html \u2013 Formulário
<html> <head> <title>Formulários</title> </head>
<body><form id=&quot;frmDados&quot;><fieldset> <legend>Dados cadastrais</legend>
<input type=&quot;hidden&quot; id=&quot;hidValor&quot; value=&quot;001&quot; />
<label>Nome:<input type=&quot;text&quot; id=&quot;txtNome&quot; required=&quot;required&quot; /></label>
<label>Tel.:<input type=&quot;text&quot; placeholder=\u201cContato&quot; id=&quot;txtTel&quot; /></label>
<label>Site:<input type=&quot;url&quot; id=&quot;txtSite&quot; /></label>
<label>E-mail:<input type=&quot;email&quot; id=&quot;txtEmail&quot; /></label>
<label>Senha:<input type=&quot;password&quot; maxlength=&quot;8&quot; id=&quot;txtSenha&quot; /></label>
<br /><br /><label>Data:<input type=&quot;date&quot; id=&quot;txtData&quot; /></label>
<label>Data/hora: <input type=&quot;datetime-local&quot; id=&quot;txtDataHora&quot; /></label>
<label>Mês:<input type=&quot;month&quot; id=&quot;txtMes&quot; /></label>
<label>Semana:<input type=&quot;week&quot; id=&quot;txtSemana&quot; /></label>
<label>Hora:<input type=&quot;time&quot; id=&quot;txtHora&quot; /></label>
<br /><br /><label>Idade:<input type=&quot;number&quot; id=&quot;txtIdade&quot; /></label>
<label>Tipo (1-4):<input type=&quot;range&quot; min=&quot;1&quot; max=&quot;4&quot; id=&quot;rngTipo&quot; /></label>
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
<label>Cor:<input type=&quot;color&quot; id=&quot;clrCor&quot; /></label>
<label>Deficiência física?<input type=&quot;checkbox&quot; id=&quot;chkDefic&quot; /></label><br /><br />
<label>CEP:<input type=&quot;text&quot; id=\u201ctxtCep&quot; pattern=&quot;\d{5}-?\d{3}&quot; /></label>
<label>Cidade:<select id=&quot;cmbCidade&quot;>
<option value=&quot;1&quot;>Rio de Janeiro</option>
<option value=&quot;2&quot;>São Paulo</option>
<option value=&quot;3&quot; selected=&quot;selected&quot;>Brasília</option></select></label>
<label>UF:<input type=&quot;text&quot; id=&quot;txtUF&quot; list=&quot;lstEstados&quot;><datalist id=&quot;lstEstados&quot;>
<option value=&quot;RJ&quot;><option value=&quot;SP&quot;><option value=&quot;DF&quot;></datalist></label>
<label>Tem filhos ?<input type=&quot;radio&quot; name=&quot;rdoFilhos&quot; />Sim
<input type=&quot;radio&quot; name=&quot;rdoFilhos&quot; />Não</label>
<br /><br /><label>Selecione arquivo:<input type=&quot;file&quot; id=&quot;filArquivo&quot; /></label>
<label>Clicar na imagem:<input type=&quot;image&quot; src=&quot;imagens/img01.gif&quot; width=&quot;30\u201c
height=&quot;30&quot; id=&quot;imgFigura&quot; /></label><br /><br />
<label>Observações:<textarea rows=&quot;4&quot; cols=&quot;30&quot; id=&quot;txtObs&quot;></textarea></label>
<input type=&quot;submit&quot; value=&quot;Enviar&quot; /><input type=&quot;reset&quot; value=&quot;Cancelar&quot; />
</fieldset></form></body></html>
07/03/2019
6
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo02.html no Google Chrome
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
1. Criar o projeto TecIntII_Aula05_Exercicio01 deste formulário em HTML5:
Exercícios práticos
07/03/2019
7
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
2. Criar o projeto TecIntII_Aula05_Exercicio02 de um formulário de
Encomenda de pizza:
Exercícios práticos
a) Usar 4 sabores e 3 bebidas nas
listas;
b) Pizza, Nome, Endereço e Forma
de pagamento são campos
obrigatórios;
c) O botão Enviar mostrará em uma
caixa de alerta com todos os
dados da encomenda, enquanto
que o botão Limpar apagará
todos os campos;
d) Formatações e estilos à sua
escolha (se desejar) ;
e) Acrescente a imagem de pizza no
topo da página à esquerda
AULA 05
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
1. SANTOS, F. G. Tecnologias para Internet II. Rio de Janeiro:
SESES, 2018 (Livro-texto, Capítulo 3).
2. DEITEL, H. M.; DEITEL, P. J. Ajax, Rich Internet Applications e
desenvolvimento Web para programadores. São Paulo:
Pearson, 2008.
3. Tutorial sobre HTML5 (Acesso em 06/03/19) :
https://www.w3schools.com/html/html5_intro.asp
4. Artigo sobre HTML5 (Acesso em 06/03/19) :
https://www.devmedia.com.br/o-que-e-o-html5/25820
Bibliografia Básica
07/03/2019
8
Fim da apresentação
Prof. Ronaldo Candido
posinf_ronaldo@yahoo.com.br
Dúvidas, sugestões ou análises ???
TECNOLOGIAS PARA
INTERNET II