Formularios en HTML5

HTML5 nos ofrece nuevas opciones a la hora de crear formularios, como son nuevos tipos de campos y validación automática del lado del cliente, sin necesidad de scripts.

Aunque no todos los navegadores implementan todavía todas estas nuevas características, siempre podemos utilizar algún script que nos permita su uso, como puede ser este plugin de jquery

Veamos los nuevos tipos de campo que nos ofrece:

  • email: nos sirve para introducir direcciones de email
  • url: para direcciones de páginas web
  • number: para la introducción de números
  • tel: para números de teléfono
  • search: para campos de búsqueda
  • search: para campos de búsqueda
  • datetime: para seleccionar fecha y hora
  • date: para seleccionar una fecha
  • month: para seleccionar un mes
  • week: para seleccionar una semana
  • time: para seleccionar una hora
  • datetime-local: para seleccionar una fecha y una hora sin zona horaria
  • range: para seleccionar entre un rango de valores
  • color: para seleccionar un color en valor hexadecimal

Nuevos atributos que nos ofrecen nuevas posibilidades:

  • placeholder: nos muestra un texto de ejemplo dentro de la caja de texto que desaparece cuando hacemos foco en él.
  • required: nos indica que ese campo no puede ser enviado vacío, y debe cumplir las especificaciones del tipo de campo que sea, por ejemplo, en un campo tipo email debemos introducir una dirección de correo válida
  • autofocus: Hace que el cursor se coloque automáticamente en ese campo sin necesidad de ningún script.
  • pattern: Expresión regular que debe coincidir con el valor correcto que queremos que introduzca el usuario.
  • maxlength: En los textareas ahora podemos utilizar este atributo para limitar el número máximo de caracteres introducidos.

Estos son las principales novedades que nos ofrece HTML5, aunque hay muchas más que puedes consultar aquí

Veamos un ejemplo de un formulario en HTML5 que muestre estas novedades:

	<form method="post" action="script_de_proceso.php" autocomplete="off">
		<input type="text" placeholder="Nombre" name="nombre" value="" required autofocus>
		<input type="email" placeholder="Dirección de correo" name="email" value="" required>
		<textarea placeholder="Observaciones" name="observaciones" maxlength="200"></textarea>
		<input type="submit" name="enviar" value="Enviar">
	</form>

Comentarios

Comentario de iortfbxvTDB - 12 de Mayo de 2012 - 01:18
Good point. The max and min attributes are new, but you are crroect in saying that max length already existed. I have updated the post accordingly.
Comentario de Fredy - 24 de Mayo de 2013 - 05:18
Que buen blog
Comentario de Daniel Arvizu - 28 de Mayo de 2013 - 17:02
Muy buen aporte amigo...lo basico pero me sirvió de mucho...HTML5 nos facilitara la vida jaja
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí