Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

139 visualizaciones

Publicado el

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

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×