Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo

Nesta aula vamos aprender a construir formulários com elementos em HTML 5, trabalhar com imagens, áudio e vídeo em nosso site.

2. •Atributos de Tags.
•Hiperlinks.
•Imagens.
•Formulários.
•Multimídia:
–Áudio.
–Vídeo.

3. •Ver apêndice: “Lista de Atributos de Tags”
•Para que servem?
– Determinam propriedades das tags.
•Todas as tags tem os mesmos atributos?
–Não, tags podem ter atributos característicos.
•Exemplo: tag img, tem o atributo src.

4. •Definem uma ligação entre dois documentos
HTML ou outro tipo de arquivo:
–Marcado pela tag a com os atributos:
•href, define a URL de ligação do hiperlink.
•title, define uma descrição sobre o hiperlink quando
o mouse é posicionado sobre.
•target, define em qual janela o endereço
especificado por href irá abrir.
<a href=“www.tiago.blog.br” title=“Blog do Tiago”
target=“_blank”>Abrir o blog</a>

5. •Exibe uma imagem no documento HTML.
–Nota: A imagem não é incorporada. A tag img apenas
aponta para uma imagem que existe em um dado
diretório.
–Atributos utilizados:
•src define o caminho, nome e extensão da imagem.
•alt define um texto alterativo caso a imagem não abra.
•width e height definem, respectivamente largura e
altura.

<img src=“imagens/foto.jpg” alt=“Minha Foto”
width=“75” height=“150” />

6. •Definição:
–Formulários HTML são usados ​​para transmitir
dados para um servidor.
–Um formulário pode conter elementos de entrada,
como campos de texto, caixas de seleção, botões
de rádio, apresentar botões e mais. Um formulário
também pode conter listas de seleção,
textarea, fieldset, legend, e elementos
de rotulagem.

7. •Como construir formulários?
–Tag <form> que recebe os atributos:
Atributo Valor Descrição
action URL de processamento do formulário. Especifica qual é o arquivo, geralmente do
lado do servidor que irá processar o
formulário.
accept-charset character_set: por exempo: UTF-8 Especifica as codificações de caracteres, que
são para ser usados ​​para o envio de
formulário
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Especifica como o formulário de dados
devem ser codificados quando enviá-lo para
o servidor (apenas para o método = "post")
method get
post
Especifica o método HTTP para o envio de
formulário de dados
name “meu_formulario” Específica o nome do formulário.

8. •Tag form outros atributos:
–Atributos para trabalhar com CSS.
–Atributos para trabalhar com eventos.
–Definir em qual janela o form vai executar.
–Outros atributos menos importantes:
•xml:lang
•lang
•dir
•title

9. •Definida a tag form e seus atributos, pode-se
colocar os elementos de entrada – input – do
formulário:
–Tags para definição desses elementos:
•<input>
•<textarea>
•<button>
•<select>
•<option>
•<optgroup>

10. •Tag <input/>
–Define cada “forma” do elemento pelo valor do
atributo type:
•button
•checkbox
•file
•hidden
•image
•password
•radio
•submit
•text

11. •Tag <input type=“button” />
–Define um botão dentro do formulário:

12. •Tag <input type=“checkbox” />
–Define “caixas de marcação” dentro do formulário,
onde todas as caixas de um grupo devem ter o
mesmo nome:

13. •Tag <input type=“file” />
–Define um campo e um botão para o usuário
selecionar um arquivo no seu computador: usado
pata upload de arquivos:

14. •Tag <input type=“hidden” />
–Campo “escondido” dentro do formulário, usado
para guardar informações não visíveis ao usuário:

15. •Tag <input type=“image” />
–Usado para que uma imagem possa ter uma
função no formulário, na maioria das vezes como
um botão:

16. •Tag <input type=“password” />
–Campo de senha, onde a senha digitada não
aparece de fato:

17. •Tag <input type=“radio” />
–Parecido com o checkbox, no entanto somente
é possível marcar uma opção:

18. •Tag <input type=“sumit” />
–Acrescenta um botão no formulário que irá
submete-lo ao servidor:

19. •Tag <input type=“text” />
–Campo de “texto comum” usado para todo o tipo
de entrada:

20. •Outras tags de formulário:
–button
–select
–option
–textarea
–optgroup

21. •Tag button que define um botão:
–É mais semântica!
–Define-se o tipo de botão pelo atributo type:
•submit
•button
•reset
–Pode definir valor também: atributo value.
–Pode-se colocar uma imagem como botão, basta a
imagem ser filha.
–Nota: a W3C recomenda que se use input para criar
botões.

22. •Como ficaria um formulário com os botões
marcados pela tag button:

23. •Tag textarea, utilizada quando se precisar
colocar um texto maior no formulário:

24. •Tags: select, option e optgroup:
–Lista de opções pré definidas, que podem ser
agrupadas ou não:

25. •Tags: select, option e optgroup:
–Rederização do código anterior:

26. •Tags para organização do formulário:
–fieldset
•Organiza um grupo de elementos, de preferência
dentro da tag form.
–legend
•Coloca uma descrição no fieldset
–label
•Coloca uma descrição para cada elemento do
formulário.
•Veja arquivos de exemplo dos formulários.

28. •Melhoramento da tag input e form:
–Novos valores possíveis de type.
–Novos atributos.
–Tratamento específico de valores.
•Novos elementos – tags – para formulários:
–datalist
–keygen
–output
•Implantação de validações na marcação.

29. Novos valores para o atributo type da tag input:
•color
•email
•number
•range
•search
•tel
•url
•date
•datetime
•datetime-local
•month
•time
•week

30. •Tag <input type=“color” />
–Botão que quando clicado abre uma janela para
seleção de cor. Quando enviado envia em a cor no
padrão hexadecimal.

31. •Tag <input type=“search” />
–Campo para formulários de busca.

32. •Tag <input type=“range” />
–Campo de ajuste de uma determinada escala,
sendo possível determinar previamente valores
mínimos e máximos.

33. •Tag <input type=“date” />
–Quando o campo tem foco, abre um calendário.

34. •Tag <input type=“email” />
–Campo para endereços de e-mail, só aceitando
valores válidos.

35. Novos atributos para a tag input e alguns da form
•autocomplete
•autofocus
•form
•formaction
•formenctype
•formmethod
•formnovalidate
•formtarget
•height e width
•list
•min ou max
•multiple
•pattern (regexp)
•placeholder
•required
•step

36. •Tag <input type=“text” placeholder=“ Digite Aqui” />
–Valor “default” – padrão – de um determinado
campo, serve de descrição para o preenchimento.

37. •Tag <input type=“text” required=“required” />
–Obriga o preenchimento do campo para que o
formulário possa ser submetido.

38. •Tag <input type=“text” autocomplete=“off” />
•Tag <form method=“post” autocomplete=“on” />
–Pode ser usado nas duas tags, sendo que habilita
(ou não) o auto-completar em campos de
formulário com base em valores inseridos
anteriormente.
•Tag <input type=“text” autofocus=“autofocus” />
–Define que assim que o documento é aberto no
navegador, ele recebe o foco do cursor do mouse

39. •Tag <input type=“text” form=“ meu_formulario” />
–Utiliza-se quando o elemento não é filho direto da tag
form, ou seja, está fora do “abre e fecha” da tag.
–Dica: Aplica-se as outras tags de formulário.
–Dica: Pode-se atribuir a mais de um formulário:
•<input type=“text” form =“formulario1 formulario2” />
•Tag <input type=“submit” formaction=“processar.php” />
–Substitui o atributo action da tag form
•Tag <input type=“submit” formmethod=“get” />
–Substitui o atributo method da tag form

40. •Tags:
– <form action=“processar.jsp” formnovalidade=“formnovalidade” />
–<input type=“submit” formnovalidade=“formnovalidade” />
•Diz que um formulário não é validado ao ser
submetido. Quando setado no input, sobreescreve
em form
•Tag <input type=“submit” formenctype=“multipart/form-data” />
–Diz ao servidor qual é o enctype que o
formulário está sendo enviado, válido somente
para o método de envio post. Quando setado no
botão, substitui o valor enctype da tag form

41. •Tag <input type=“submit” formtarget=“_blank” />
–Define em qual janela será exibida a resposta do
formulário. Se definida no botão sobreescreve o valor
de target na tag form
•Tag <input type=“number” min=“1” max=”10” />
–Específica valores de mínimo e máximo para um
campo do tipo: number, range, date, datetime,
datetime-local, month, time e week
•Dica: Usando em campos do tipo date e afins, use as datas
no formato: 22-09-2012.

42. •Tag <input type=“image” height=“18” width=“40” />
–Usado somente para type igual a image, sendo
que específica, respectivamente a altura e largura
da imagem.
•Tag <input type=“text” pattern=“[A -Z]{2}” />
–Define uma expressão regular que define como o
valor do campo deve ser, no exemplo, quero as
siglas dos estados brasileiros, em maiúsculo : “SP”.
Este atributo pode ser aplicado a type igual a:
text, search, url, tel, email e password

43. •Tag <input type=“range” step=“3” />
–Define o “tamanho do passo” do valor de um elemento,
pode ser usado com os atributos mim e max. Por exemplo,
valores avançam no exemplo de 3 em 3, sendo que este
atributo pode ser usados nos type iguais a number,
range, date, datetime, datetime-local, month,
time e week
•Tag <input type=“text” multiple =“multiple” />
–Define que um input (para os type email e file
apenas) podem receber mais de um valor, no caso
selecionar mais de um arquivo, ou mais de um endereço
de email no campo.

44. •Tag <input type=“text” list =“lista_navegadores” />
–Referencia um elemento de lista criado pela tag
datalist. Funciona como uma espécie de
“auto-complete”, onde quando o campo recebe o
foco, ele exite a lista de opções.

45. •Novas tags de formulário adicionas ao grupo
visto anteriormente:
–datalist
–keygen
–output

46. •Tag <datalist>:
–Prove um container abrigando os valores que
serão exibidos como “autocomplete”.

47. •Tag <keygen>:
–Prove um meio de autenticação entre cliente e servidor.
Gerando – no momento da submissão - um par de chaves,
uma privada (armazenada no cliente) e uma pública
(armazenada no servidor). A junção das suas chaves dá (ou
não) autenticação do cliente no servidor.
<form action=“gerar_chave.jsp" method="get">
Usuário: <input type="text" name=“usuario" />
Chave: <keygen name=“seguranca" />
<input type="submit" />
</form>

48. •Tag <output name=“x" for="a b"></output>
–Funciona como um container para saída de um
cálculo, onde o atributo for contem o valor do
atributo name de dois campos.
<input type="number" name="a" value="10">
<input type="number" name="b" value="50">
<output name="x" for="a b"></output>

49. •Nova implementação, mais específica para
executar áudio e vídeo:
–Implementação nativa no navegador:
•Vantagem: ganho de processamento.
–Como era feito antes?
•Uso de plugins para os navegadores.
•Uso das tags <embed> e <object>
–Problemas de “ontem e hoje”:
•Suporte do formato das mídias não é universal.

50. •Tag <audio>
–Serve de container para execução áudios no
navegador.
–Atributos para manipulação e configuração dos
aúdios:
•controls, loop, preload, autoplay
–Tag <source> para especificar onde está o
arquivo:
•src
•type

51. Código e Renderização:

52. •Tag <video>
–Serve de container para executar vídeos no
navegador.
–Atributos para manipulação e configuração dos
vídeos:
•controls, width, height
–Tag <source> para especificar onde está o
arquivo:
•src
•type

53. Código e Renderização:

54. •Ainda existem outros elementos HTML 5 que
iremos estudar, no entanto alguns deles
sozinhos não representam função específica:
–Exemplo: <canvas>.
•Outras tags como <iframe>, <object> e
<embed> veremos quando estudarmos
JavaScipt, quando teremos conhecimento para
fazer algo interessante com elas.

55. www.tiago.blog.br
[email protected]