Blog de Notas sobre Temas Introductorios al Desarrollo Web: HTML y CSS

Estos son atributos de contenido incluidos en HTML5 para el elemento “input” que pueden ser utilizados en formularios HTML5. ·          step : este atributo especifica los intervalos numéricos válidos para un elemento <input>. Puede ser usado junto con los atributos “max” y “min” para crear un rango cerrado de valores válidos de un campo. El atributo “step” funciona con los tipos de <input>: number, range, date, datetime, datetime-local, month, time y week. ·          pattern : permite validar un elemento < input> en base a una expresión regular  (RegEx). Las expresiones regulares son 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). Pattern funciona con los tipos de <input>: text, search, url, tel, email, y password. ·          placeholder :   permite que se muestre una pista o ejemplo de lo que el usuario debe introducir en el c

Estos son algunos nuevos atributos de contenido incluidos en HTML5 para el elemento “ input ” que pueden ser utilizados en formularios HTML5 .     autocomplete : nos permite especificar si un formulario completo o un campo de éste debe tener la opción de autocompletado activada o no. Cuando el autocompletado esté activado (es decir, cuando su valor sea “on”), el navegador completará automáticamente el campo con valores que el usuario haya introducido en ese campo en ocasiones anteriores. Si se desactiva (asignando el valor “off”) lo que se consigue es prevenir que un campo se autocomplete automáticamente, ya que en muchos casos este autocompletado puede causar problemas, incluso de seguridad. Es posible tener el autocompletado a “on” en un formulario, y a “off” en uno o más campos dentro del mismo formulario (por ejemplo en el campo de contraseña), y viceversa.   Autocomplete funciona con el elemento <form> y con los sigui

  Los siguientes son controles de formularios de HTML5 y se utilizan para:     search : se usa para definir campos de búsqueda en formato de texto, adquiriendo un aspecto gráfico más adecuado a su función. range : se usa para definir campos que deban contener un valor numérico que esté dentro de un rango específico, rango que definimos con los atributos “min” y “max”. datetime : permite al usuario seleccionar la hora completa además del día, mes, año y zona horaria. datetime-local : permite al usuario seleccionar la hora completa más el día, mes y año, pero en este caso, a diferencia del anterior, no se incluye la zona horaria. date : permite al usuario seleccionar una fecha completa formada por día, mes y año. month : permite al usuario seleccionar un mes y un año específico. week : permite al usuario seleccionar una semana y un año específicos. time : permite al usuario seleccionar la hora, en formato de horas y minutos. Fuente: Activate, Google Españ

Algunos de los controles de formularios de HTML5 son ños siguientes: url : se usa en aquellos campos que deban contener una dirección web. El valor del campo “url” es automáticamente validado cuando el formulario es enviado. tel : se usa para definir campos en los que se deba introducir un número de teléfono. Dada la variedad de formatos que existe en todo el mundo para los números de teléfono, este tipo no impone una sintaxis o patrón determinado, para validarlo como un formato numérico en particular se debe complementar con “pattern”, un atributo de contenido que se basa en expresiones regulares. email : se usa para definir campos en los que se deba introducir una dirección de correo electrónica válida. number : se usa para definir campos en los que se deba introducir un valor numérico. Este campo puede contener atributos que permitan realizar restricciones sobre el número, por ejemplo, definiendo un valor mínimo o máximo mediante los atributos “min” y “max” o asignán

Además de AJAX , la técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador, también existen una serie de nuevas tecnologías que realizan la misma función . Todas ellas son conocidas como: “ la familia de tecnologías HTML5 ”: ·          Canvas : tiene asociada una nueva etiqueta HTML. El canvas o lienzo permite definir un área dentro de una página web en la que se puede dibujar mediante un API para JavaScript. Las posibilidades que ofrece esta tecnología son enormes. Por ejemplo, permite el desarrollo de juegos online, ya no es necesario el uso de Flash, o permite crear aplicaciones de dibujo. ·          SVG : un lenguaje de etiquetas basado en XML que permite crear gráficos vectoriales. Con SVG se pueden crear gráficos utilizando un lenguaje similar a HTML. ·            Geolocalización : Otra de las tecnologías de la familia HTML5 es el API de geolocalización para JavaScript, que permite obtener la localización del usuario,

En HTML5 los nuevos tipos de input con respecto a la especificación anterior (HTML4.01) y los atributos asociados a éstos suponen una mejora significativa para el manejo de formularios , ya que nos permite gestionarlos de manera nativa.   Por lo tanto a partir de su utilización  se puede prescindir de JavaScript para realizar algunas validaciones de formulario del lado del cliente. Supone asimismo un ahorro de tiempo y de ancho de banda , ya que, por un lado, permite que el formulario NO sea enviado si no es válido , y por otro lado, permite informar al usuario de que alguno de los valores introducidos no cumple los requisitos definidos . Para los usuarios, los formularios tienen con HTML5 un comportamiento mucho más intuitivo , donde por ejemplo, se pueden mostrar pistas sobre lo que se debe introducir en los campos de entrada, mostrar un calendario interactivo al usuario para rellenar un campo de fecha o incluso se puede seleccionar un color desde una paleta de colores.