Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

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

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.

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[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

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?