Responsive Web Development

HTML Advanced
Prof. Andrey A. Masiero – profandrey.masiero@fiap.com.br
Sumário

š Formulários
š Doctypes
š Div
š Span
š iFrame
š Meta tags
š Video
š Audio
Formulários
Formulários

š O termo formulário, ou form (em inglês), remete a um documento impresso.

š Esse documento possui lacunas que devem ser preenchidas pela pessoa que deseja
fazer parte de um cadastro ou fazer uma solicitação.
š No HTML esse termo possui um sentido bem parecido com o documento impresso.
š O formulário em HTML tem campos que o usuário deve preencher com suas informações
ou informações que ele deseja obter (no caso de uma busca em um determinado site).
š O HTML possui diferentes ferramentas para capturar os diferentes tipos de informação.
š Nos próximos slides vamos analisar essas ferramentas.
Ferramentas

š Entrada de texto para uma única linha – text

š Entrada de texto para múltiplas linhas – textarea
š Entrada de senha (caracteres ocultos) – password
š Seleção obrigatória – radio buttons
š Seleção opcional e de múltiplas entradas – checkbox
š Lista de seleção – select options
š Botão de envio – submit button
š Botão com imagens – image button
š Seleção de arquivos para upload – file
 Ciclo de um formulário

2 - Ele é enviado ao servidor

onde as informações são
processadas com programas
em Java, PHP, C#.net, Ruby,
entre outros.

3 - Devolvidos ao cliente com uma página

1- Formulário é preenchido
gerada pela aplicação no servidor.
Como saber o valor do campo correto

š O atributo que auxilia o programa no servidor a saber qual campo tem cada valor é o
atributo name

name = “nomeUsuario”
Tag Form

š Todo formulário deve estar contido dentro de uma tag form.

š A tag form possui dois atributos importantes:
š action – que deve ser informado a url para redirecionamento do formulário na aplicação do
servidor. Em outras palavras, deve conter o nome do programa que irá processar as
informações.
š method – é o método que será enviado o formulário através do protocolo HTTP. Podem ser dois
métodos utilizados, a principio, GET e POST. A diferença entre os dois será debatida na parte de
back-end.
š Além dessas, o atributo id também pode ser utilizado no form.
Texto Simples

š A tag input é a responsável pela entrada de informações no sistema.

š Ela possui diversos tipos para entradas.
š Um dos tipos mais utilizados é o text, que é para entrada de textos simples, contendo
uma linha objetiva de informação.
š Os dois atributos principais dela são:
š type – que define o tipo de entrada
š name – que é a identificação da informação para o servidor poder processar

š O id também é um atributo importante.

š Vamos conferir um formulário pequeno.
Password

š Outro tipo de entrada de texto é o password

š A diferença dele para o text, é que este omite as informações digitadas pelo usuário
Texto com múltiplas linhas

š Uma tag especial de entrada é a textarea

š Ela permite a entrada de informações de texto com múltiplas linhas.
š É muito utilizada para entrada de observações livres nos formulários.
š Nela é possível determinar a altura e largura através das quantidades de linhas e colunas.
š Os atributos que definem essas propriedades são rows e cols, respectivamente.
Radio Button

š É um tipo de entrada que permite ao usuário escolher uma opção dentre muitas.
š Alguns de seus atributos são:
š name – tem a mesma função que os demais inputs, porém esse valor deve ser o mesmo para
todas as opções.
š value – indica o valor que será passado ao servidor quando a opção for selecionada
š checked – indica uma seleção padrão para a entrada. Deve ser colocada apenas em uma das
alternativas.

š Quando um grupo de radio é selecionado, não pode mais ser deselecionado.

Checkbox

š É o mesmo principio que o Radio Button, contudo ele permite nenhuma, uma ou mais
opções selecionadas.
š Possui os mesmo atributos e regras do Radio Button também.
Select (Combo Box)

š Permite o usuário selecionar uma opção a partir de uma lista oculta que aparece ao ser
clicada.
š Ela é composta por duas tags, a tag select que contém o atributo name indicando a
variável ao servidor.
š E a tag option, que é o conjunto de opções da lista para o usuário escolher. Nela que
contém o atributo value.
Com os atributos size e multiple, o select vira uma lista a qual pode ser selecionados múltiplos valores.
O atributo size determina a quantidade de opções que estarão visíveis ao usuário.
Para selecionar mais do que um valor é necessário utilizar a tecla control (Windows) ou command (Mac)
para múltipla seleção.
Envio de arquivo

š Existe uma tag especial para selecionar o arquivo que deseja enviar ao servidor.
š Ela suporta qualquer tipo de arquivo, desde uma simples imagem até um documento
PDF ou DOC.
š Como essa tag é relacionada ao navegador, ela pode modificar de acordo com cada
um, além de sofrer influencia do idioma utilizado nas configurações do computador.
š O tipo da tag input para esse tipo de funcionalidade é a file.
Botões

š Existem três maneiras de criar botões.

š Duas são através da tag input, com os tipos submit e image.
š A outra maneira surgiu a partir do HTML5, onde criaram uma tag chamda button.
š O submit é utilizado quando o usuário deseja enviar o formulário para o servidor
diretamente.
š O image, é um submit que utiliza uma imagem como formato e texto do botão.
š O button é utilizado quando você deseja executar uma ação de validação ou interação
da página antes de enviar ao servidor o formulário ou algo do tipo.
š Vejamos os exemplos nos próximos slides.
Complementando o exemplo anterior, criou-se um botão enviar para cadastrar a foto no sistema. O
atributo value do input submit faz aparecer o nome do botão.
A tag input image, trabalha com o atributo src para indicar qual a imagem será atribuída ao botão.
A tag button funciona com a maioria das tags, então é possível controlar melhor os elementos para
formata-la.
Rótulos

š Até agora utilizamos a tag p para manter os rótulos dos campos em nosso formulário.
š Entretanto, essa não é a tag mais indica. Para isso, existe a tag label.
š Ela pode ser utilizada de duas maneiras:
š Ela pode “abraçar” o texto e o input desejado.
š Ela pode ser utilizada de maneira separada, e para realizar o vínculo com os campos, pode-se
utilizar o atributo for que recebe como valor o id do campo desejado.
Ao clicar em qualquer label, a seleção automática do campo que ela se refere será feita.
Agrupando visualmente elementos

š Existe duas tags que auxiliam a criar visualização de um conjunto de campos dentro do
formulário.
š Elas funcionam como seções de um documento impresso.
š As tags são fieldset e legend.
Novos recursos do HTML5

š Até agora todos os elementos apresentados funcionam em qualquer versão do HTML.

š A partir desse momento, as tags e atributos apresentados são recursos da versão 5 do
HTML.
š As descrições serão colocadas junto com os exemplos para ficar mais fácil a visualização.
O atributo required valida a obrigatoriedade do preenchimento do campo.
O input do tipo date já apresenta um calendário para facilitar o preenchimento de datas.
Os inputs email e url validam a formatação dos dois tipos nos campos preenchidos.
Os inputs search e number permitem controles do tipo limpar, e numerações mínimas e máximas entre
as informações.
No caso do tipo number, ainda é possível informar a quantidade através de controles de setas no
campo.
O último atributo que iremos conhecer é o placeholder. Funciona em qualquer tipo de input.
O valor atribuído ao placeholder, permanece visível no campo até o usuário clicar nele. Depois disso,
ele é automaticamente subtraído para o usuário inserir o valor desejado.
DOCTYPES
Declarações

š Doctypes são declarações no cabeçalho do arquivo para informar ao navegador qual o

tipo de documento é aquele.
š HTML5 - <!DOCTYPE html>
š HTML4 - <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
š XML - <?xml version=“1.0” ?>
Elementos de Organização
Divs e Span

š Div permite que agrupar um conjunto de elementos HTML.

š Span funciona como uma div, porém seu uso é recomendado em elementos do tipo p,
ou uso inline.
š Sempre atribua um id para esses elementos.
Perceba que visualmente não a diferença alguma. Porém quando formos trabalhar com o CSS, isso
será de extrema ajuda.
IFrame

š Permite embutir um outro site dentro da página.

š Utilizado para colocar mapas de localização em páginas de contato principalmente.
š Alguns atributos:
š src – a página que irá embutir.
š height – altura do iframe
š width – largura do iframe
š scrolling – controla a aparição de barras de rolagem
š frameborder – tamanho da borda
Meta tags

š São informações invisíveis ao usuário, porém são uteis aos mecanismos de busca para
otimizar a aparição de sua página.
š Algumas informações são essenciais para apresentar sua página como uma das
primeiras na lista de pesquisa.
š Meta tags, são elementos vazios então não precisam de tags para fechar.
š Os atributos mais utilizados são name e content, que são utilizados juntos, geralmente.
š Esses atributos especificam as propriedades da página para os mecanismos de buscas e
outras funcionalidades do navegador.
Meta tags

š As principais meta informações são:

š description – descrição do conteúdo da página.
š keywords – lista de palavras relacionadas ao assunto da página separadas por vírgulas.
š robots – direciona o mecanismo de busca a adicionar ou não essa página nos resultados. Um
valor interessante é o nofollow que adiciona a página, mas não os links internos.
š author – indica o autor da página.
š pragma – previne o navegador de armazenar estados da página evitando o download de uma
versão mais atual.
š expires – como o navegador sempre faz um cache do conteúdo da página, esse atributo faz
com que o navegador atualize o conteúdo e desconsidere o que foi cacheado.
Mídias (Vídeo e Áudio)
Vídeo

š A partir do HTML5, criou-se uma tag para vídeos. Ela funciona apenas nos navegadores
mais atuais, os antigos precisam ainda de vídeos em flash.
š A tag vídeo, não tem suporte a gerenciamento de direitos digitais (DRM, em inglês).
Então tome cuidado com o que irá postar.
š Para colocar um vídeo é necessário utilizar o formato de codificador correto:
š H264 – IE e Safari
š WebM – Android, Chrome, Firefox e Opera
š O controles de vídeos são suportados de acordo com o navegador utilizado.
Vídeo

š Alguns atributos da tag <video>:

š preload – informa o que o navegador deve fazer ao carregar a página. Os valores possíveis são
none e auto.
š src – especifica o caminho e arquivo de vídeo.
š poster – atribuição de uma imagem como capa do vídeo.
š width e height – as dimensões do vídeo.
š controls – apresenta os controles do vídeo para tocar e parar.
š autoplay – inicia o vídeo automaticamente.
š loop – reinicia o vídeo após seu fim.
Áudios

š Assim, como a tag vídeo, o HTML5 prove a tag para arquivos de áudio.
š Os formatos aceitos são Ogg Vorbis (Firefox, Chrome e Opera) e MP3 (Safari e IE 9).
š Alguns atributos importantes:
š src – especifica o caminho e arquivo de áudio.
š controls – apresenta os controles do vídeo para tocar e parar.
š autoplay – inicia o vídeo automaticamente.
š loop – reinicia o vídeo após seu fim.
š preload – informa o que o navegador deve fazer ao carregar a página. Os valores possíveis são
none e auto.
Para mais informações busquem no
site da W3C.
http://www.w3c.org
https://www.w3schools.com/html/
Copyright © 2019 Prof. Andrey Araujo Masiero

Todos direitos reservados. Reprodução ou divulgação total ou parcial deste documento é

expressamente proibido sem o consentimento formal, por escrito, do Professor (autor).