Caman.js es una librería de javascript que nos permite la manipulación de imágenes usando el objeto canvas de HTML. Cabe destacar que es una librería independiente y que también puede ser usada junto a otras librerías como jQuery o Mootools sin problema.
Required es un nuevo atributo de HTML5 que hace obligatorio que un campo sea rellenado antes de que se envie el formulario. De momento, las últimas versiones de Firefox, Opera y Safari, ya dan soporte a este atributo.
<form> <label for="nombre">Dime tu nombre : </label> <input name="nombre" type="text" required /> <input type="submit" value="Submit"/> </form>
El tag datalist sirve para especificar una lista de opciones predefinidas para un elemento <input>. Este tag proporciona una característica de autocompletado similar al Google Auto Suggest. El usuario verá una lista desplegable de opciones predefinidas a medida que va introduciendo contenido en la caja de texto. Para unir el elemento input con la lista de elementos del datalist se utiliza en atributo list.
<input list="navegadores" /> <datalist id="navegadores"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
Autofocus es un atributo booleano para los campos de un formulario que hace que el foco del explorador esté fijado sobre uno de ellos cuando se carga la web. En el siguiente ejemplo puedes ver que el segundo input tiene el atributo autofocus a 1 y, por tanto, verás que el cursor parpadea en el segundo cuadro de texto al cargar la página.
<p><label> Ejemplo 1:</label><input name="nombre" type="text"></p> <p><label> AutoFocus:</label><input name="nombre" autofocus type="text"></p>
Ver ejemplo en funcionamiento » »
Al igual que en nuestro anterior post, denominado "El atributo placeholder en HTML5", podemos recurrir a Modernizr y jQuery para obtener una versión cross-browser de autofocus:
$(document).ready(function() {
if(!Modernizr.input.autofocus){
$('input[autofocus]').trigger('focus');
}
});
HTML5 ha supuesto bastantes novedades en el desarrollo web. Algunas características ya se están utilizando de forma generalizada y otras muchas poco a poco se irán adoptando a medida que los navegadores las vayan soportando. Una de las nuevas características de HTML5 es el atributo placeholder para los elementos INPUT. El atributo placeholder muestra el texto en un campo hasta que el campo adquiere el foco. En ese momento, se esconde el texto.
<input name="nombre" placeholder="Tu nombre..." type="text">
Una de las ventajas de utilizar el atributo placeholder es que nuestro código será más semántico. El problema es que este atributo no está soportado por todos los navegadores. Por ejemplo, hasta el momento no es soportado por Internet Explorer. Para que sea cross-browser podemos recurrir a Modernizr y jQuery. De Modernizr ya hemos hablado anteriormente en el blog, se usa para comprobar si es el navegador es compatible con determinadas características de HTML5 o CSS3 y si no es compatible, ofrecer una alternativa.
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
El atributo placeholder funciona con los siguientes tipos de input: text, search, url, tel, email, y password.