Tal y como ya mencionamos en la entrega anterior del curso de HTML y CSS, hoy vamos a hablar de los diferentes tipos que existen de la etiqueta input. Sin embargo, antes de ponernos a describir todos y cada uno de ellos dedicaremos una parte del tiempo a hablar brevemente de los formularios, algo que seguro más de una vez al día utilizáis cuando navegáis en Internet.
Los formularios son muy importantes hoy en día en las páginas web y se utilizan primordialmente para que el usuario pueda relacionarse con la página web y que esta pueda procesar información. Para crear un formulario no valdremos de las etiquetas …, pudiendo colocar entre estas cualquier otra etiquetas, siendo principalmente etiquetas de tipo input las que vayan a ser utilizadas. Además de las etiquetas de tipo input, es muy importante que el formulario posea un botón de «enviar», para que la información ubicada en los input tenga alguna utilidad y sea procesada y almacenada, si es el caso.
A la hora de tratar la información introducida en los input es muy importante tener en cuenta que se manejan pares de información, o lo que es lo mismo, cada input tiene un nombre y gracias a ese nombre se puede acceder a la información contenida en este.
La etiqueta input
Estas etiquetas hacen referencia a unos controles que sirven para introducir y manejar información en un formulario. Existen varios tipos asociados a estas etiquetas, pero todos ellos tienen en común la forma en la que se declaran en el código HTML:
- El tipo hace referencia a la declaración del tipo de etiqueta input que queremos declarar.
- Name hace referencia al identificador de esta etiqueta y es indispensable como decíamos con anterioridad para identificar el contenido de cada etiqueta.
- Value hace referencia al valor que se desea que la etiqueta posea por defecto. La mayoría de los casos estará vacio pero es probable que en una situación determinada queramos que la etiqueta posee un valor por defecto a modo indicativo.
Los diferentes tipos de etiquetas
Campos de texto
Como su propio nombre indica, permiten al usuario introducir un texto que posteriormente será procesado. Sirvíendose de atributos como size o maxlength el usuario puede delimitar el número de caracteres que se desea que se introduzcan.
Implementación:
type=“text”
name=»espacioDeTexto1″
atributos_comunes
size=“num_caracteres”
maxlength=“num_caracteres” />
Contraseñas
Este tipo actúa de la misma forma que lo hace el de texto. con la única diferencia de que en este caso no se muestran los caracteres que se están tecleando. De igual forma que el campo de texto, se puede delimitar la longitud con los atributos maxlength y size.
Implementación:
type=“text”
name=»Contrasena1″
atributos_comunes
size=“num_caracteres”
maxlength=“num_caracteres” />
Checkbox
Se utilizan cuando el usuario debe elegir entre varias opciones que se le dan a elegir. Si queremos que el checkbox se encuentre marcado por defecto tan solo debemos añadir checked en la declaración de este.
Implementación:
type=“checkbox”
atributos_comunes
checked
/>
Radio Button
Este tipo de etiqueta tiene prácticamente la misma funcionalidad que la anterior, con la diferencia de que en este caso solo se permite la selección de uno a la vez, mientras que los checkbox permitían al usuario la selección de varios a la vez. Al igual que en los anteriores se puede seleccionar una casilla por defecto.
Implementación:
type=“radio”
atributos_comunes
checked
/>
Enviar archivos
Este tipo permite un control para buscar un archivo que será enviado al servidor. Este control también incluye el cuadro de diálogo gracias al cual se podrá realizar la búsqueda.
Implementación:
type=“file”
atributos_comunes
/>
Áreas de texto
Se trata de un tipo que permite al usuario disponer de un campo de texto pero que es configurable en lo referido a filas y a columnas que ocupa. De esta forma, gracias a los atributos rows=“num_líneas” y cols=“num_columnas” permite la configuración de su tamaño. No posee la etiqueta value pero sí que se le puede asignar un contenido inicial
Implementación:
Listas desplegables
Se trata de una lista desplegable en la que el usuario deberá seleccionar un elemento. Se puede configurar cuantos elementos dispone la lista y también indicar cuántos elementos son visibles sin que esta sea desplegada.
Implementación:
Botón de envío
Esta etiqueta no genera ningún tipo de valor, pero es la encargada de que el proceso de envío de información se inicie. La pulsación sobre este botón provoca que todos los valores introducidos por el usuario se envíen asociados el nombre del input en el que se han introducido.
Implementación:
type=“submit”
value=“texto_en_boton_envio”
/>
El curso de HTML y CSS llega a HTML5
En la próxima entrega del curso veremos todas las novedades que han sido introducidas en la nueva versión de HTML y podremos ver como se implementan la mayoría de ellas, siendo muchas de ellas muy interesantes y útiles a la hora de construir una página web.
