HTML5 nuevos atributos
Al igual que los nuevos tipos de campo, el elemento input ha recibido nuevos atributos para definir su comportamiento y restricciones: autocomplete, min, max, multiple, pattern, autofocus, placeholder, required y step. Existe además un nuevo atributo, list, que hace referencia a otro elemento, permitiendo crear un nuevo tipo de entrada de datos estos son los HTML5 nuevos atributos .
ATRIBUTO LIST Y <DATALIST>
La combinación del atributo list y un elemento de tipo <datalist> da como resultado un campo de texto, donde el usuario puede introducir cualquier contenido, y las opciones definidas en el <datalist> se muestran como una lista desplegable. Hay que tener en cuenta que la lista tiene que estar contenida en un elemento <datalist> cuyo id coincide con el indicado en el atributo list:
<input id=”form-person-title” type=”text” list=”mylist”>
<datalist id=”mylist”>
<option label=”Mr” value=”Mr”>
<option label=”Ms” value=”Ms”>
<option label=”Prof” value=”Mad Professor”>
</datalist>
En este ejemplo se utiliza un campo de tipo text, pero puede ser utilizado igualmente con campos de tipo url y email.Nuevo elemento datalist, asociado a un campo de texto diseño
ATRIBUTO AUTOFOCUS
El atributo booleano autofocus permite definir que control va a tener el foco cuando la página se haya cargado. Hasta ahora, esto se conseguía a través de JavaScript, utilizando el método .focus() en un elemento concreto, al cargarse el documento. Ahora es el navegador el encargado de esta tarea, y puede comportarse de manera más inteligente, como no cambiando el foco de un elemento si el usuario ya se encuentra escribiendo en otro campo (éste era un problema común con JavaScript) diseño web .
Únicamente debe existir un elemento con este atributo definido en el documento. Desde el punto de vista de la usabilidad, hay que utilizar este atributo con cuidado. Hay que utilizarlo únicamente cuando el control que recibe el foco es el elemento principal de la página, como en un buscador, por ejemplo diseño web df.
ATRIBUTO PLACEHOLDER Una pequeña mejora en la usabilidad de los formularios, suele ser colocar diseño un pequeño texto de ayuda en algunos campos, de manera discreta y que desaparece cuando el usuario introduce algún dato. Como con el resto de elementos, hasta ahora era necesario utilizar JavaScript para realizar esta tarea, pero el atributo placeholder resuelve esta tarea HTML5 nuevos atributos.
Es importante recordar que este atributo no sustituye a la etiqueta <label>. Atributo placeholder en un campo de búsqueda
ATRIBUTO REQUIRED
Este atributo puede ser utilizado en un <textarea> y en la gran mayoría de los elementos <input> (excepto en los de tipo hidden, image o botones como submit). Cuando este atributo está presente, el navegador no permite el envío del formulario si el campo en concreto está vacío HTML5 nuevos atributos.
ATRIBUTO MULTIPLE
Este atributo permite definir que un campo puede admitir varios valores, como URLs o emails. Un uso muy interesante de este atributo es utilizarlo en conjunto con el campo <input type=”file”>, ya que de esta manera nos permite seleccionar varios ficheros que podemos enviar al servidor al mismo tiemp diseño web Guadalajara.
<input type=”file” multiple=”multiple”> HTML5 nuevos atributos.
ATRIBUTO AUTOCOMPLETE diseño web Guadalajara Algunos navegadores suelen incluir alguna funcionalidad de autocompletado en algunos campos de formulario. A pesar de haber sido introducido recientemente en el estándar de HTML5, es una característica que lleva mucho tiempo siendo utilizada, concretamente desde la versión 5 de Internet Explorer HTML5 nuevos atributos .
Este atributo permite controlar el comportamiento del autocompletado en los campos de texto del formulario (que por defecto está activado) HTML5 nuevos atributos .
ATRIBUTOS MIN Y MAX Como hemos visto en el campo <input type=”number”>, estos atributos restringen los valores que pueden ser introducidos; no es posible enviar el formulario con un valor menor que min o un valor mayor que max. También es posible utilizarlo en otro tipo de campos como date, para especificar fechas mínimas o máximas sitio web.
<input type=”date” min=”2010-01-01″ max=”2010-12-31″> diseño web