Índice
O HTML5 incorpora novos elementos para facilitar a criação de campos de dados que em muitos casos tiveram que ser programados com javascript ou adicionar uma biblioteca externa em uma linguagem que permitisse estender as capacidades dos elementos xhtml e html4.Muitos programadores continuam a trabalhar da maneira tradicional, pois é compatível com a maioria dos navegadores; os aprimoramentos mais recentes são compatíveis apenas com as versões mais recentes.
O HTML5 oferece um conjunto de novos atributos para o atributo type do elemento de entrada, ou seja, a maioria dos elementos de um formulário, como caixas de texto.
Alguns desses atributos html conhecidos são:
Tipo de entrada = texto - caixa de texto
input type = password - campo de senha que oculta a senha com asteriscos.
Tipo de entrada = enviar - botão para enviar formulários
NÚMERO TIPO ATRIBUTO REGISTRO
O elemento que contém o atributo type number, permite não só determinar que o valor inserido é numérico, mas também restringi-lo entre máximo e mínimo, podemos ver na imagem como também tem validação sem a necessidade de programar nada
Número do tipoATRIBUTO DE TIPO DE DATA (DATA)Número do tipo
Número da passagem (1-40):
O atributo de tipo de data é usado para campos onde é necessário conter uma data. Dependendo do navegador e do suporte que eles oferecem, o controle de calendário aparecerá para poder selecionar uma data.
O atributo de tipo de cor é usado para campos onde é necessário conter uma cor. Dependendo do navegador e do suporte que eles oferecem, o controle de tipo de seletor de cores parecerá ser capaz de selecionar uma cor ou escrever a cor em hexadecimal. O seletor aparecerá como um pop-up quando a cor for clicada.
Tipo de cor
Selecione uma cor:
O atributo de tipo de email é usado para campos onde é necessário conter um email. Dependendo do navegador e do suporte que oferecem, validará se o texto digitado tem o formato de um e-mail, caso contrário aparecerá uma mensagem de erro, o que facilitará a validação de um formulário sem programação.
Tipo de email
Digite o e-mail:
O atributo de tipo de url é usado para campos onde é necessário conter um domínio, um url. Dependendo do navegador e do suporte que oferecem, validará se o texto inserido tem o formato de um domínio, mas aparecerá uma mensagem de erro, o que facilitará a validação de um formulário sem programação. Não precisa conter http ou www, nesse caso se o solicitarmos teremos que o validar através de programação.
Tipo de url
Digite o e-mail:
1. Atributo de preenchimento automático
Quando escrevemos em um campo do formulário, descobrimos que geralmente o navegador nos dará a opção de autocompletar o que estamos escrevendo naquele momento com o texto que já escrevemos antes, isso pode causar problemas de segurança, pois, por exemplo, se escrevemos vários e-mails porque o computador foi usado por um usuário diferente, poderíamos escrever para ver as informações que outro usuário inseriu. No exemplo, desativamos o preenchimento automático no e-mail, mas não nos outros campos. Ele também pode ser desabilitado no navegador, mas muitos usuários não sabem que a opção existe ou como desabilitar o preenchimento automático.
Vemos que ao inserir a palavra Autocomplete e submeter ao acessar o mesmo formulário posteriormente e pressionar apenas a letra A, neste caso já sugere a palavra que havíamos escrito anteriormente.Atributo de preenchimento automático
Nome:
E-mail:
Este atributo é usado para indicar em qual entrada de um formulário o cursor deve ser posicionado quando a página da web for carregada, se não estiver presente começará com a primeira que encontrar. Isso também pode ser programado com jQuery para focar em diferentes controles conforme necessário.
Este atributo é muito útil para gerenciar elementos fora de um formulário, independentemente de onde ele esteja localizado na estrutura da web.
Podemos ver no código-fonte HTML que criamos um formulário para inserir os dados de um produto, depois um texto explicativo e finalmente colocamos um campo de texto para o estoque fora do formulário, mas o relacionamos a este formulário através de seu id de identificação = "FormA" no campo stock text colocaremos que o relacionaremos com o formulário form = "formA", desta forma ao enviar o formulário também serão enviados todos os elementos relacionados.Atributo de formulário
Produtos:
Descrição:
Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição.
Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição.
Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição.
Estoque:
4. Atributo FormAction
Este atributo é muito útil para enviar o mesmo formulário para páginas diferentes, algo que anteriormente tinha que ser programado em javascript e enviar parâmetros de todos os elementos do formulário para poder encaminhá-lo, em alguns casos tornava-se muito incômodo, principalmente se havia várias formas que dependiam umas das outras.
Pegamos o exemplo do caso anterior com um botão que enviamos o formulário para a página record.php e com o outro para stock.php
Atributo de formulário
Produtos:
Descrição:
Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição.
Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição.
Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição.
Stock: Atributo de imagem com envio Se quisermos usar uma imagem como botão de envio para enviar um formulário, a única maneira de fazer isso é colocar uma imagem ou usar folhas de estilo css e, em seguida, fazer a funcionalidade com javascript.Atributo de tipo de imagem
Produtos:
Descrição:
Este atributo permite definir uma lista em um elemento e, em seguida, aplicá-la a um elemento de entrada para que execute uma pesquisa enquanto digitamos.
Atributo de tipo de lista e lista de dados
