5 Html5 trucos de entrada de formulario
Video: Tutorial #11 HTML (XHTML) básico - Formulario - Input Text/Textarea
La forma más común de obtener la entrada del usuario para un programa javascript es mediante el uso de elementos de formulario HTML. La última versión de HTML, HTML 5, tiene varios elementos y atributos formar nuevas.
entradas de texto
entradas de texto son el tipo más básico de campo de formulario HTML. Se utilizan para dar al usuario una página web de entrada en blanco en la que puede introducir cualquier valor. He aquí un ejemplo del código utilizado para crear una entrada de texto:
Esto es lo que este campo se ve como en un navegador:
texto del marcador
texto del marcador aparece dentro del campo de entrada antes de que un usuario comienza a escribir. Es útil para decirle al usuario lo que se espera que entren.
Video: Curso de HTML y HTML 5 parte 14 - Formularios
Aquí está un ejemplo del uso de texto de marcador de posición en una entrada de texto:
Esto es lo que este campo se ve como en un navegador web.
Video: 05 - tutorial formulario html 5 y css 3 | textarea
El enfoque automático
Cuando se selecciona el campo de entrada y se puede ver el cursor dentro de la misma, que “tiene el foco.” Si quieres un determinado campo (tales como el campo Nombre) para tener “enfoque” tan pronto como abrir una página Web, se puede utilizar el atributo de enfoque automático. Esto es lo que parece:
de entrada de correo electrónico
El campo de entrada de correo electrónico se parece a 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 diferente de un campo de entrada de texto. Por ejemplo, cuando un campo de entrada de correo electrónico es “en foco” en un iPhone, un especial de pantallas teclado que cuenta con accesos directos para introducir direcciones de correo electrónico.
Aquí está un ejemplo del uso del campo de entrada de correo electrónico:
deslizador de entrada
Una entrada de control deslizante es un campo de entrada que permite al usuario seleccionar un número dentro de un rango de números, mediante el uso de un control de arrastrar y soltar.
Aquí está el código para la creación de un control deslizante:
Esto es lo que un control deslizante se ve como en un navegador web.
Necesario
Si desea forzar a su usuario que introduzca un valor en un campo antes de que él es capaz de enviar el formulario, HTML5 tiene un atributo llamado necesario.
Para hacer un campo de formulario requerido, sólo tiene que añadir el nuevo atributo dentro de un campo de formulario de entrada, así:
Cuando un usuario intenta enviar este formulario sin cumplimentar el número de teléfono campo, que recibe un mensaje pidiéndole que llenarlo en:
Al escribir estas líneas, no todos los navegadores web soportan la necesario atributo, sino que se apoya en Chrome, Firefox, Internet Explorer y Opera.
Cómo obtener más información
Para obtener más información acerca de los elementos y atributos y cómo trabajar con ellos en javascript, visite el guía de formularios HTML en Mozilla Developer Network.