Formularios HTML5 | Novos Recursos – Tipos de Campos – Aula 3 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.
Continuaremos 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?
Nesta aula daremos sequencia na apresentação dos novos tipos de campos que podem ser usados em formulários Web. Na aula anterior nós vimos os campos color, date, datetime-local e e-mail. E agora falaremos dos campos week, month, time, number, tel, range, search e url.
Vou comentar sobre a compatibilidade destes campos em relação aos navegadores, em seguida incluir estes campos em nosso formulário exemplo 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 week: https://caniuse.com/#search=week
2- Campo month: https://caniuse.com/#search=month
3- Campo time: https://caniuse.com/#search=Date%20and%20time%20input%20types
4- Campo number: https://caniuse.com/#search=number%20input%20type
5- Campo tel: https://caniuse.com/#search=Email,%20telephone%20%26%20URL%20input%20types
6- Campo: range: https://caniuse.com/#search=range%20input%20type
7- Campo search: https://caniuse.com/#search=Search%20input%20type
8- Campo url: https://caniuse.com/#search=Email,%20telephone%20%26%20URL%20input%20types
Incrementando o nosso projeto
Vamos usar o projeto padrão gerado pela ferramenta INITALIZR, para incluirmos estes campos no formulário já existente (criado na aula anterior). É 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. Demos continuidade na apresentação dos novos tipos de campos que vieram para enriquecer a experiência dos usuários. Incluímos em nosso projeto os tipos de campos [week], [month], [time], [number], [tel], [range], [search] e [url] 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/PuywWpe5pns
Parceria: https://www.tubebuddy.com/pricing?a=sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário