5 truques de entrada HTML5 Form

A forma mais comum de obter a entrada do usuário para um programa javascript é usando elementos de formulário HTML. A última versão do HTML, HTML5, tem vários novos elementos de formulário e atributos.

entradas de texto

entradas de texto são o tipo mais básico de campo de formulário HTML. Eles são usados ​​para dar o website do usuário uma entrada em branco onde pode inserir qualquer valor. Aqui está um exemplo do código usado para criar uma entrada de texto:

Aqui está o que neste campo se parece em um navegador:

texto do espaço reservado

texto do espaço reservado aparece dentro do campo de entrada antes que um usuário começa a digitar. É útil para dizer ao usuário o que você espera que eles para entrar.

Aqui está um exemplo do uso de texto de espaço reservado em uma entrada de texto:

Aqui está o que neste campo se parece em um navegador web.

autofocus

Quando o campo de entrada é selecionado e você pode ver o cursor dentro dele, # 147 tem foco. # 148- Se você quer um determinado campo (como o campo Nome) para ter # 147-focus # 148-, logo que uma página web cargas, você pode usar o atributo autofocus. Aqui está o que parece:

de entrada de e-mail

O campo de entrada de e-mail parece com uma entrada de caixa de texto e ele funciona apenas como um campo de entrada de texto na maioria dos casos, também. Mas, às vezes, o navegador trata o campo de entrada de e-mail de forma diferente a partir de um campo de entrada de texto. Por exemplo, quando um campo de entrada é de e-mail # 147 em foco # 148- em um iPhone, uma exibição especial de teclado que oferece atalhos para a inserção de endereços de e-mail.

Aqui está um exemplo de como usar o campo de entrada de e-mail:

input Slider

Uma entrada deslizante é um campo de entrada que permite que o utilizador seleccione um número no intervalo de números, por meio de um controlo de arrastar e largar.

Aqui está o código para a criação de um seletor:

Aqui está o que um controle deslizante parece em um navegador web.

Requeridos

Se você quer forçar seu usuário digite um valor em um campo antes que ele é capaz de enviar o formulário, HTML5 tem um atributo chamado requeridos.

Para fazer um campo de formulário necessário, você só precisa adicionar o novo atributo dentro de um campo de entrada de formulário, como este:

Quando um usuário tenta enviar o formulário sem preencher o número de telefone campo, ela recebe uma mensagem pedindo-lhe para preenchê-lo:

Como desta escrita, nem todos os navegadores da web suportam a requeridos atributo, mas é suportada pelo Chrome, Firefox, Internet Explorer e Opera.

Descobrir mais

Para mais informações sobre os elementos e atributos e como trabalhar com eles em javascript, visite o formulários HTML guia no Mozilla Developer Network.