- Nuevos atributos de contenido.
- autocomplete, autofocus, min, max, step, pattern, placeholder,required
- Modernizr y Polyfills
autocomplete: puede utilizarse con otras etiquetas como el elemento form. Especifica si un formulario completo o un campo de éste debe de tener la opción de autocompletado.
Ejemplo:
<form autocomplete="on">
<input type="email" name="email" autocomplete="off">
Con valor on se autocompletará el formulario con valores que el usuario haya introducido en ese campo en ocasiones anteriores. En el caso de desactivarlo con la opción off se previene que un campo se complete automáticamente, por motivos de seguridad por ejemplo.
Es posible que en un mismo formulario existan campos que se autocompleten y que no lo hagan.
+21.04.43.png)
Este atributo funciona con los siguiente tipos (type) de input:
- text
- search
- url
- tel
- date pickers
- password
- range
- color
autofocus: no permite indicar en qué campo de entrada se coloca el foco cuando se carga la página. Es un atributo de tipo booleano, por lo que no debemos definit más de uno en cada formulario.
Ejemplo:
<input type="text" name="nombre" autofocus>
Este atributo es muy útil para los usuarios de teléfonos móviles. Es importante asegurarse que el campo seleccionado para que sea el campo que empezarán a usar la mayoría de los usuario.
min y max se utilizan para delimitar el rango de los valores numéricos. Permiten especificar un máximo y un mínimo para un campo de entrada. No permite introducir un valor por encima del máximo y por debajo del mínimo.
Ejemplo:
<input type="number" name="cantidad" min="2" max="8" />
<input type="range" name="rango" min="2" max="8" />
Este atributo funciona con los siguiente tipos (type) de input:
- number
- range
- date
- datetime
- datetime-local
- month
- time
- week
step: nos indica la pauta que nos dará los valores válidos en un formulario, en el caso anterior serían válidos los valores 2,4,6,8
Ejemplo:
<input type="range" name="rango" min="2" max="8" step="2" value="2"/>
Este atributo funciona con los siguiente tipos (type) de input:
- number
- range
- date
- datetime
- datetime-local
- month
- time
- week
pattern: el atributo pattern permite especificar las expresiones regulares que pueden introducirse en un campo.
Ejemplo:
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
+23.27.51.png){kind=small}
El atributo title nos ayuda a comprender que información espera el campo.
Este atributo funciona con los siguiente tipos (type) de input:
- text
- search
- url
- tel
- password
placeholder: este atributo nos muestra el contenido que espera el campo.
Ejemplo:
<input type="text" name="nombre" placeholder="Fernando Haro" />
+23.38.15.png)
Esta pista se muestra en el campo cuando está vacío y desaparece cuando el campo recibe el foco.
Este atributo funciona con los siguiente tipos (type) de input:
- text
- search
- url
- tel
- password
required: es un atributo booleano que indica que el campo que debe de rellenarse antes de enviar el formulario. Es el campo obligatorio que aparece señalado con un asterisco o en rojo.
Ejemplo:
<input type="text" name="nombre" required />
Este atributo funciona con los siguiente tipos (type) de input:
- text
- search
- url
- tel
- password
- number
- checkbox
- radio
- file
Modernizr y Polyfills
Modernizr: es una librería de javascript que nos permite conocer la compatibilidad del navegador con las tecnologías HTML5 y CSS3. En el caso de encontrar elementos no compatibles ofrece medidas para solucionarlo.
Polyfills: librería de javascript que nos permiten cubrir los elementos no soportados por los navegadores.
Modernizr + polyfills ahorra trabajo a los desarrolladores.
Este post se ha creado a partir del video del curso idesweb.
+23.33.05.png)
+23.43.51.png)
+23.56.52.png)
+00.00.52.png)
+23.24.32.png){kind=small}
+23.27.27.png){kind=small}
+23.38.21.png){kind=small}
+23.49.08.png)
+23.43.15.png)
+23.54.59.png){kind=small}
+22.10.43.png)
+22.12.39.png)
+22.06.59.png)
+22.43.22.png)
+22.45.52.png)
+22.49.32.png)
+22.56.12.png)
+18.34.50.png)
+18.46.25.png)
+18.52.02.png)
+18.56.09.png)
+18.58.59.png)
+19.05.57.png)
+21.07.51.png)
+18.49.09.png){kind=link}