HTML5-Formularios(II). Types «de siempre»

En el articulo anterior os hable que la mayoría de entradas se hacían con la etiqueta «input«, pero para permitir esa diversidad, y aun así, ayudar al usuario con su presentación, se apoya en este atributo (type), ahora vamos a ver sus posibles valores y para que sirven.

El atributo «type» nos permite personalizar el aspecto y la funcionalidad de la etiqueta «input«, vamos a revisar los valores de los que disponíamos hasta ahora

• button – Creacion de botones de acción
• checkbox – Creacion de casillas de verificación
• file – Subir fichero
• hidden – Campo oculto
• image – Coordenadas de imagen
• password – Campo de contraseña oculta
• radio – Opciones alternativas, radiobuttons
• reset – Botón de borrar cambios en el formulario
• submit – Botón de enviar formulario
• tel – Teléfono
• text – Texto, en una linea

type=»text»

Se trata del valor por defecto para este atributo; si no indicamos el atributo, se considerará tipo text. Con este valor, se crea el caracteristico campo de entrada.

La entrada se realiza en una unica linea; si se desea multilinea, ver la etiqueta «textarea»

type=»button»

Una etiqueta «input», en donde indiquemos el «type=button», se convierte en un elemento «button», que podemos utilizar para realizar acciones

type=»submit»

Con este valor, la etiqueta «input, se transforma en un botón, y al ser pulsado, llama a la pagina indicada en la etiqueta action del «form» y le envía todos los campos como parejas de «nombre»=»valor». por lo que todos los campos que hayan de viajar al servidor, es necesario que tengan cumplimentado el atributo «name». El texto que queramos que aparezca en el boto, se lo indicamos en el atributo «value», que tambien viajara al servidor, con el «name» que le indiquemos.

type=»reset»

La etiqueta «input» se transforma en un botón que cancela toda la información que se haya entrado en el formulario. El texto que queramos que aparezca en el boton, se lo indicaremos con el atributo «value»

type=»checkbox»

Nos permite crear casillas de verificación, y disponemos del atributo «checked» si queremos que aparezcan marcados.  En ejemplo que adjunto, podéis ver dos checkbox dentro de un fieldset, y un tercero fuera del fieldset, todos son independientes, pero el ultimo, le hemos añadido «required«, por lo que si no lo marcamos, no nos dejara enviar.

 

 

Este ultimo, tiene una característica mas que hemos controlado por la hoja de estilos:

 

Si os fijáis defino dos estilos, para la etiqueta «label», el primero es para cuando ese label se refiere (esta debajo de) a un «input» de tipo «checkbox«, que tenga el atributo «required«, pero que sea invalido (cuando no esta marcado), eso hace que el label aparezca …..si, en rojo.

El otro estilo se aplica en el mismo caso, pero cuando el elemento sea valido….cuando esta marcado; y hace que la etiqueta se ponga negra..

Se que es complejo, solo era para que empezarais a habituaros a la terminología, ya profundizaremos en ella. De momento, podéis escribir un poco y probarlo.

Tambien os recomiendo que pulséis en «Enviar». Si lo habéis copiado todo, he preparado un servidor para que devuelva una tabla indicando los campos y valores que ha recibido, y os llevareis una sorpresa, ya que no recibiréis nada por los dos primeros checkbox. Eso se debe a que no les hemos puesto el atributo «name», si modificáis el fuente y le añadís ese atributo con algún valor, y volvéis a enviarlo….veréis como ya funciona todo.

type=»radio»

Los botones radio se caracterizan porque solo se puede seleccionar una opción por grupo, ya os podéis imaginar la codificación:

 

Cuando enviéis, os daréis cuenta que solo llega un campo, ya que los radiobuttons son excluyentes, y nosotros hemos tomado la precaución de darle el mismo nombre a todos , ya que si no, no se comportarían como excluyentes, el campo llega con el «value» de la opción marcada M o F.

type=»file»

Este tipo de «input» nos permite subir ficheros al servidor. Lo primero que tenemos que saber, es que para poderlo hacer, en el servidor ha de haber algo que este esperando ficheros y sepa manejarlo, ahora nos dedicaremos a ver la parte del cliente, y dejamos el tema de servidor para mejor ocasión.

La novedad que trae a esta opción HTML5, es la posibilidad de indicar el atributo «multiple«, con lo que nuestro visitante puede seleccionar mas de un fichero, y el sistema los subira a la vez.

Debéis recordar que si utilizáis este «type», debéis indicar en la etiqueta form, el enctype correcto(multipart/form-data), así como en el nombre de este campo, es conveniente indicarle nombre[].

A continuación os dejo un formulario en donde ademas de unos checkbox, se solicita dos campos para fichero. uno de ellos soporta la selección múltiple y el otro no, no he querido utilizar CSS para no marearos mas de la cuenta…tiempo tendremos.

type=»hidden»

Con este tipo, terminamos pronto, se trata de un campo oculto, esto es, no aparece en la pantalla, en cambio viaja al servidor con el resto de campos…Para que usarlo?. Veréis que es muy practico, a veces, construyendo información con los datos que nos da el usuario, otras, para recordar algo que se obtuvo en el formulario anterior, ….

type=»image»

Este campo, se considera de entrada, pero es muy especial. Cuando añadimos un «type=image«, deberemos especificar otro atributo que es «src«, en el que le indicamos la dirección desde donde recibimos la imagen, en pantalla, aparecerá la imagen seleccionada, cuando pulsemos encima de ella, nos enviará el formulario igual que si hubiéramos pulsado en el botón de «submit», pero, ademas enviara las coordenadas de la imagen, para el sitio donde estaba nuestro ratón al hacer click

type=»password»

Con este «type», activamos un campo de texto totalmente normal excepto que no se visualizan los caracteres entrados. Es el clasi campo de introduccion de contraseñas, en donde se van visualizando puntos por cada pulsacion de teclado

type=»tel»

Campo de texto destinado a contener un numero de telefono. El tipo solo establece propiedades semánticas, y ningún filtro; es necesario apoyarnos en otros atributos para comprobar lo que contiene.

La importancia del tipo, viene dada porque al conocer el navegador su significado, lo puede utilizar para la realización de acciones concretas.

 

En el siguiente articulo HTML5-Formularios(III). Tipos de fecha y hora, revisaremos los nuevos tipos proporcionados por HTML5 para facilitarnos la entrada de las fechas y horas.