HTML5: formularios web 2.0

Web Forms 2.0 es una extensión de las funciones de formularios que se encuentran en HTML4. Los elementos y atributos de formulario en HTML5 proporcionan un mayor grado de marcado semántico que HTML4 y nos liberan de una gran cantidad de tediosos scripts y estilos que se requerían en HTML4.

El elemento <input> en HTML4

Los elementos de entrada HTML4 utilizan type atributo para especificar el tipo de datos. HTML4 proporciona los siguientes tipos:

No Señor.	Tipo y descripción
1	text Un campo de texto de forma libre, nominalmente libre de saltos de línea.
2	password Un campo de texto de formato libre para información confidencial, nominalmente libre de saltos de línea.
3	checkbox Un conjunto de cero o más valores de una lista predefinida.
4	radio Un valor enumerado.
5	submit Una forma gratuita de botón inicia el envío del formulario.
6	file Un archivo arbitrario con un tipo MIME y, opcionalmente, un nombre de archivo.
7	image Una coordenada, relativa al tamaño de una imagen en particular, con la semántica adicional de que debe ser el último valor seleccionado e inicia el envío del formulario.
8	hidden Una cadena arbitraria que normalmente no se muestra al usuario.
9	select Un valor enumerado, muy parecido al tipo de radio.
10	textarea Un campo de texto de forma libre, nominalmente sin restricciones de salto de línea.
11	button Una forma gratuita de botón que puede iniciar cualquier evento relacionado con el botón.

A continuación, se muestra un ejemplo sencillo de cómo usar etiquetas, botones de opción y botones de envío:

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

El elemento <input> en HTML5

Aparte de los atributos mencionados anteriormente, los elementos de entrada HTML5 introdujeron varios valores nuevos para el typeatributo. Estos se enumeran a continuación.

NOTE - Pruebe todo el siguiente ejemplo utilizando la última versión de Opera navegador.

No Señor.	Tipo y descripción
1	fecha y hora Una fecha y hora (año, mes, día, hora, minuto, segundo, fracciones de segundo) codificadas de acuerdo con ISO 8601 con la zona horaria establecida en UTC.
2	fecha y hora local Una fecha y hora (año, mes, día, hora, minuto, segundo, fracciones de segundo) codificadas de acuerdo con ISO 8601, sin información de zona horaria.
3	fecha Una fecha (año, mes, día) codificada según ISO 8601.
4	mes Una fecha que consta de un año y un mes codificados según la norma ISO 8601.
5	semana Una fecha que consta de un año y un número de semana codificado de acuerdo con ISO 8601.
6	hora Un tiempo (hora, minuto, segundos, fracciones de segundo) codificado según ISO 8601.
7	número Acepta solo valor numérico. El atributo de paso especifica la precisión, con un valor predeterminado de 1.
8	rango El tipo de rango se usa para campos de entrada que deben contener un valor de un rango de números.
9	correo electrónico Acepta solo valor de correo electrónico. Este tipo se utiliza para campos de entrada que deben contener una dirección de correo electrónico. Si intenta enviar un texto simple, obliga a ingresar solo la dirección de correo electrónico en formato [email protected].
10	url Acepta solo el valor de URL. Este tipo se utiliza para campos de entrada que deben contener una dirección URL. Si intenta enviar un texto simple, obliga a ingresar solo la dirección URL, ya sea en formato http://www.example.com o en formato http://example.com.

El elemento <output>

HTML5 introdujo un nuevo elemento <output> que se utiliza para representar el resultado de diferentes tipos de salida, como la salida escrita por un script.

Puedes usar el foratributo para especificar una relación entre el elemento de salida y otros elementos en el documento que afectaron el cálculo (por ejemplo, como entradas o parámetros). El valor del atributo for es una lista separada por espacios de ID de otros elementos.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

Producirá el siguiente resultado:

El atributo de marcador de posición

HTML5 introdujo un nuevo atributo llamado placeholder. Este atributo en los elementos <input> y <textarea> proporciona una pista al usuario de lo que se puede ingresar en el campo. El texto del marcador de posición no debe contener retornos de carro ni saltos de línea.

Aquí está la sintaxis simple para el atributo de marcador de posición:

<input type = "text" name = "search" placeholder = "search the web"/>

Este atributo solo es compatible con las últimas versiones de los navegadores Mozilla, Safari y Crome.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

Esto producirá el siguiente resultado:

El atributo de enfoque automático

Este es un patrón simple de un paso, que se programa fácilmente en JavaScript en el momento de la carga del documento, enfoca automáticamente un campo de formulario en particular.

HTML5 introdujo un nuevo atributo llamado autofocus que se usaría de la siguiente manera:

<input type = "text" name = "search" autofocus/>

Este atributo solo es compatible con las últimas versiones de los navegadores Mozilla, Safari y Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

El atributo requerido

Ahora no es necesario tener JavaScript para las validaciones del lado del cliente, ya que el cuadro de texto vacío nunca se enviaría porque HTML5 introdujo un nuevo atributo llamado required que se usaría de la siguiente manera e insistiría en tener un valor:

<input type = "text" name = "search" required/>

Este atributo solo es compatible con las últimas versiones de los navegadores Mozilla, Safari y Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Producirá el siguiente resultado: