Formulario - Input

En el concepto anterior vimos como implementar un formulario básico. Veamos ahora con más detenimiento el elemento input. Este elemento hemos visto que nos permite definir cuadros de texto y botón para subir los datos al servidor. Ahora veremos que también podemos definir cuadros para el ingreso de una clave y botones para borrar el contenido de todos los controles del formulario.

Confeccionaremos un formulario que solicite el ingreso del nombre de un usuario y su clave:

Campos de entrada de datos

Son los elementos básicos de un formulario ya que son los que nos permiten recuperar información del usuario de diferentes formas. El elemento que representa los campos de entrada de datos es input. La estructura básica de un campo de entrada es la siguiente:

Si vemos los atributos que tiene el elemento input nos encontramos los siguientes:

• type, indica el tipo de campo de entrada de datos que vamos a utilizar. Dependiendo del tipo que indiquemos obtendremos un resultado u otro. Los valores que puede tener el atributo type son: “text”, “password”, “checkbox”, “radio”, “submit”, “reset”, “file”, “hidden”, “image” y “button”.
• id, es el identificador del campo. Es importante ya que será el nombre por el cual podremos identificar, de forma unívoca, al campo.
• size, será el tamaño del campo. Es decir, el número de caracteres que podríamos insertar en el campo de texto.
• name, es el nombre del campo el cual se enviará desde el formulario al servidor.
• value, será el valor por defecto que tendrá el campo de texto y que le aparecerá al usuario al cargar el formulario.

Cuando enviemos el formulario al servidor, se toma la combinación name=value para ser enviada.

Campos de texto

El campo de texto, como bien indica su nombre, es el que nos permite insertar texto en un formulario. El usuario podrá insertar texto visible sobre el campo.

En este caso el tipo de elemento input que utilizaremos será “text”. Así, para definir un campo de texto lo haremos de la siguiente forma:

De esta forma si queremos crear un campo de texto para poder insertar 70 caracteres que contenga un email, lo definiremos de la siguiente forma:

Contraseñas

Cuando un usuario inserte una contraseña dentro de un formulario necesitaremos, casi seguro, que el valor de la contraseña no aparezca y que por el contrario aparezcan caracteres como asteriscos.

Para insertar un campo que acepte contraseñas dentro de un formulario vamos a utilizar un tipo “password” dentro del elemento input.

En este caso, aunque podemos poner un valor por defecto, si bien, no parece tener mucho sentido. Si queremos definir un campo que acepte contraseñas de 20 caracteres lo codificaremos de la siguiente forma:

Checkbox

Un checkbox nos permite capturar un dato del usuario mediante un elemento de check. El check puede tener dos valores, seleccionado o no seleccionado. El tipo del elemento input que utilizaremos será “checkbox”. Así lo definiremos de la siguiente forma:

El ejemplo anterior se vería así

En el caso del checkbox no tienen sentido el atributo tamaño ni el valor por defecto. Ya que, recordemos que solo podemos tener el check seleccionado o no. Pero lo que sí podemos hacer es generar un checkbox que esta preseleccionado. Para ello utilizamos el atributo checked.

El ejemplo anterior se vería así

Pero ¿dónde está el texto que acompaña al checkbox? Realmente el checkbox no tiene definido que acompañe al checkbox. Si no que hay que añadir el texto directamente al lado del checkbox.

Aunque más adelante vamos a ver una forma más correcta de asociar el texto al checkbox.

Así, si queremos crear un checkbox que nos pregunte si estamos de acuerdo con unas condiciones podríamos codificarlo de la siguiente forma:

Los checkbox suelen ir en grupos para seleccionar varias opciones. Por ejemplo podríamos tener el siguiente código con el que podamos seleccionar qué lenguaje de programación queremos aprender.

El ejemplo anterior se vería así

Radios

Con los elementos de radio podemos ofrecer un conjunto de opciones al usuario de tal manera que solo pueda elegir una de ellas. El tipo de elemento input que utilizamos es “radio”.

La sintaxis que seguiremos en los elementos input de tipo radio será la siguiente:

En el caso de los elementos radio toma un papel principal el atributo . Ya que para poder agrupar opciones deberemos de tener el mismo valor de atributo name.

Así, si queremos crear un grupo de radios para que nos elija una edad le podremos crear de la siguiente forma:

Al igual que sucedía con los campos de entrada de tipo check, podemos cargar campos de tipo radio en nuestro formulario con un elemento preseleccionado. Para ello volvemos a recurrir al atributo checked.

Ficheros

Cuando diseñemos un formulario es posible que necesitemos enviar un fichero de datos al servidor. En este caso el campo de entrada de datos nos tiene que dar la posibilidad de acceder al sistema de fichero del dispositivo para poder seleccionar uno.

En este caso vamos a necesitar un campo de entrada de tipo “file”. La sintaxis de los campos de entrada para tipos file sería:

Campos Ocultos

Otra de las opciones que nos podemos encontrar dentro de los formularios es con la necesidad de enviar información oculta. Es decir, información que tiene que ir anexa al formulario pero que no necesita ser introducida por el usuario. Para ello tenemos la posibilidad de crear campos de datos ocultos.

La sintaxis para los campos de entrada ocultos es:

En estos casos el campo valor siempre va relleno, ya que no hay otra forma de que el usuario le asigne un valor.

Imágenes

Uno de los tipos de elementos input es el tipo “image”. Mediante el tipo “image” podemos crear un botón de envío que sea una imágen. La imagen se cargará mediante el atributo src. La estructura para elementos input de este tipo es:

Como sucede cada vez que manipulamos imágenes hay que rellenar el atributo alt con un texto alternativo por motivos de accesibilidad.

Cuando pulsemos sobre la imagen se enviará el formulario, además se enviarán dos atributos name.x y name.y con los datos de las coordenadas x,y en las que se pulsó sobre la imagen.