Formularios HTML5 | Novos Recursos – Tipos de Campos – Aula 2 de 4 | SW9

Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)

Dando continuidade a MEGA Série sobre HTML5.  O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.

Hoje começaremos a ver os recursos para uso em formulários web [Formularios HTML5] que surgiram com o HTML5.  Estes novos recursos vieram para trazer uma melhor experiência aos usuários de dispositivos móveis e abriu a possibilidade de construirmos aplicações móveis híbridas.

O que veremos?

Vamos começar falando dos novos tipos de campos que vieram para enriquecer a construção de formulários web.  Devido a quantidade de novos tipos de campos, usaremos esta e a próxima aula para falarmos sobre eles.   Nesta primeira aula vamos falar sobre os campos color, date, datetime-local e e-mail.

Vou comentar sobre a compatibilidade destes campos em relação aos navegadores, na sequencia criaremos o formulário em nosso projeto e por último testaremos o comportamento de cada campo utilizando um emulador de dispositivo móvel.

Compatibilidade

Estamos falando aqui de inúmeros browsers, versões, browsers para dispositivos móveis, desktop, etc. Nesse sentido, os campos que vamos apresentar aqui podem ou não ter compatibilidade com determinado browser.  Podem também apresentar comportamentos diferentes dependendo do dispositivo utilizado.

Para nos apoiar na identificação da compatibilidade, e com base nela, tomarmos decisões durante nossos projetos, vale mencionar a ferramenta chamada CAN I USE.

Inclusive, criei recentemente um vídeo para falar sobre ela.  Bom, conhecendo esta diversidade de browsers e a ferramenta CAN I USE, apresento logo abaixo os links apropriados para que vocês possam consultar a compatibilidade de cada campo que será apresentado nesta aula.

Vamos então a lista de links:

1- Campo [color]: https://caniuse.com/#search=color%20input%20type

2- Campo [date]: https://caniuse.com/#search=Date%20and%20time%20input%20types

3- Campo [datetime-local]: https://caniuse.com/#search=Date%20and%20time%20input%20types

4- Campo [email]: https://caniuse.com/#search=Email,%20telephone%20%26%20URL%20input%20types

Incrementando o nosso projeto

Conforme havia comentado, vamos criar um projeto completo ao longo da série sobre HTML5.  Nesta aula vamos usar o projeto padrão gerado pela ferramenta INITALIZR, e que passou por alguns ajustes pontuais (aula anterior), para implementarmos o nosso formulário e incluir os campos apresentados nesta aula. É importante lembrar que durante o projeto vamos usar a plataforma chamada Cloud 9 (IDE de Desenvolvimento na Nuvem).

Testando o comportamento em dispositivos móveis

Ao término da implementação do formulário e inclusão dos campos, faremos um teste usando um emulador de dispositivo móvel.  No mercado existem vários emuladores, mas no nosso caso usaremos o emulador que faz parte da IDE Android Studio.  Deixarei o link no final da descrição.

Usando o emulador, seremos capazes de visualizar o comportamento exato de cada campo durante a utilização do formulário web.

[Conclusão]

Na aula de hoje [Formularios HTML5], demos sequência na Mega série sobre HTML 5.  Começamos a falar sobre os novos recursos que vieram para enriquecer os formulários web e trazer uma melhor experiência para os usuários de dispositivos móveis.  Implementamos os tipos de campos [color], [date], [datetime-local] e [e-mail] dentro de nosso projeto e finalmente testamos o comportamento destes campos usando um emulador de dispositivo móvel.

Vou disponibilizar este projeto na minha área de downloads, para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.  Dentro da minha área de Downloads, procure pela pasta HTML5.  O resto é com vocês

Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

[Links úteis]

Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph

Android Studio: https://developer.android.com/studio/?hl=pt-br

Cloud 9: https://c9.io/login

PlayList Cloud 9: https://goo.gl/7aQbD6

Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

Link do vídeo: https://youtu.be/9JBbCIYZLlc

Parceria: https://www.tubebuddy.com/pricing?a=sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se