Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

49 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. • Atributos de Tags. • Hiperlinks. • Imagens. • Formulários. • Multimídia: – Áudio. – Vídeo.
  2. 2. • 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.
  3. 3. • 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>
  4. 4. • 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” />
  5. 5. • 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.
  6. 6. • 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.
  7. 7. • 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
  8. 8. • 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>
  9. 9. • Tag <input/> – Define cada “forma” do elemento pelo valor do atributo type: • button • checkbox • file • hidden • image • password • radio • submit • text
  10. 10. • Tag <input type=“button” /> – Define um botão dentro do formulário:
  11. 11. • 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:
  12. 12. • 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:
  13. 13. • Tag <input type=“hidden” /> – Campo “escondido” dentro do formulário, usado para guardar informações não visíveis ao usuário:
  14. 14. • 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:
  15. 15. • Tag <input type=“password” /> – Campo de senha, onde a senha digitada não aparece de fato:
  16. 16. • Tag <input type=“radio” /> – Parecido com o checkbox, no entanto somente é possível marcar uma opção:
  17. 17. • Tag <input type=“sumit” /> – Acrescenta um botão no formulário que irá submete-lo ao servidor:
  18. 18. • Tag <input type=“text” /> – Campo de “texto comum” usado para todo o tipo de entrada:
  19. 19. • Outras tags de formulário: – button – select – option – textarea – optgroup
  20. 20. • 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.
  21. 21. • Como ficaria um formulário com os botões marcados pela tag button:
  22. 22. • Tag textarea, utilizada quando se precisar colocar um texto maior no formulário:
  23. 23. • Tags: select, option e optgroup: – Lista de opções pré definidas, que podem ser agrupadas ou não:
  24. 24. • Tags: select, option e optgroup: – Rederização do código anterior:
  25. 25. • 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.
  26. 26. • 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.
  27. 27. Novos valores para o atributo type da tag input: • color • email • number • range • search • tel • url • date • datetime • datetime-local • month • time • week
  28. 28. • 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.
  29. 29. • Tag <input type=“search” /> – Campo para formulários de busca.
  30. 30. • Tag <input type=“range” /> – Campo de ajuste de uma determinada escala, sendo possível determinar previamente valores mínimos e máximos.
  31. 31. • Tag <input type=“date” /> – Quando o campo tem foco, abre um calendário.
  32. 32. • Tag <input type=“email” /> – Campo para endereços de e-mail, só aceitando valores válidos.
  33. 33. 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
  34. 34. • Tag <input type=“text” placeholder=“Digite Aqui” /> – Valor “default” – padrão – de um determinado campo, serve de descrição para o preenchimento.
  35. 35. • Tag <input type=“text” required=“required” /> – Obriga o preenchimento do campo para que o formulário possa ser submetido.
  36. 36. • 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
  37. 37. • 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
  38. 38. • 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
  39. 39. • 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.
  40. 40. • 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
  41. 41. • 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.
  42. 42. • 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.
  43. 43. • Novas tags de formulário adicionas ao grupo visto anteriormente: – datalist – keygen – output
  44. 44. • Tag <datalist>: – Prove um container abrigando os valores que serão exibidos como “autocomplete”.
  45. 45. • 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>
  46. 46. • 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>
  47. 47. • 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.
  48. 48. • 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
  49. 49. Código e Renderização:
  50. 50. • 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
  51. 51. Código e Renderização:
  52. 52. • 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.
  53. 53. www.tiago.blog.br tiago@tiago.blog.br

×