MODULO 4. Lección 14: HTML: NUEVAS FUNCIONALIDADES EN FORMULARIOS (PARTE 2)
autocomplete: Nos permite especificar si un formulario completo o si un campo de este debe tener la opción de autocompletado activado o no.
Si esta activado, su valor es ON, el navegador completa automaticamente el campo con valores que el usuario ya haya introducido en ese campo ocasiones anteriores.
Si se desactiva, asignando el valor OF, lo que se consigue es prevenir que un campo se complete automáticamente.
<form autocomplete="on">
Funciona con el atributo FORM y con los siguientes tipos de input: text, search, url, tel, email, date pickers, password, range, colors
<input type="email" name "email" autocomplete="off">
autofocus: Permite especificar en que campo de entrada queremos que se coloque el foco cuando se carga la página. Es un atributo de tipo buleano, por lo que no se debe definir más de un elemento con este atributo en la misma página.
Permite comenzar a escribir de inmediato sin hacer click en el campo.
<input type="text" name "nombre" autofocus/>
min y max: sirven para delimitar un rago de valores númericos.
<input type "number" name="cantidad" min="2" max="14"> (entre 2 y 14)
Funciona con los tipos de input: number, range, date, datetime, datetime-local, month, time, week
step: Se utiliza para especificar los intervalos numéricos validos para un elemento input. Puede ser usado junto a max y min para crear un rango cerrado de valores validos de un campo.
<input type="number" name="puntos" min="1" max="14" step="2" value="2"/>
En este caso, los valores validos para el campo son: 2, 4, 6, 8, 10, 12 y 14.
El atributo step funciona con los tipos de input: number, range, date, datetime, datetime-local, month, time, week
pattern: permite validar un elemento input en base a una expresión regular (modelos o patrones que describen las combinaciones de caracteres que se pueden introducir en el campo de texto, las que se tomarían como correctas)
Se puede utilizar el atributo global title para ayudar al usuario a comprender lo que debe escribir en el campo.
<input type="text" name="prefijo_pais" pattern="[A-Za-z] {3}" title="Código de 3 letras"/>
El atributo pattern funciona con los tipos de input: text, search, url, tel, email y password
placeholder: Permite que se muestre una pista o un ejemplo de lo que el usuario debe de introducir en el campo de entrada, ya sea mediante un valor representativo o de una descripción corta del formato esperado en el campo que se muestra en el campo mientras esta vació y desaparece cuando el campo recibe el foco (Modzilla Firefox) o cuando se comienza a rellenar el campo (Google Chrome).
<input type="text" name="nombre" placeholder="Juan Pérez"/>
El atributo pattern funciona con los tipos de input: text, search, url, tel, email y password
required: Es un atributo buleano que cuando esta presente especifica que el input que lo contiene debe ser rellenado por el usuario antes de enviar el formulario. Es el tipico campo obligatorio, que debe rellenarse, y que suele estar marcado con un asterísco o con color rojo.
El atributo pattern funciona con los tipos de input: text, search, url, tel, email, date pickers, password, number, checkbox, radio, file
<input type="text" name="nombre" required/>
MODERNIZR: Es una micro librería de Javascript que nos permite conocer la compatibilidad del navegador del usuario con las nuevas características de HTML5 y CSS3, y en caso de que alguna característica usada en el código no sea compatible con el navegador, modernizr lo detecta y permite tomar medidas para resolver el problema, que se basan en el uso de Polyfills
POLYFILLS: Líbrerias Javascript que nos permiten cubrir las capacidades HTML5 y CSS3 que los navegadores no soportan. Lo que hacen, es cambiar el HTML5 por otras tecnologías soportadas por el navegador en cuestión como por ejemplo Javascript.
Comentarios
Publicar un comentario