Uma olhada nos tipos de entrada de formulários HTML5 Data, cor e intervalo
Formulários são encontrados em todos os lugares nos sites. Facebook, Twitter, Google - só para citar alguns - exigem que façamos login ou nos registremos no site por meio de um formulário. Na verdade, também usamos um formulário para twittar e atualizar o status em sites sociais. Em resumo, o formulário é uma parte muito importante para poder interagir com um website.
Um formulário web é construído com entradas, no passado, temos apenas uma pequena opção para os tipos de entrada; tal como texto, senha, rádio, caixa de seleção e enviar. Agora, o HTML5 vem com grandes melhorias e introduz muitos novos tipos de entrada na especificação.
Então, neste post nós vamos nos aprofundar em algumas das novas peças interessantes do Formulários HTML5 que achamos que você deveria experimentá-los; vamos verificá-los.
Seletor de datas
A primeira coisa que gostaríamos de dar uma olhada é o selecionador de data. A seleção de data é uma coisa comum que você pode encontrar no formulário de inscrição, especialmente em alguns sites ou aplicativos como reservas de voos e hotéis.
Existem muitas bibliotecas JavaScript para criar o selecionador de data. Agora, também podemos criar um de maneira muito mais fácil com a entrada HTML5 encontro, do seguinte modo;
o selecionador de data em HTML5 basicamente funciona de forma muito semelhante ao que as bibliotecas JavaScript fizeram; Quando nos concentramos no campo, um calendário é exibido e, depois, podemos navegar pelos meses e anos para selecionar a data..
No entanto, cada um dos navegadores que atualmente suportam o encontro tipos de entrada, como Chrome, Opera e Safari, exibem esse tipo de entrada de forma um pouco diferente, o que pode levar a problemas de inconsistência na experiência do usuário, e é assim que parece;
Algumas diferenças notáveis você pode ver de relance a partir da imagem acima; o Opera usava a abreviação inglesa de três letras para o nome do dia - Sun, Mon, Thu e assim por diante, enquanto o Chrome usava meu idioma local, o Safari - por outro lado - funciona bastante estranho, não está exibindo um calendário em absoluto.
Há também alguns novos entrada tipos para selecione a data ou a hora mais especificamente; mês, semana, Tempo, data hora e datetime-local, que temos a certeza de que a palavra-chave em si é bastante desctiviva para dizer o que faz.
Você pode ver todos eles em ação a partir do link abaixo, mas certifique-se de visualizá-lo no Opera 11 e acima, já que, no momento da escrita, é o único navegador que suporta todos esses tipos de entrada..
- Demonstração do Datepicker
Seletor de cores
Selecionador de cores Muitas vezes é necessário em determinados aplicativos baseados na Web, como este gerador de gradiente CSS3, mas todo esse tempo os desenvolvedores da Web também dependem de uma biblioteca JavaScript, como jsColor, para fazer o trabalho. Mas agora podemos criar um seletor de cores do navegador nativo com HTML5 cor tipo de entrada;
Mais uma vez, os navegadores, neste caso o Chrome e o Opera, tornam este tipo de entrada ligeiramente diferente;
Em primeiro lugar, o Opera exibe a opção de cor básica no clique, bem como o formato hexadecimal da cor escolhida atual em uma lista suspensa, enquanto o Chrome exibirá diretamente a paleta de cores em uma nova janela quando clicada.
Além disso, também podemos definir a cor padrão com o valor atributo, como segue;
Dessa forma, quando exibido nos navegadores não suportados, o entrada vai degradar em um campo de texto e o valor padrão será visível, que pode dar uma espécie de dica para os usuários o que deve ser inserido no campo.
Exibir o valor da cor
Em vez de abrir o Photoshop apenas para copiar o hexadecimal no formato de cor, você pode criar uma ferramenta simples sobre esse tipo de entrada para fazer o trabalho, já que a cor gerada já está em hexadecimal, isso seria realmente fácil;
Primeiro, adicionamos o id colorpicker para a entrada e nós também adicionar um vazio div com id hexcolor ao lado dele para conter o valor.
Precisamos do jQuery ligado no cabeça do nosso documento. Em seguida, armazenamos o valor da cor e o recém-adicionado div em uma variável, assim;
var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); Obter o valor inicial do #colorpicker;
hexcolor.html (cor);
… E por último alterar o valor quando a cor escolhida é alterada também;
$ ('# colorpicker'). on ('mudança', função () hexcolor.html (this.value);); É isso aí; agora vamos ver isso em ação.
- Demonstração Colorpicker
Alcance
o alcance tipo de entrada nos permite adicionar um controle deslizante no navegador para selecionar o número em um intervalo que também podemos encontrar no jQuery UI.
O trecho acima é básico a implementação de alcance tipo de entrada. Nós também podemos mudar a orientação do slider para vertical usando CSS, como segue;
entrada [type = range] width: 20px; altura: 200 px; -webkit-appearance: slider-vertical;
Além disso, podemos definir o min e máximo gama dos números, por exemplo;
No trecho abaixo, definimos o min para zero e 225 para o máximo. Quando eles não são explicitamente especificados, por padrão, o navegador 0 para o mínimo para 100 para o máximo.
Exibir o número
Há uma restrição, o número é invisível, não podemos ver o número / valor gerado a partir do controle deslizante no navegador. Para exibir o número, precisamos adicionar um pouco de JavaScript ou jQuery, e aqui está como fazemos isso;
Primeiro nós adicionamos um vazio div ao lado da entrada, estilize div suficientemente para que pareça uma caixa.
Em seguida, coloque o seguinte código que fará o mesmo que o código acima no seletor de cores fortes, exceto agora temos o valor do controle deslizante.
$ (function () var val = $ ('# slider'). val (); output = $ ('# saída'); output.html (val); $ ('# slider'). change (função ( ) output.html (this.value););); Agora você pode ver a demonstração. Apenas um lembrete, veja a demonstração nesses navegadores - Chrome, Opera e Safari, pois o Firefox e o IE não suportam alcance tipo de entrada no momento.
- Demonstração de Intervalo
Palavras finais
É claro que o HTML5 facilita muito nossa vida, introduzindo muitos novos tipos de entrada. Mas, como qualquer outro recurso HTML5, o suporte é muito limitado, especialmente em navegadores mais antigos, por isso devemos usar esses novos recursos com cautela, especialmente os novos tipos de entrada que discutimos neste post; Data, cor e intervalo.
Mas, finalmente, esperamos que agora você tenha mais informações sobre Formulários HTML5. Obrigado por ler este post e esperamos que você tenha gostado.
- Demonstração
- Fonte de download
Leitura Adicional
Abaixo estão alguns links úteis para você aprofundar os formulários HTML.
- Novos recursos de formulário em HTML5 - Opera Dev.
- O estado atual dos formulários HTML5 - Wufoo
- Atributos de Formulário HTML5 - w3school.org
- Quando posso usar formulários HTML5? - CanIUse.com
