O objetivo do novo recurso HTML5 é melhorar o suporte da incorporação, como vídeo e áudio, e fornecer aos desenvolvedores e usuários finais programação simples e uma melhor experiência do usuário. Agora, o mundo da Internet está esperando e o navegador pode suportar a nova versão do HTML5 quando é atualizada. O HTML5 foi apoiado por muitos navegadores, como Safari, Chrome, Firefox, Opera, IE9. É compatível com versões anteriores, mas os navegadores de hoje não podem ser totalmente compatíveis com o HTML5.
A atualização de um site para HTML5 é bastante fácil, pois é compatível com o HTML4. Você só precisa modificar seu doctype. Esta nova atualização ajuda a simplificar as coisas, para que você possa atualizar todos os seus sites e eles não travam, porque todas as tags HTML4 ainda são 100% suportadas no HTML5.
Os formulários HTML5 definem mais de uma dúzia de novos tipos e recursos de entrada, e esses novos elementos permitem que os programadores programem mais facilmente. Vamos falar sobre esses novos recursos abaixo.
1. Comput Box Logeholder
No HTML4, os desenvolvedores usam JavaScript e JQuery como espaço reservado para caixas de entrada, enquanto no HTML5, os desenvolvedores podem exibir facilmente um espaço reservado. O que são espaços reservados? Especialista é o texto rápido que aparece na caixa de entrada. Quando você clica no campo de entrada, ele desaparecerá automaticamente. Você pode solicitar a amostra de texto que o usuário deve inserir na caixa de texto. Em vez disso, existe uma caixa de entrada de email onde você pode definir os espaços reservados [email protected] e ela desaparecerá quando você clicar neles.
IE FF Safari Chrome Opera iPhone Android
- 3,7+ 4+ 4+ 11+ 4+ -
2. Eventos de foco automático
HTML5 Basta carregar uma página da web e a página da web moverá automaticamente o foco para uma caixa de entrada específica, assim como o JavaScript. Qual é a diferença? Como é apenas uma tag HTML agora, os usuários podem desativar facilmente essa propriedade em seu navegador. Nem todos os navegadores suportam foco automático, mas os navegadores não simplesmente ignoram essa propriedade. Se você deseja que todos os navegadores funcionem, basta adicionar novas propriedades HTML5 AutoFocus e verifique se o navegador suporta foco automático. Se puder, não precisa usar um script de foco automático. Se você não tiver um, precisa adicionar um script de foco automático.
Ff IE Safari Chrome Opera iPhone Android
- 4+ 4+ 3+ 10+ - -
3. Tipo de entrada recém -definido html
1. E -mail
A primeira caixa de entrada que vou dizer é o endereço de e -mail. Os navegadores mais antigos que não suportam novos tipos também os tratam como uma caixa de texto, e 99% dos usuários não perceberão essa alteração até enviarem o formulário (haverá validação de formulário no momento).
2. Site
Vamos falar sobre a caixa de entrada URL. Se você precisar inserir um URL, espera entrar como http://www.vevb.com. Agora, na caixa de entrada do tipo URL, um teclado virtual variável aparecerá no iPhone. Os usuários podem facilmente inserir slashes e .com. Da mesma forma, os usuários desconhecem isso antes de enviar o formulário.
3. Números
Para obter números correspondentes no HTML4, você deve usar scripts jQuery para ajudar na verificação. HTML5 adiciona tipos numéricos. Algumas propriedades adicionais (opcionais): min: especifica o número mínimo de entrada que pode ser aceito pela caixa de entrada. Max: o número máximo é permitido entrar. Etapa: o intervalo legal para o domínio de entrada de atributos, o padrão é 1.
Como mostrado na figura acima, apenas os números são permitidos (na maioria dos casos, eles não serão notados até que um erro seja solicitado ao enviar), apenas 0, 2, 4 são legais (6 são ilegais porque a etapa é 10 e legal é 0, 10, 20 ...).
4. Slider digital
O HTML5 permite que você use um novo tipo chamado intervalo, e a caixa de entrada se torna um controle deslizante. O formulário do seu site pode usar um controle deslizante. Sua tag de atributo é a mesma que o tipo de número, basta alterar o tipo de configuração do tipo = 'número' para digite = 'range'.
5. Calendário
As melhores novas adições até o momento, os tipos de seleção de data nomeados Data e DateTime (existem outros tipos adicionais de data/hora, como hora, semana, mês e calendário local). Muitas estruturas de JavaScript, como o JQuery UI e o YIU, já têm esses controles, mas adicionar um seletor de calendário é bastante irritante. O HTML5 define um novo seletor de data local que não precisa incluir o uso de scripts na página. A partir de agora, a Opera é a única que suporta totalmente esse recurso e, para outros navegadores, você pode fazer um script alternativo, caso o navegador não o suporte. No entanto, em última análise, todos os navegadores serão atualizados.
6. Pesquise
O HTML5 adiciona o tipo de caixa de entrada de pesquisa. Isso não é nada, mas é uma boa mudança para alguns usuários. Ele pode simplesmente circular as bordas da caixa de entrada automaticamente e, quando você começar a digitar, haverá um pequeno x à direita. Atualmente, nem todos os navegadores suportam.
7. cor
O HTML5 também define a cor do tipo, que permite selecionar uma cor e retornar o valor hexademical. Opera11 é o único navegador que suporta esse tipo de navegador. No entanto, não deve haver muitas pessoas usando esse tipo, por isso não é um grande problema não apoiá -lo.
8. Verificação do formulário
O novo recurso mais emocionante é a verificação do formulário. A maioria dos desenvolvedores forma validação, cliente ou servidor. Talvez o validador de formulário do HTML5 não possa substituir sua verificação do lado do servidor, mas certamente ele substituirá sua verificação do lado do cliente. O problema da verificação de JavaScript é que é fácil para os usuários ignorá -lo, pode ser facilmente ignorado apenas desativando o JavaScript. Agora que o HTML5 está preocupado, você não precisa se preocupar com isso. Os erros são todos os avisos nativos do HTML5 e o JavaScript não é usado.
IE FF Safari Chrome Opera iPhone Android
- 4+ 5+ 10+ 9+ - -
9. Campos necessários
A validação do formulário do HTML5 não se limita ao tipo de campo de verificação, mas também permite que uma nova tag extra seja chamada, necessária. Esta nova propriedade permite que os desenvolvedores verifiquem se a caixa de entrada é preenchida sem usar o JavaScript.
Resumo: As atualizações acima são cruciais para reduzir os ciclos de desenvolvimento e aprimorar a experiência do usuário. Depois que todos os navegadores aceitam o HTML5, a próxima geração de sites excederá as expectativas de qualquer pessoa. O HTML5 não é um aborrecimento, ele ajudará muito os desenvolvedores e melhorará a experiência do usuário.