Nuevos estándares en el desarrollo de sitios web: HTML5 y CSS3

11 HTML5 - Formularios

Nuevos tipos de entrada:

<input type="email" />
<input type="url" />
<input type="date" />
<input type="time" />
<input type="datetime" />
<input type="month" />
<input type="week" />
<input type="number" />
<input type="range" />
<input type="tel" />
<input type="search" />
<input type="color" />

Nuevos controles:

<output></output>

Nuevos atributos:

  • autofocus
  • min
  • max
  • pattern
  • placeholder
  • required
  • step

Un ejemplo de los nuevos controles de formulario y atributos (ver el siguiente ejemplo independientemente):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo nuevos controles</title>
</head>
<body>
<form action="." oninput="range_control_value.value = range_control.valueAsNumber">
<p>
Nombre: <input type="text" name="name_control" autofocus required />
<br />
Correo Electrónico: <input type="email" name="email_control" required />
<br />
URL: <input type="url" name="url_control" placeholder="Escripe la URL de tu página web personal" />
<br />
Fecha: <input type="date" name="date_control" />
<br />
Tiempo: <input type="time" name="time_control" />
<br />
Fecha y hora de nacimiento: <input type="datetime" name="datetime_control" />
<br />
Mes: <input type="month" name="month_control" />
<br />
Semana: <input type="week" name="week_control" />
<br />
Número (min -10, max 10): <input type="number" name="number_control" min="-10" max="10" value="0" />
<br />
Intervalo (min 0, max 10): <input type="range" name="range_control" min="0" max="10" value="0" /> <output for="range_control" name="range_control_value" >0</output>
<br />
Teléfono: <input type="tel" name="tel_control" />
<br />
Término de búsqueda: <input type="search" name="search_control" />
<br />
Color Favorito: <input type="color" name="color_control" />
<br />
<input type="submit" value="Submit!" />
</p>
</form>
</body>
</html>

Este ejemplo solamente funciona correctamente en Opera 11.6:

Formulario ejemplo en Opera

Opera puede mostrar un control personalizado para la fecha y el tiempo:

Formulario ejemplo en Opera

Opera puede mostrar un control de colores personalizado:

Formulario ejemplo en Opera

Y Opera puede comprobar algunas restricciones, como requerido, email, mínimo, y máximo:

Formulario ejemplo en Opera

Google Chrome 19 solamente muestra y comprueba algunos controles:

Formulario ejemplo en Google Chrome

Microsoft Internet Explorer 9 no puede mostrar ni comprobar ningún control de formulario nuevo:

Formulario ejemplo en Microsoft Internet Explorer

Microsoft Internet Explorer 10 beta, ya muestra algunos controles personalizados como el intervalo:

Formulario ejemplo en Microsoft Internet Explorer 10 beta

Microsoft Internet Explorer 10 beta, también comprueba algunos controles como los requeridos o correo electrónico:

Formulario ejemplo en Microsoft Internet Explorer 10 beta

Mozilla Firefox 12 solamente puede comprobar algunos controles de formularios nuevos, como requerido o correo electrónico:

Form example in Mozilla Firefox

Como hemos podido ver anteriormente, el navegador Opera es el único que casi proporciona un soporte completo para los nuevos controles de formularios y atributos. El W3C Markup Validator nos advierte sobre esta situación: The date input type is so far supported properly only by Opera. Please be sure to test your page in Opera:

Validación de el formulario de ejemplo con W3C Markup Validator

El sitio web New HTML5 Input Types and Attributes ofrece explicaciones y ejemplos sobre los nuevos controles de formularios de HTML5.