Novos tipos de formulário de entrada em HTML5
formulários HTML estão centradas em torno dos humildes, mas flexível entrada elemento. HTML5 adiciona uma série de formas muito úteis de entrada que ajudam a transformar HTML em uma ferramenta de interface de usuário mais moderno.
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 input type = "texto", que ainda vai funcionar exatamente como o esperado (embora não com os de validação e de interface do usuário melhorias das tags mais recentes).
A norma indica que os vários tipos serão apoiados, mas a forma exacta 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 exemplo:
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) incluem tanto texto como um calendário pop-up. Se a data for introduzida pelo texto, ele deve ser introduzido no formato AAAA-MM-DD:
É possível restringir as datas autorizados para um intervalo específico através da aplicação da min e max atribui ao elemento.
Tempo: Tempo é armazenado no formato hh: mm. Alguns navegadores incluem um cólon directamente no campo, e alguns modificar o teclado virtual com números e o carácter do cólon. 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 tempo de entrada.
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 colocado 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 caractere de dois pontos entre a hora e os minutos. Outra cólon aparece entre as horas e os minutos da diferença de fuso horário.
milímetros: Dois dígitos para os minutos.
+/ - / Z: A diferença de fuso horário é indicada 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á compensado 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 fuso horário:
o email: Isto parece um campo de texto simples, mas pode ser modificado de acordo com a forma 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 podem consistir de um campo de texto, seguido por algum tipo de selecção (por exemplo, para cima e para baixo setas), ou esta etiqueta pode alterar o teclado virtual de um dispositivo portátil para lidar com apenas entrada numérica.
o número tipo de entrada suporta diversos atributos especiais:
min: O valor mínimo permitido.
max: O valor máximo permitido.
passo: Este valor indica quanto as ferramentas de interface visual (geralmente pequenas setas acima e abaixo) alterar o valor quando ativado.
valor: O valor numérico do elemento.
Todos os atributos do número elemento pode ser inteiro ou ponto 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"> construir, finalmente, acrescenta essa funcionalidade para formulários HTML.
o alcance entrada recebe os mesmos atributos número, min, max, valor, e passo. 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 é emparelhar um saída tag ao alcance, e usar javascript para atualizar a saída quando o intervalo é alterado. Um exemplo de formulário que incorpora esta ideia:
Quando o alcance valor é alterado, ele chama uma função javascript chamada updateOutput:
função updateOutput () {// 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 podem ser dadas valores de ponto flutuante se quiser.
pesquisa: Utiliza-se para recuperar o texto que se destina a ser usado como parte de uma pesquisa (internamente ou através de um serviço de pesquisa). 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 aplicadas automaticamente a 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 fallback é uma entrada de texto simples.
o pesquisa elemento de 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 padrão 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 da Web. navegadores móveis pode igualmente 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 de quatro dígitos.
-: O carácter 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.