5 Trucos de entrada de hTML5: maniquíes

La forma más común de obtener la entrada del usuario para un programa de JavaScript es mediante el uso de elementos de formulario HTML. La última versión de HTML, HTML5, tiene varios nuevos elementos y atributos de formulario.

Entradas de texto

Las entradas de texto son el tipo más básico de campo de formulario HTML. Se utilizan para dar al usuario del sitio web una entrada en blanco donde puede ingresar cualquier valor. Aquí hay un ejemplo del código utilizado para crear una entrada de texto:

Así es como se ve este campo en un navegador:

Texto del marcador de posición

El texto del marcador de posición aparece dentro del campo de entrada antes de que el usuario empiece a escribir. Es útil para decirle al usuario lo que espera que ingrese.

Aquí hay un ejemplo de cómo usar texto de marcador de posición en una entrada de texto:

Así es como se ve este campo en un navegador web.

Autofocus

Cuando se selecciona el campo de entrada y puede ver el cursor dentro de él, "tiene foco". "Si desea que un determinado campo (como el campo Nombre) tenga" foco "tan pronto como se cargue una página web, puede usar el atributo de enfoque automático. Esto es lo que parece:

Entrada de correo electrónico

El campo de entrada de correo electrónico se ve como una entrada de cuadro de texto y funciona igual que un campo de entrada de texto en la mayoría de los casos, también. Pero, a veces, el navegador web trata el campo de entrada de correo electrónico de forma diferente a un campo de entrada de texto. Por ejemplo, cuando un campo de entrada de correo electrónico está "enfocado" en un iPhone, se muestra un teclado especial que cuenta con accesos directos para ingresar direcciones de correo electrónico.

Aquí hay un ejemplo del uso del campo de entrada de correo electrónico:

Entrada del control deslizante

Una entrada del control deslizante es un campo de entrada que permite al usuario seleccionar un número dentro de un rango de números, usando un arrastrar y soltar controlar.

Aquí está el código para crear un control deslizante:

Así es como se ve un control deslizante en un navegador web.

Obligatorio

Si desea forzar a su usuario a ingresar un valor en un campo antes de que pueda enviar el formulario, HTML5 tiene un atributo llamado obligatorio.

Para hacer que un campo de formulario sea obligatorio, solo tiene que agregar el nuevo atributo dentro de un campo de entrada de formulario, como este:

Cuando un usuario intenta enviar este formulario sin completar el campo phoneNumber, recibe un mensaje preguntándole ella para completarlo:

Al momento de escribir esto, no todos los navegadores web admiten el atributo requerido, pero es compatible con Chrome, Firefox, Internet Explorer y Opera.

Averiguar más

Para obtener más información sobre los elementos y atributos y cómo trabajar con ellos en JavaScript, visite la guía de formularios HTML en Mozilla Developer Network.