Curso de HTML y CSS: formularios y etiquetas input

Escrito por Adrián Crespo
HTML
1

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 <form></form>, 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:

<input type=”” name =”” value=”” otros />

  • 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:

<input
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:

<input 
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:

<input
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:

<input
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:

<input
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”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:

<textarea
rows=“num_líneas”
cols=“num_columnas”
atributos_comunes
>
contenido_inicial
</textarea>

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:

<select size=”3″ name=”D1″>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”mercedes”>Mercedes</option>
<option value=”audi”>Audi</option>
</select>

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:

<input
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.


Noticias relacionadas

Comentarios


1 comentario
  1. AdrianCrespo 16 Ene, 14 20:26

    Cuando te refieres a probar es poder utilizar los datos introducidos o bien una demostración de todos los elementos del formulario funcionando, es decir, mostrándose de forma gráfica?

    Responder
    0