Novos tipos de entrada de formulário em html5
formulários HTML estão centradas em torno dos humildes, mas flexível entrada
Conteúdo
Embora o suporte para essas marcas não é universal, é seguro para começar a usá-los agora. Qualquer navegador (mesmo IE6) que não entende os tipos de entrada avançados reverterá para Tipo de entrada = “texto“, que ainda vai funcionar exatamente como o esperado (embora não com a validação e de interface do usuário melhorias das tags mais recentes).
A norma indica que os vários tipos será suportado, mas a forma exata os elementos são suportados podem variar de navegador para navegador. Por exemplo, o campo de e-mail pode olhar apenas como um campo de texto normal para um usuário em um computador desktop padrão, mas o teclado virtual em um dispositivo móvel pode ser alterado para incluir o @ quando encontra um campo de e-mail.
A maioria destes campos de especialidade suportar a validação, por isso, no mínimo, é útil para definir um :inválido estilo CSS para que o usuário pode dizer se os dados estão no campo. Aqui estão os tipos de entrada com codificação de amostra:
cor: Permite que o usuário escolha uma cor usando formatos padrão da web - nomes reconhecidos de cores (amarelo) e valores hexadecimais precedidos por um símbolo # (# FF0033).
encontro: Alguns navegadores (Firefox 3.5) exibir um campo de texto, outros (Opera 10) exibir um controle de calendário especial, ainda outros navegadores (Chrome) incluir texto e um calendário pop-up. Se a data for introduzida pelo texto, ele deve ser inserido em um formato aaaa-mm-dd:
Você pode restringir as datas permitidas para uma faixa específica, aplicando o min e max atribui ao elemento.
Tempo: Tempo é armazenado no formato hh: mm. Alguns navegadores incluem um cólon diretamente no campo, e alguns modificar o teclado virtual com números e o caractere de dois pontos. Também é possível que um navegador irá aparecer algum tipo de seletor de tempo personalizado, mas isso ainda não é suportado em qualquer um dos principais navegadores.
data hora: combina encontro e Tempo em um único elemento. Ele também inclui um mecanismo para a entrada na zona de tempo.
Alguns navegadores aparecer um controle de calendário para a data e uma entrada formatada para a época. Outros podem modificar teclados virtuais para data e entrada de tempo.
A data e hora formato completo oficial retornou dos vários elementos de data e hora é um código especializado: aaaa-mm-ddThh: mm + ff: gg:
aaaa: Quatro dígitos para o ano.
-: Um caractere traço real, que deve ser colocada entre ano e mês. Outro traço é colocado entre o mês eo dia.
milímetros: Dois dígitos para o mês.
dd: Dois dígitos para o dia.
T: O capital T indica o início da parte da hora do código.
hh: Dois dígitos para a hora, no formato de 24 horas.
:: O carácter de pontos entre a hora e minuto. Outra cólon aparece entre a hora e minuto de deslocamento da zona horária.
milímetros: Dois dígitos para os minutos.
+/ - / Z: O deslocamento de fuso horário é indicado por um capital Z (Se o tempo é Zulu ou GMT tempo) ou o símbolo + ou - se o tempo for em outro fuso horário.
ff: Se o fuso horário não é tempo de Zulu, indicar o número de horas de GMT.
gg: Número de minutos de compensação de tempos Zulu. Tipicamente, isto é 00, mas é possível que a zona de tempo serão compensados por 15, 30, ou 45 minutos.
Por exemplo, 17:30 em 11 de outubro de 2011, em Nova York parece com isso:
2011-10-11T17: 30-05: 00
A necessidade de data e hora para ser neste formato para ser considerado válido para navegadores que validam a data hora campo.
datetime-local: Assim como o data hora elemento sem um indicador de zona de tempo:
o email: Isto parece um campo de texto simples, mas pode ser modificado de acordo com como ele é acessado.
mês: Isso gera um ano de quatro dígitos seguido por um mês com dois dígitos:
número: Os dados numéricos pode consistir em um campo de texto, seguido por algum tipo de selecção (por exemplo, para cima e setas para baixo), ou essa marca pode mudar o teclado virtual de um dispositivo portátil para tratar apenas entrada numérica.
Video: 07 - tutorial formularios html5 y css3 | input type file y como personalizarlo
o número input type suporta diversos atributos especiais:
min: O valor mínimo permitido.
max: O valor máximo permitido.
degrau: Este valor indica quanto as ferramentas de interface visuais (tipicamente pequenas setas acima e abaixo) alterar o valor quando ativado.
Video: Curso de HTML5 - Aula 15 - Formulários
valor: O valor numérico do elemento.
Todos os atributos do número elemento pode ser um número inteiro ou de vírgula flutuante. No entanto, os navegadores atuais que suportam esta tag (Opera e Chrome) não parecem validar, bem como com valores de ponto flutuante como fazem com valores inteiros. Para obter mais controle de entrada numérica, considere o alcance tipo de entrada.
alcance: A maioria dos kits de ferramentas de interface do usuário ter algum tipo de controle deslizante ou mecanismo de barra de rolagem, o que torna fácil para os usuários a inserir um valor numérico visualmente. o “alcance“gt; construir, finalmente, acrescenta essa funcionalidade para formulários HTML.
o alcance entrada leva os mesmos atributos número, min, max, valor, e degrau. Se o navegador suporta o alcance tag, o usuário verá uma scroller- se não, um tipo de entrada de texto simples irá aparecer.
o alcance Tipo de não exibir o valor exato, e pode ser mais difícil de obter resultados precisos do que com o número tipo de entrada. Uma solução é a emparelhar um saída tag ao alcance, e usar javascript para atualizar a saída quando o intervalo é alterado. Um formulário de exemplo que incorpora essa idéia:
Quando o alcance valor é alterado, ele chama uma função javascript chamada updateOutput:
updateOutput function () {// get elementsvar myRange = document.getElementById ("myRange") -var myOutput = document.getElementById ("myOutput") - // copiar o valor overmyOutput.value = myRange.value-} // função de finalComo o número Tipo de entrada, o alcance pode ser dado valores de ponto flutuante se quiser.
pesquisa: Usado para recuperar o texto que está destinado a ser utilizado como parte de uma pesquisa (seja internamente ou através de um serviço de busca). Na maioria dos navegadores, esta tag exibe como um campo de texto comum. Ele às vezes têm um comportamento especial. No Safari, o campo de pesquisa é exibida com um pequeno X, que limpa o conteúdo da pesquisa. No Chrome, o autocompletar características da principal barra de pesquisa (que é também o elemento de entrada URL no Chrome) são automaticamente aplicadas à caixa de pesquisa.
Como os outros tipos de entrada novos, não há nenhuma penalidade para o uso do pesquisa elemento em navegadores que não suportam. O retorno é uma entrada de texto simples.
o pesquisa elemento na verdade não faz qualquer pesquisa. Para torná-lo funcional, você precisa escrever algum código.
tel: Este campo espera três dígitos seguidos por um hífen e quatro dígitos - um número de telefone local. Você pode precisar de jogar com o padronizar atributo se você quiser permitir que um código de área ou extensões para validar.
url: Browsers que suportam este elemento irá verificar a http: // prefixo para um endereço web. navegadores móveis também pode adaptar o teclado virtual para incluir caracteres comumente encontrados em URLs: os dois pontos (:), barra (/), e til (~).
semana: Permite que o usuário escolha uma semana a partir de um controle de calendário. Ele retorna um valor no seguinte formato: aaaa-Wnn
aaaa: Representa um ano com quatro dígitos.
-: O personagem traço.
W: O capital W personagem.
nn: A semana como um número de dois dígitos.
Alguns navegadores abrir o controle de calendário padrão. Quando o usuário seleciona uma data (ou uma semana), apenas o ano e a semana será devolvido. Outros navegadores simplesmente validar para o formato adequado.