Formularios (Parte III) - HTML5 Lección 5.2

Formularios en HTML5

Tercera Parte

Temario

• Nuevos "Input Types"
• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Nuevos "Input Types"

La intención de estos campos es la de proveer mayor flexibilidad a los formularios. Lo que a su vez genera una gama bastante nutrida para la interfaz de los formularios.

Color

Permite al usuario escoger un color, los diferentes navegadores despliegan un formato diferente para escoger el color, aunque el mas común es la típica paleta donde se muestran las diferentes gamas de colores.

<fieldset>

<legend>Nuevos Elementos Input "color"</legend>

                <form action="">

                    <input type="color" id = "color" />

                </form>

</fieldset>

Lo que veremos en el navegador ser:

Nuevos Elementos Input "color"

data

Se utiliza este elemento, para pedirle al usuario que introduzca una fecha. 

En navegadores como Opera y Chrome se despliega un cuadro de texto con una flecha que permite desglosar un calendario, mientras que otros como Mozilla muestran un cuadro de texto básico, esperemos pronto se torne universal estas características.

<fieldset>

<legend>Nuevo Elemento Input "date"</legend>

      <form action="">

          <input type="date" id = "date" />

      </form>

</fieldset>

Lo que veremos en el navegador será:

Nuevo Elemento Input "date"

datetime

El elemento "datetime" combina los elementos "date" y "time" en un solo elemento.

<fieldset>

<legend>Nuevo Elemento Input "datetime"</legend>

      <form action="">

          <input type="datetime" id = "datetime" />

      </form>

</fieldset>

Lo que veremos en el navegador será:

Nuevo Elemento Input "datetime"

En algunos navegadores se muestra un simple campo de texto, mientras que en otro se muestra un calendario desplegable para introducir la fecha y un campo con formato para introducir la hora.

El formato oficial que recibe el elemento "datetime" es:

aaaa-mm-ddThh:mm+ff:gg 

Donde cada caracter representa:

• yyyy: Los cuatro dígitos del año
• -: El caracter de guión, el cual debe colocarse entre año y mes, y mes y día.
• mm: Los dos dígitos del mes
• dd- Los dos dígitos del día
• T: La letra en mayúscula "T" representa el inicio de la parte correspondiente a la hora
• hh: Indica los dos dígitos de la hora en formato de 24hrs. (00:00 a 23:59)
• : : El caracter de los dos puntos indica la separación entre las horas y los minutos
• mm: Los dos dígitos de los minutos 
• +/-/Z: El ajuste de Zona Horaria se especifica mediante el uso de la letra mayúscula "Z" (esto si el tiempo corresponde a la zona de Zulu o GMT) o  con las expresiones +/- si se trata de otra zona horaria.
• ff: Si la zona horaria no corresponde al tiempo de Zulu, este indica el ajuste de horario de GMT
• gg: Número de minutos que se ajustan a la zona horaria, normalmente este valor es de "00" pero es posible que se haga un ajuste de 15, 30 o 45 minutos.

Si el usuario ocupa un navegador que valida este campo, el formato tendía que ser este, ya que la mayoría de los programas que gestionan estos datos para procesarlos y emitir un resultado, ocupan esta disposición para el proceso.

datetime-local

El elemento "datetime-local" es igual que el anterior, solo que este no incluye un indicador para la zona horaria.

<fieldset>

<legend>Nuevo Elemento Input "datetime"</legend>

      <form action="">

          <input type="datetime-local" id = "datetimeLocal" />

      </form>

</fieldset>

Lo que veremos en el navegador será:

Nuevo Elemento Input "datetime-local"

email

El elemento Email, generalmente se muestra como un simple campo de texto, pero su función radica en validar un campo correspondiente al formato de un Email.

Aunque algunos navegadores, sobretodo los móviles indican un simbolo de "@" en el campo.

<fieldset>

<legend>Nuevo Elemento Input "Email"</legend>

      <form action="">

          <input type="email" id = "txtEmail" />

      </form>

</fieldset> 

Lo que veremos en el Navegador será:

Nuevo Elemento Input "Email"

month

El elemento d "month", especifica un elemento de "input" con formato de (aaaa-mm), donde generalmente se despliega un formato parecido al de date, aunque solo recopila estos dos datos.

<fieldset>

<legend>Nuevo Elemento Input "month"</legend>

      <form action="">

          <input type = "month" id = "month" />

      </form>

</fieldset>

Lo que veremos en el navegador será:

Nuevo Elemento Input "month"

number

El elemento "number" permite el ingreso de datos numéricos.

Este elemento puede modificar dependiendo el nvegador, donde su puede mostrar una flecha de despliegue, que muestre datos numéricos, al igual que en los dispositivo celulares se muestre solamente datos numéricos  

<fieldset>

<legend>Nuevo Elemento Input "number"</legend>

      <form action="">

          <input type = "number" id = "number" max = "10" min = "0" />

      </form>

</fieldset>

Lo que verá en el navegador será:

Nuevo Elemento Input "number"

El elemento de "number" recibe algunos atributos extra:

• min: Este es el valor mínimo permitido que el usuario puede introducir en el formulario, en el caso de la validación  el formulario no admitirá un valor menor al especificado para este atributo. 
• max: Este es el valor máximo permitido y al igual que el anterior no se validará el formulario si hay un valor mayor que el especificado en este campo.
• step: Especifica el número legal de intervalos, por defecto es "1", pero lo puede modificar.

Nuevo Elemento Input "number", "step = 3"

• value: Es el valor numérico que aparecerá por defecto en el campo.

range

El elemento "range" permite especificar de una manera mas fácil un dato numérico.

Al igual que el elemento "number", el elemento "range" recibe los atributos de (max, min, step y value).

<!DOCTYPE html>

<html>

      <head>

           <script type="text/javascript">

                 function actualizarOutput(){

                 var miRange = document.getElementById("miRange");

                 var miOutput = document.getElementById("miOutput");

                 miOutput.value = miRange.value;

                 }

           </script>

      </head>

      <body>

           <fieldset>

                 <legend>Elemento Range</legend>

                 <form action = "">

                       <input id = "miRange" type = "range" min = "0" max = "255" value = "128" onchange = "actualizarOutput()" />

                       <output id = "miOutput">128</output>

                 </form>

           </fieldset>

</body>

</html>

Note que este código implementa un poco de JavaScript.

Este código es independiente del elemento "range" solo que con él podemos ver en el navegador el valor que tiene nuestro elemento de manera numérica.

Veamos como se ve en el navegador:

Elemento Range

 

128

search

El elemento "search" se emplea para realizar algún tipo de búsqueda, por el momento este campo no tiene ningún comportamiento ya que esto queda a cargo de algún script.

Recuerde que HTML5 tiene como misión el mejoramiento semántico de los elementos y destinar a cada parte de una página web un elemento con una acción especifica y un nombre determinado, mas no por la función que realice dicho elemento.

Ademas de que en algunos navegadores le proporcionan un formato definido a este elemento.

<fieldset>

      <legend>Elemento "Search"</legend>

      <form action = "">

           <input type= "search" id = "search" />

      </form>

</fieldset>

Lo que veremos en el navegador será:

Elemento "Search"

tel

El campo "tel" es usado para introducir números telefónicos. Este elemento se puede emplead junto con el atributo "pattern" para especificar el formato deseado del número telefónico.

<fieldset>

      <legend>Elemento "tel"</legend>

      <form action = "">

           <input type = "tel" id = "tel" />

      </form>

</fieldset>

Lo que veremos en el navegador sera:

Elemento "tel"

time

El propósito del elemento time, es permitirle al usuario el ingreso de una hora.

El formato de la hora será: hh:mm.

Y como ya hemos visto anteriormente el formato en el que aparecerá este elemento sera especificado por el navegador.

<fieldset>

      <legend>Elemento "tel"</legend>

      <form action = "">

           <input type = "time" id = "time" />

      </form>

</fieldset>

Lo que veremos en el navegador será:

Elemento "tel"

url

El elemento "url" se emplea para introducir una dirección web.

Los navegadores que soportan este elemento revisaran el prefijo http:// y el teclado de los dispositivos mostrara los elementos necesarios para escribir una direccion web como (:, /, - y el .com).

<fieldset>

      <legend>Elemento "url"</legend>

      <form action = "">

           <input type = "url" id = "url" />

      </form>

</fieldset>

Lo que veremos en el navegador sera:

Elemento "url"

week

El elemento"week" se utiliza para introducir una semana del calendario y la procesa con el formato:

yyyy-Wnn

Donde:

• yyyy: Representa los cuatro dígitos del año
• -: Separa los dígitos de la semana y el año
• W: Indica el comienzo de los dígitos correspondientes a la semana
• nn: Representa dos dígitos correspondientes a la semana.

<fieldset>

      <legend>Elemento "week"</legend>

      <form action = "">

           <input type = "week" id = "week" />

      </form>

</fieldset>

Lo que veremos en el navegador será:

Elemento "week"

La mayoría de los navegadores muestran el calendario normal, pero cuando el usuario selecciona un día, solo los datos de año y se mana son tomados por el formulario.