Formularios (Parte II) - HTML5 Lección 5.1

Formularios en HTML5

Segunda Parte

Temario

• Nuevos Elementos 
• datalist
• keygen
• meter
• output
• progress
• Nuevos Atributos
• autofocus
• pattern
• placeholder
• required
• Vaidation

Nuevos Elementos

El elemento <datalist>, permite al desarrollador colocar una lista de sugerencias para un elemento "input", de tal manera que cuando el usuario coloque texto en el campo, las sugerencias aparezcan y el pueda elegir una de ellas.

<label for = "listaTxt">Nombre del Curso

         <input type = "text" list = "nombres" id = "listaTxt"/>

         <datalist id = "nombres">

                 <option value = "HTML5">

                 <option value = "JavaScript">

                 <option value = "PHP y MySQL">

         </datalist>

</label>

Veamos como funciona:

Elemento "datalist"

Selecciona el Curso

keygen

El elemento <keygen>, cifra algún dato para subirlo al servidor. Aunque podría parecer un método de seguridad, es aun un tema muy debatido donde algunos expertos señalan que este método de encriptación poco seguro. 

Incluso su permanencia dentro del estandar de HTML5 es dudosa.

<label for = "key">keygen

      <keygen id = "key" keytype = "rsa" challenge = "variablePublica" />

</label>

Este elemento recibe dos parámetros:

• kaytype: Especifica el tipo de encriptación, ("rsa" es la especificación estándar)
• challenge: Es la cadena que pasara con la dirección pública, generalmente es especificada por el servidor

meter

El elemento <meter> indica un valor numérico que está comprendido en un rango.
La etiqueta meter se emplea para indicar el valor de salida de un número.

<p>

      A

      <meter min = "0" max = "10" value = "7"></meter>

</p>

Lo que veremos en el navegador:

Elemento "meter"

A

El elemento meter soporta una serie de atributos:

• value: Indica la representación numérica de manera gráfica de la etiqueta meter, En el caso del ejemplo anterior, representaría la parte verde. 
• max: Representa el valor máximo que puede contener la etiqueta meter
• min: Indica el mínimo valor posible.
• high: si el valor se puede definir como un rango, el atributo high representa el fin mas alto de dicho rango.
• low:  si el valor se puede definir como un rango, el atributo low representa el fin mas bajo de dicho rango.
• optimum: Representa el valor óptimo para dicho elemento.

Tenga en cuenta que el valor de la etiqueta meter, posteriormente lo podremos cambiar dinámicamente con JavaScript.

output

El elemento <output>, representa el resultado de un cálculo numérico realizado a travez de un script.

Le podremos dar otros usos, cuando queramos imprimir un dato en pantalla, a modo de respuesta tras el evento de un usuario.

<form onsubmit="return false" oninput="res.value =parseInt(op1.value) * parseInt(op2.value)">

      <input name="op1" type="number" step="any"> x

      <input name="op2" type="number" step="any"> =

      <output name="res" for “op1 op2”></output>

</form>

Lo que veremos en el navegador:

Elemento "output"

x =

Los atributos específicos de esta etiqueta son:

• Name: asigna un nombre al elemento output.
• Form: asocia este elemento con el formulario en el cual está incluido. Esto permite que podamos (si queremos) situar el elemento <output> fuera del formulario asociado.
• For: Indicamos una lista  los IDs de los elementos que entran en el cálculo, esto establece una relación entre el resultado del cálculo y los elementos del mismo.

Por el momento me interesa que usted vea el funcionamiento de la etiqueta <output>, no os desesperéis en querer  entrar de lleno a codigo y todo eso, paso a paso iremos conociendo muchas cosas que serán muy interesantes  pero difíciles de entender sino conocemos bien las bases.

progress

Indica que tanto de una tarea se ha completado (generalmente en términos de porcentaje).

<p>Proceso de Descarga:

                <progress value = "25" max = "100"></progress>

</p>

Lo que veremos en el navegador será:

Elemento "progress"

Proceso de Descarga:

Desde luego posteriormente se le puede dar dinamismo a través de JavaScript

Nuevos Atributos

Así como existen nuevas etiquetas en el formulario, en el estándar de HTML5 se especifican una serie de atributos que prometen facilitar en gran medida el desarrollo de formularios. 

autofocus

Este atributo, se puede aplicar a cualquier elemento del formulario, 

El elemento que contenga este atributo, será enfocado automáticamente.

Es común en la práctica que este atributo se coloque al primer elemento del formulario.

Por obvias razones este elemento solo se debe aplicar a un solo elemento.

<fieldset>

      <legend>Atributo "autofocus"</legend>

<form action = "">

      <label>Nombre:

           <input type = "text" autofocus />

      </label>

      <label>Email:

           <input type = "email">

      </label>

</form>

</fieldset>

Cuando corra el siguiente código, vera como en automático se coloca la barra del cursor sobre el campo que corresponde al nombre.

pattern

El atributo "pattern", permite especificar un conjunto de reglas usando expresiones regulares para validar el ingreso de un dato.
Cuando nosotros queremos que el usuario ingrese un dato bajo un determinado formato hacemos uso de este atributo para especificar la validez de lo contrario dependiendo el navegador aparecerá una alerta.

<fieldset>

<legend>Atributo "pattern" Número de Telefono</legend>

           <form action="">

                <input type = "text" id = "txtNumero" pattern = "\(\d{3}\) +\d{3}-\d{4}" title = "(722) 123-4567" />

                <input type="submit">

           </form>

</fieldset>

Como puede observar, en el código anterior, se ha empleado el atributo "title", el cual sirve para indicar el tipo de dato que se desea ingresar. Ademas se puede incluir instrucciones sobre como colocar el dato correctamente.

placeholder

Este atributo sirve para colocar un valor temporal al campo de texto (input), en el momento en el que él usuario active el campo, el texto que colocamos desaparecerá automáticamente.

<form>

      <input type = "text" placeholder = "Mi Nombre" />

</form>

Lo que veremos en el navegador sera:

Atributo "placeholder"

Este atributo se puede emplear, junto con el atributo "pattern" indicar la correcta sintaxis que deseamos para un determinado campo.

required

Permite especificar un campo como obligatorio (el famoso campo con los asteriscos), de esta manera el formulario no podrá ser enviado hasta que el usuario complete todos los campos.

<input type = "text" required />

Lo que veremos en el Navegador será:

Atributo "required"

Validación

Uno de los pasos mas laboriosos a la hora de realizar un formulario, es la validación de capos con la finalidad de confirmas que el usuario ha ingresado los campos que deseamos y en el formato que lo deseamos.

Para esta tarea, generalmente se hace uso e JavaScript, sin embargo la visión que propone HTML5, vislumbra un alivio para esta tarea, aunque aun nos enfrentamos al asunto de compatibilidad con algunos navegadores, este atributo promete ser de gran utilidad para los programadores. 

Para indicarle al usuario que algún campo no fue introducido de manera adecuada, hacemos uso de CSS para indicarle, y el navegador hará el resto.

:invalid {
     background-color: red;
}

Cuando  este este estilo presente en nuestro sitio, cualquier campo que el navegaor detecte como invalido le aplicará este formato.
Si usted desea que este atributo no esté presente en algun campo, basta con colocar el atributo "novalidate" al elemento.