Aula HTML5 (Formulários)

Prévia do material em texto

Introdução ao Desenvolvimento Web 
 
 
Adaptado de Prof. Maria Adelina Raupp Sganzerla 
HTML5 - Formulários 
As mudanças mais visíveis proporcionadas pelo HTML5 estão nos elementos de formulários, 
principalmente, no elemento criado pela tag <input>, o qual têm novos tipos, definidos por seu 
atributo type. O Quadro 1 apresenta os novos tipos definidos para o elemento <input>, um exemplo 
e como é interpretado pelo navegador Chrome. 
 
Quadro 1 – Tipos do elemento <input> 
Tipo Descrição 
color 
Permite ao usuário selecionar uma cor. 
<input type="color" id="favcor" name="favcolor" value="#FF0000"> 
 
date 
Cria um campo para que o usuário possa selecionar uma data. 
<input type="date" id="aniver" name="aniver"> 
 
datetime 
Cria dois campos uma para data e outro da hora (com fuso horário), permitindo assim o usuário 
selecionar os dois juntos. 
<input type="datetime-local" id="anivertime" name="anivertime"> 
 
month 
Serve para selecionar um mês e um ano. 
<input type="month" id="mesdiaano" name="mesano"> 
 Introdução ao Desenvolvimento Web 
 
 
Adaptado de Prof. Maria Adelina Raupp Sganzerla 
 
e-mail 
É um campo de entrada onde deve ser inserido um endereço de e-mail. 
<input type="email" id="email" name="email"> 
 
number 
É utilizado para campos que devem apenas conter números, podendo ter seus limites (maior e 
menor valor aceitos) definidos. 
<input type="number" id="semestre" name="semestre" min="1" max="8"> 
 
search 
É usado para fazer pesquisas, mas na prática se comporta como um campo de texto comum. 
<input type="search" id="gsearch" name="gsearch"> 
 
tel 
Serve para números de telefone, mas até o momento nenhum dos principais navegadores 
oferece suporte a esse tipo, quando a restrição. 
<input type="tel" id="fone" name="fone" pattern= "[0-9]{3}-[0-9]{2}-
[0-9]{3}"> 
 
time 
Permite ao usuário selecionar hora. 
<input type="time" id="appt" name="appt"> 
 
url 
É usado para campos de entrada onde você recebe um endereço URL, o valor do campo é 
validado automaticamente quando o formulário é enviado. 
<input type="url" id="homepage" name="homepage"> 
 
week 
Para definir uma semana e um ano. 
<input type="week" id="week" name="week"> 
 
 
Esses atributos da tag <input> foram incorporados no HTML5, porém como sempre temos 
problemas de compatibilidade, nem todos os navegadores suportam todos os novos input type. 
 Introdução ao Desenvolvimento Web 
 
 
Adaptado de Prof. Maria Adelina Raupp Sganzerla 
Outras alterações definidas para elementos de formulários são os atributos autofocus (fará 
com que o foco seja colocado no campo com esse atributo automaticamente ao carregar a página) e 
placeholder (fará com que um valor padrão seja definido, bem como apagará tal valor padrão, 
quando o usuário clicar no campo). 
Além desses, o atributo required também é interessante, pois torna um campo de formulário 
obrigatório, ou seja, seu valor necessariamente precisa ser preenchido. O atributo pattern é utilizado 
para definir expressões regulares que validarão o formato que o valor do campo deve possuir. 
É possível também definir a revisão ortográfica e gramatical para elementos do tipo texto, por 
exemplo, realizados por meio da tag <textarea>, sendo que para isso usa-se o atributo spellcheck 
com valor true (observa-se que com HTML5 incluiu-se o atributo maxlength para a tag 
<textarea>). A Figura 1 apresenta um exemplo de código com a aplicação dos atributos 
autofocus, placeholder, required, pattern e spellcheck. 
 
Figura 1 – Estrutura básica do HTML5 
 
 
A Figura 2 apresenta a visualização do código da Figura 1, no navegador Chrome. 
 
 
 Introdução ao Desenvolvimento Web 
 
 
Adaptado de Prof. Maria Adelina Raupp Sganzerla 
Figura 2 – Visualização no navegador Chrome 
 
 
Bibliografia 
HTML5. Um guia de referência para os desenvolvedores web. Disponível em: 
http://tableless.com.br/html5/?chapter=11. Acesso em: 20 de abr. de 2020. 
W3SCHOOLS. The world's largest web developer site. Disponível em: 
https://www.w3schools.com/html/html_media.asp. Acesso em: 20 de abr. de 2020.