Home

      Comment post English
x

Select your language

EnglishEspañol

Curso de HTML - Tercera parte

Quick Facts:

1 person likes this


<< VIENE DE CURSO DE HTML - SEGUNDA PARTE

Marco incorporado

Otra cosa que se puede hacer en HTML es incluir una página dentro de otra página. La etiqueta que permite hacer esto es <iframe> la cual mediante el uso de atributos nos permite elegir qué página queremos incluir, el tamaño que ésta tendrá dentro de la página donde la incluimos, si tendrá barra de desplazamiento o no, si tendrá borde.

Los atributos de <iframe> son: src para definir la dirección de la página que queremos incluir dentro de la página donde estamos trabajando; width (ancho) para definir el ancho de la página incorporada en pixeles o porcentaje; height (alto) para definir el alto de la página incorporada en pixeles o porcentaje; scrolling para indicar si se quiere que incluya barra de desplazamiento, los valores posibles son yes, no, y auto; y finalmente el atributo frameborder para definir si se quiere que el marco incorporado tenga borde o no, los valores posibles son 1 para agregar un borde y 0 para que no tenga borde. Una cosa a tener en cuenta es que el atributo frameborder en algunos exploradores Web no funciona.

Para los navegadores Web que no soportan marcos incorporados hay que agregar un texto entre la etiqueta <iframe> de apertura y la de cierre. En los casos de no ser soportados aparecerá el texto, sino se verá la página incluida.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de marco incorporado</title>
</head>

<body>
<iframe src="http://www.youbioit.com" width="50%" height="500" scrolling="no" frameborder="1"> Este texto aparece si el explorador Web utilizado no soporta marcos incorporados</iframe>
<br /><br />
<iframe src="http://www.youbioit.com" width="50%" height="500" scrolling="yes" frameborder="0"> Este texto aparece si el explorador Web utilizado no soporta marcos incorporados</iframe>

</body>
</html>

El código fuente anterior debe mostrar en un navegador Web lo siguiente:

Programacion Web
iframes en HTML - Cliquear para ver en grande

 
Formularios HTML

Un elemento muy importante en el diseño y desarrollo de páginas Web es el de ingreso de datos por parte de los usuarios para que éstos sean procesados por algún programa y se devuelvan resultados. Desde formularios de contacto, pasando por buscadores, formularios de inscripción, hasta campos de texto en foros de discusión y comunidades virtuales, el ingreso de datos es esencial para el funcionamiento de los sitios Web que los utilizan.

Sin la capacidad de ingreso de datos no existiría lo que hoy conocemos como Web 2.0; antes de la cual los sitios Web estaban armados únicamente por los administradores o webmasters de los mismos y los usuarios solamente podían ver el contenido sin poder participar. Con la modalidad de la Web 2.0, los usuarios son principalmente los que hacen crecer a los sitios Web mediante la información y datos que ingresan. Las comunidades virtuales (como Youbioit.com en donde soy un simple usuario y pude escribir este tutorial de HTML) donde son los usuarios los que agregan temas, páginas, videos, imágenes, comentarios, mensajes, etc. dependen del uso de formularios de ingreso de datos para que dichos datos puedan ser introducidos en los sitios Web, almacenados y luego puedan ser vistos por otros usuarios.

Por ejemplo cuando uno realiza una búsqueda en un buscador, debe ingresar los datos en un campo de texto y luego presionar un botón para que ésta se realice. Cuando uno deja un mensaje, artículo o comentario en una comunidad virtual como Youbioit, Twitter, etc. la información se ingresa en un área de texto y se envía tocando un botón. Cuando uno se inscribe en un sitio Web para convertirse en usuario del mismo, los datos deben ser ingresados mediante el uso de un formulario y enviados tocando un botón.

Por lo tanto la importancia que tienen los formularios es muy grande, ya que permiten a los usuarios comunicarse, agregar archivos, información y haciendo crecer a Internet, sin necesidad de ser programadores o desarrolladores Web.

El funcionamiento de los formularios cuenta con dos partes, la estética o estructural y la funcional. La parte estética o estructural es la del diseño del formulario, con sus campos de texto, menús de opciones, botones, etc.; mientras que la funcional es la del programa que procesa los datos introducidos en el formulario devolviendo una respuesta.

Este proceso funciona de la siguiente manera: cuando un usuario (técnicamente se lo denomina cliente) entra a una página con un formulario su computadora la descarga temporalmente (como a todas las páginas de Internet) en la memoria de la misma; el usuario completa el formulario, supongamos que se trata de un buscador con un campo de texto de búsqueda y un botón de Enviar. Una vez que el usuario presiona el botón, los datos son enviados a un programa que se encuentra en el servidor del sitio Web, donde los datos ingresados son procesados; en este caso el proceso realizado por el programa ubicado en el servidor es el de buscar los términos ingresados en el campo de texto a través de una base de datos que también se encuentra en el servidor; en caso de coincidir las palabras ingresadas o al menos ser similares a las encontradas en la base de datos, el programa automáticamente genera una página con las respuestas más cercanas a la búsqueda, la cual es enviada a la computadora del usuario que realizó la búsqueda.

Otro ejemplo sería el de un formulario de contacto; primero el usuario abre una página la cual se baja a la memoria de la computadora, en la página hay un formulario de contacto el cual cuenta con una serie de campos de texto donde el usuario escribe sus datos y el área de texto donde deja un mensaje, luego presiona el botón de enviar y los datos así como el mensaje del área de texto son enviados a un programa ubicado en el servidor del sitio Web, el cual procesa los datos generando automáticamente un mail que es enviado a una dirección especificada en el programa, en este caso sería la dirección de mail del Webmaster o administrador del sitio, quien recibe todos los datos ingresados por el usuario así como el mensaje en formato de correo electrónico. Simultáneamente el programa envía a la computadora del usuario una página de agradecimiento, con un texto que dice que el mensaje enviado será leído por el administrador.

La parte estructural o estética es la del formulario y sus elementos visuales, la cual tiene un funcionamiento de tipo client side (del lado del cliente), ya que se ejecuta o baja en la memoria de la computadora del usuario; mientras que la parte funcional del formulario, o sea el programa que procesa los datos ingresados y enviados por el usuario, tiene un funcionamiento de tipo server side (del lado del servidor) ya que se ejecuta en la memoria de la computadora del servidor. La parte estructural se diseña con lenguaje HTML mientras que la parte funcional debe programarse con un lenguaje lógico como PHP, ASP u otro. HTML no tiene comandos lógicos, por lo tanto solamente sirve para diseñar las partes estéticas y estructurales de las páginas Web. Sin embargo antes de aprender otros lenguajes de desarrollo Web hay que aprender HTML y CSS, los cuales son los principales lenguajes de diseño Web, y que serán cubiertos plenamente en este tutorial. A continuación veremos cómo se diseñan los formulario HTML.

ELEMENTOS DE FORMULARIOS HTML

La etiqueta que nos permite agregar un formulario a una página es <form>, por lo tanto todos los elementos que forman parte del mismo (campos de texto, menús, botones, etc.) deben estar entre la etiqueta <form> de apertura y la de cierre.

La etiqueta <input> nos permite agregar distintos tipos de elementos de ingreso de datos, como campos de texto, botones de opción, casillas de selección y botones simples. El tipo de elemento de ingreso de datos se elige mediante el uso del atributo de <input> type y los distintos valores posibles de este atributo son: text (para campo de texto), checkbox (para casilla de selección), radio (para botón de opción), submit (para botón de envío de datos), y reset (para botón de restablecer). La etiqueta <input> no utiliza etiqueta de cierre así que se cierra al final como sucede con <img>

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form>
Campo de texto<br />
<input type="text" />
<br /><br />
Casilla de selección<br />
<input type="checkbox" />
<br /><br />
Botón de opción<br />
<input type="radio" /><br /><br />
<br /><br />
<input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" />

</form
>

</body>
</html>

El código fuente anterior debe mostrar lo siguiente en el navegador Web

Formularios Web
Formularios Web - Cliquear para ver en grande

El ejemplo anterior es muy simple y simplemente agrega los distintos elementos que se pueden tener en un formulario.

A continuación vamos a analizar cada elemento con más detalles. También vamos a ver los otros atributos de <input>.

Un atributo muy importante de <input> que le da verdadera funcionalidad en un formulario, es name (nombre); el cual representa al nombre de la variable donde se almacenará el dato ingresado en el elemento. A pesar que este es un tema de programación algo más avanzada; es importante al menos tener idea de lo que es una variable.

Cuando trabajamos con una computadora todos los datos y órdenes, el funcionamiento en general, se almacenan temporalmente en la memoria de la máquina. Para graficarlo de una manera fácil de entender, la memoria está subdividida en celdas de memoria de un byte cada una y un número de dirección que la identifica; la totalidad de todas las celdas dan como resultado la cantidad de memoria que tiene una computadora. Los programas utilizan la memoria para almacenar temporalmente, mientras se ejecutan, los datos ingresados en celdas de memoria. Para identificarlas se requiere el uso de un nombre, este nombre es la variable. Las variables ocupan un cierto espacio de la memoria, acorde al tipo de datos que se almacenan. Por lo tanto, los datos se almacenan temporalmente en variables que son utilizadas por los programas para identificar la posición de memoria donde estas se encuentran.

Supongamos que en un campo de texto de un buscador ingresamos una frase para que el programa de la computadora del servidor del motor de búsqueda compare a la frase de los datos ingresados con los datos que tiene en la base de datos y si encuentra una coincidencia devuelva una página con la lista de respuestas o links de páginas relacionadas; para que todo esto ocurra la frase ingresada debe ser enviada a la computadora del servidor y almacenada en una variable que representa un espacio de la memoria de esa computadora, para que el programa de búsqueda la utilice.

Cuando definimos el nombre de la variable donde se almacenarán los datos ingresados tenemos que fijarnos que éste coincida con el nombre de variable requerido por el programa que se ejecuta en el servidor.

Un ejemplo sería <input type="text" name="nombre-de-variable" />, esta etiqueta define un campo de texto, cuyos valores ingresados serán almacenados en la variable "nombre-de-variable" del programa que se encuentra en la memoria de la computadora del servidor donde se realizará el procesamiento de los datos introducidos.

Otro atributo muy importante, esta vez de la etiqueta <form> es action (acción), el cual define que acción realizará el formulario una vez enviados los datos ingresados. Por lo general la acción más utilizada es la de especificar la dirección del programa ubicado en el servidor que procesará los datos ingresados. Si la etiqueta <form> no tiene un atributo action con un valor, el formulario no realizará ninguna acción; ya que debemos recordar que con HTML solamente se diseña la parte estructural del formulario y el programa de procesamiento lógico server-side (ubicado en el servidor) se desarrolla en otro lenguaje como PHP o ASP. Así que en action se pone la dirección del programa de procesamiento.

Un ejemplo sería <form action="www.ejemplo.com/buscador.php">, el cual al enviar los datos ingresados ejecuta el programa ubicado en "" para que éstos sean procesados.

Hasta ahora vimos que hay que especificar en <form>, mediante el uso del atributo action, la dirección donde se encuentra el programa de procesamiento de datos y mediante el uso de name en las etiquetas <input> del formulario, los nombres de las variables donde se almacenarán los datos. Pero falta especificar el atributo que define la forma o método de envío de los datos. El atributo que define la manera de enviar los datos se llama method (método). Hay dos maneras de enviar los datos desde la computadora cliente (la del usuario) a la computadora del servidor: uno es el método GET y el otro el método POST.

Para entender plenamente la diferencia entre GET y POST hay que saber más de programación Web, sin embargo por ahora para los fines requeridos basta con conocer algunos aspectos de estos dos métodos.

Con el método de envío GET los datos ingresados son añadidos a la dirección URL del programa de procesamiento.

Supongamos que tenemos un buscador cuyo programa de procesamiento se encuentra en la dirección www.ejemplo.com/buscador.php (dirección que debemos especificar en el atributo action así: <form action="www.ejemplo.com/buscador.php">); la variable que almacena los datos del campo de texto se llama "palabra-de-busqueda" (que debe ser definida así <input type="text" name="palabra-de-busqueda" />); y finalmente el método de envío de datos es GET, la etiqueta <form> quedaría así: <form action="www.ejemplo.com/buscador.php" method="GET">. Si por ejemplo queremos buscar la palabra "tutoriales", esta sería enviada a la variable "palabra-de-busqueda" del programa de procesamiento a través de la dirección URL de la siguiente manera: palabra-de-busqueda=tutoriales; por lo tanto eso sería lo que veríamos en la barra de direcciones del explorador Web.

Mediante GET la información enviada se encuentra a la vista ya que se ve en la barra de direcciones; también la cantidad de datos incluidos es limitada. Nunca hay que usar el método GET para enviar datos que no se quiere que sean vistos, por ejemplo los datos de un formulario de inscripción el cual incluye datos personales o un nombre de clave.

Para enviar muchos datos, de manera más segura es conveniente utilizar el método de envío POST; ya que no presenta límites en la cantidad de información que se puede enviar y estos viajan ocultos en un paquete de información el cual no queda añadido a la dirección del programa de procesamiento.

El método de envío GET puede llegar a ser más conveniente para casos en los que no hay que ocultar la información enviada, como un motor de búsqueda; mientras que el método POST es más conveniente para casos como formularios de contacto o formularios de inscripción.

Veamos un ejemplo (Atención: la dirección que aparece en el atributo action no es real, por lo tanto debe ser reemplazada por una real; también hay que tener en cuenta que si no se tiene un programa de procesamiento en un servidor, el formulario no realizará ninguna acción y solamente tendrá su parte estructural o estética).

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<p>Nombre<br /><input type="text" name="nombre" /></p>

<p>Teléfono<br /><input type="text" name="telefono" /></p>

<p>Email<br /><input type="text" name="email" /></p>

<p>Dirección<br /><input type="text" name="direccion" /></p>

<p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p>

</form
>

</body>
</html>

Esto muestra lo siguiente en un navegador Web:

Como crear un formulario Web
Formulario Web - Cliquear para ver en grande

Otro atributo de <input> es value, mediante el cual se agrega un valor a la variable indicada en el atributo name directamente desde el código fuente HTML de la página que estamos diseñando. Por ejemplo si se le agrega un atributo value a un campo de texto, el valor especificado en el mismo aparecerá por omisión en el campo de texto cada vez que se descargue la página con el formulario; obviamente que los usuarios podrán reemplazar este valor predeterminado con tan sólo tocar dentro del campo de texto y borrarlo suplantándolo con otro texto de su preferencia.

Entre los distintos tipos de elementos de ingreso de datos también están las casillas de selección, las cuales se utilizan para seleccionar una o varias opciones de un grupo. Por ejemplo se puede elegir en un grupo de géneros de películas cuales son los géneros favoritos, o entre un grupo de marcas de autos, las marcas favoritas. Para agregar una casilla de selección hay que poner en el atributo type el valor "checkbox".

Una cosa que hay que tener en cuenta es que al definir un grupo de casillas de selección deben especificarse los valores distintos en el atributo value de cada casilla, estos valores serán agregados en la variable de la casilla. Son necesarios ya que al seleccionar una casilla el usuario, el valor de esa casilla es enviado a la variable que utiliza el programa que procesa los datos en el servidor.

Otra cosa que hay que tener en cuenta es que el nombre de la variable de un grupo de casillas de selección debe ser el mismo para que los valores de las distintas casillas sean agregados a la misma variable; por ejemplo si se tienen cinco casillas en un grupo en el que hay que elegir marcas de autos favoritas, los valores de las casillas deben ser enviados a una variable de nombre "marcas" donde serán agregados para que el programa ubicado en el servidor los procese.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">

<p>
Nombre<br /><input type="text" name="nombre" /></p>

<p>Teléfono<br /><input type="text" name="telefono" /></p>

<p>Dirección<br /><input type="text" name="direccion" /></p>

<p>Email<br /><input type="text" name="email" value="escribe tu email" /></p>

<p><u>Géneros de película favoritos</u><br />
<input type="checkbox" name="peliculas" value="Accion" />Acción<br />
<input type="checkbox" name="peliculas" value="Ciencia Ficcion" />Ciencia Ficción<br />
<input type="checkbox" name="peliculas" value="Comedia" />Comedia<br />
<input type="checkbox" name="peliculas" value="Intriga" />Intriga<br />
<input type="checkbox" name="peliculas" value="Terror" />Terror<br /></p>

<p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p>

</form
>

</body>
</html>

El código fuente anterior muestra lo siguiente en un navegador Web:

Atributos en formularios Web
Cliquear para ver en grande

Otro elemento de formulario son los botones de opción; a diferencia de las casillas de selección en las que se pueden elegir una o más opciones en estos últimos solamente se puede seleccionar una opción del grupo, por eso mismo también se los conoce como botones de selección excluyente, ya que al tocar una opción se deselecciona la que ya estaba elegida antes. El valor que se debe especificar en el atributo type de la etiqueta <input> es "radio".

Cuando se arma un grupo de botones de opción excluyente, cada uno de los elementos del mismo debe tener el mismo valor en el atributo de variable name; para que de esta manera se consideren todos partes del mismo grupo y de esta manera al seleccionar una nueva opción se deseleccione cualquier otra del grupo con el mismo nombre de variable.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">

<p>
Nombre<br /><input type="text" name="nombre" /></p>

<p>Teléfono<br /><input type="text" name="telefono" /></p>

<p>Email<br /><input type="text" name="email" /></p>

<p>Dirección<br /><input type="text" name="direccion" /></p>

<p><u>Nivel de estudios alcanzado</u><br />
<input type="radio" name="estudios" value="Primario" />Primario<br />
<input type="radio" name="estudios" value="Secundario" />Secundario<br />
<input type="radio" name="estudios" value="Terciario" />Terciario<br />
<input type="radio" name="estudios" value="Universitario" />Universitario<br />
<input type="radio" name="estudios" value="Postgrado" />Postgrado<br /></p>

<p><u>Géneros de película favoritos</u><br />
<input type="checkbox" name="peliculas" value="Accion" />Acción<br />
<input type="checkbox" name="peliculas" value="Ciencia Ficcion" />Ciencia Ficción<br />
<input type="checkbox" name="peliculas" value="Comedia" />Comedia<br />
<input type="checkbox" name="peliculas" value="Intriga" />Intriga<br />
<input type="checkbox" name="peliculas" value="Terror" />Terror<br /></p>

<p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p>

</form
>

</body>
</html>

El código fuente anterior muestra lo siguiente en los navegadores Web:

Formularios Web
Cliquear para ver en grande


Como se ha visto en los ejemplos anteriores los botones de envío de datos se definen poniendo el valor "submit" (enviar o presentar) en el atributo type; y que el valor especificado en el atributo value es el rótulo que aparece en el botón.

Por otro lado, también vimos en los ejemplos anteriores que para definir un botón de restablecer (que al presionarse devuelve todos los campos de texto y casilleros a sus estados originales) hay que poner el valor "reset" (restablecer) en el atributo type; mientras que el valor especificado en el atributo value será el rótulo que aparecerá en el botón.

BOTON DE IMAGEN

Los botones de envío de datos que se definen con el valor "submit" tienen un diseño preestablecido por HTML, en caso de necesitar algún diseño más personalizado de botón existe la posibilidad de utilizar una imagen con funcionalidad de botón de envío de datos de formulario. Esto se logra agregando en el atributo type de <input>el valor "image" (imagen); y el atributo src (diminutivo de "source", que en inglés significa fuente), donde se debe especificar la dirección de la imagen que se utilizará como botón.

Otros dos atributos que se pueden utilizar al definir un botón de imagen son width (ancho) y height (alto), los cuales funcionan de la misma manera que en la etiqueta <img>, indicando el ancho y el alto en pixeles o porcentaje.

Al igual que en <img>, cuando definimos un botón de imagen podemos utilizar en <input> el atributo alt, en el que se puede especificar un texto alternativo el cual aparece en casos de que la imagen no pudiera ser cargada.

BOTONES CON DISTINTAS FUNCIONALIDADES

También se pueden definir botones que no tienen funcionalidad de envío de datos ingresados en un formulario y que se suelen utilizar para activar alguna acción programada en un lenguaje de programación Web como Javascript, el cual sirve para darle dinamismo a las páginas Web (efectos especiales, animaciones, etc).
Por ejemplo se puede definir un botón con el cual se puede cambiar el color de fondo de una página, o se puede realizar algún efecto especial, etc).

Este tipo de botón no tiene mucha utilidad en formularios. Para definir un botón así hay que utilizar el atributo de <input> button (botón). Como se mencionó antes por lo general se lo debe utilizar en combinación de otro lenguaje de programación Web como Javascript, el cual ahora no veremos en este tutorial pero sí en uno próximo más avanzado.

CAMPOS DE ENVIO DE ARCHIVOS

En muchos sitios Web existe la posibilidad de subir o enviar archivos; por ejemplo cuando se quiere adjuntar archivos en un mail, o cuando se sube una imagen o un video se utilizan campos de envío de archivos, los cuales incluyen un botón que al presionarse nos da la posibilidad de elegir un archivo de nuestro disco rígido.

Para definir un campo de envío de archivos se debe poner el valor "file" en el atributo type de la etiqueta <input>.

CAMPOS DE TEXTO CON CARACTERES OCULTOS

Un tipo de campo de texto que se suele utilizar por lo general en formularios de inscripción o cuando se deben ingresar datos personales o secretos como una clave son los campos de caracteres ocultos, en los cuales al ingresar un texto se muestran puntos o asteriscos que ocultan la información introducida.

Para definir un campo de texto con caracteres ocultos se debe poner el valor "password" (clave) en el atributo type de la etiqueta <input>.

ENVIO DE INFORMACION OCULTA

A veces para que el programa de procesamiento ubicado en el servidor funcione correctamente se necesita enviar ciertos datos ocultos, los cuales no son ingresados por el usuario sino que los envía la misma página Web automáticamente cada vez que se toca el botón de envío de datos.

Por ejemplo en un formulario de contacto los datos ingresados por los usuarios son enviados a un programa de procesamiento ubicado en el servidor, el cual arma un mail con toda la información ingresada en los elementos del formulario y lo envía a una dirección de correo electrónico que por lo general es la del Webmaster o administrador del sitio Web. Para que esto ocurra al diseñar la página de formulario debemos especificar la dirección a la que siempre serán enviados los mail que crea el programa de procesamiento ubicado en el servidor.

Para definir datos que serán enviados automáticamente de manera oculta cada vez que se presione el botón de envío de datos, se debe pone el valor "hidden" (oculto) en el atributo type de la etiqueta <input>; mientras que como en otros casos la variable y el valor a enviar se definen con los atributos name y value respectivamente.

Veamos un ejemplo (Atención: los valores introducidos en la dirección de la imagen del botón de envío, el valor de la dirección de email donde se envían los datos y la del programa de procesamiento deben ser reemplazados con valores reales. En el caso del programa de procesamiento, se requiere tener uno en un servidor para que los datos puedan ser procesados; sin embargo si no se tiene uno no importa para los fines de este tutorial, ya que estamos aprendiendo diseño de páginas Web con HTML, y para los fines visuales de un formulario no se requiere un programa de procesamiento en un servidor el cual solamente cumple funciones funcionales.)

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>

<input type="button" value="Puedes presionarme igual no hago nada" />

<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<input type="hidden" name="mail" value="mimail@ejemplo.com" />

<p>
Nombre<br /><input type="text" name="nombre" /></p>

<p>Teléfono<br /><input type="text" name="telefono" /></p>

<p>Email<br /><input type="text" name="email" /></p>

<p>Dirección<br /><input type="text" name="direccion" /></p>

<p>Nombre de usuario<br /><input type="text" name="usuario" /></p>

<p>Clave<br /><input type="password" name="clavesecreta" /></p>

<p>Subir imagen de usuario<br /><input type="file" name="foto-de-usuario" /></p>

<p><u>Nivel de estudios alcanzado</u><br />
<input type="radio" name="estudios" value="Primario" />Primario<br />
<input type="radio" name="estudios" value="Secundario" />Secundario<br />
<input type="radio" name="estudios" value="Terciario" />Terciario<br />
<input type="radio" name="estudios" value="Universitario" />Universitario<br />
<input type="radio" name="estudios" value="Postgrado" />Postgrado<br /></p>

<p><u>Géneros de película favoritos</u><br />
<input type="checkbox" name="peliculas" value="Accion" />Acción<br />
<input type="checkbox" name="peliculas" value="Ciencia Ficcion" />Ciencia Ficción<br />
<input type="checkbox" name="peliculas" value="Comedia" />Comedia<br />
<input type="checkbox" name="peliculas" value="Intriga" />Intriga<br />
<input type="checkbox" name="peliculas" value="Terror" />Terror<br /></p>

<p><input type="image" src="imagendeboton.jpg" alt="Enviar" width="170" height="40" /> </p>

</form
>

</body>
</html>

El código fuente anterior muestra lo siguiente en los navegadores Web:

Formularios Web
Cliquear para ver en grande


Hay otros cinco atributos de <input> que funcionan únicamente con ciertos tipos de elementos.

El atributo checked funciona únicamente con las casillas de selección y los botones de opción, tipos "checkbox" y "radio" respectivamente; el mismo sirve para que al cargarse la página Web con el formulario, ya haya un botón de opción tildado o seleccionado o una o varias casillas de selección tildadas. El valor que debe agregarse también es "checked".

El atributo disabled (deshabilitado) sirve para deshabilitar elementos del formulario; este atributo se puede utilizar en todos los elementos <input>
y el valor que hay que poner en el atributo disabled también es "disabled".

El atributo maxlenght (longitud máxima) se utiliza únicamente con los campos de texto (tipo "text") y sirve para indicar la máxima cantidad de caracteres que se pueden ingresar en el mismo. El valor que hay que poner en maxlength es un número que indica la cantidad máxima de caracteres que se pueden ingresar en el campo de texto.

Otro atributo que se utiliza con los campos de texto es size (tamaño), el cual sirve para indicar el ancho del campo de texto en cantidad de caracteres. El valor que hay que poner en el atributo size es un número que indica la cantidad de caracteres de ancho que tendrá el campo de texto; por ejemplo un valor de "40" indica 40 caracteres de ancho. El atributo size también sirve para definir el ancho de los campos de envío de archivos con valor "file" en el atributo type.

No hay que confundir maxlength con size, el primero indica la cantidad máxima de caracteres que se pueden escribir dentro del campo de texto, mientras que el segundo indica el ancho en caracteres que tendrá el campo en sí.

Otro atributo que también funciona con los campos de texto, es readonly (sólo lectura), el cual se utiliza para indicar que un campo de texto es de sólo lectura; esto significa que si por ejemplo ya contiene un texto predeterminado al cargar la página (el cual se define en el atributo value como ya hemos visto) y además tiene un atributo readonly con valor "readonly"; no se podrá escribir nada en el mismo, solamente se podrá leer el texto predeterminado de value.

Veamos un ejemplo con los atributos anteriores:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>

<input type="button" value="No puedes presionarme estoy deshabilitado" disabled="disabled" />

<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<input type="hidden" name="mail" value="mimail@ejemplo.com" />

<p>
Nombre<br /><input type="text" name="nombre" size="40" /></p>

<p>Email<br /><input type="text" name="email" size="40" /></p>

<p>Nombre de usuario<br /><input type="text" name="usuario" value="Nombre de usuario" readonly="readonly" size="40" /></p>

<p>Clave<br /><input type="password" name="clavesecreta" size="40" maxlength="5" /></p>

<p>Subir imagen de usuario<br /><input type="file" name="foto-de-usuario" size="40" /></p>

<p><u>Nivel de estudios alcanzado</u><br />
<input type="radio" name="estudios" value="Primario" />Primario<br />
<input type="radio" name="estudios" value="Secundario" checked="checked" />Secundario<br />
<input type="radio" name="estudios" value="Terciario" />Terciario<br />
<input type="radio" name="estudios" value="Universitario" />Universitario<br />
<input type="radio" name="estudios" value="Postgrado" />Postgrado<br /></p>

<p><u>Géneros de película favoritos</u><br />
<input type="checkbox" name="peliculas" value="Accion" />Acción<br />
<input type="checkbox" name="peliculas" value="Ciencia Ficcion" />Ciencia Ficción<br />
<input type="checkbox" name="peliculas" value="Comedia" />Comedia<br />
<input type="checkbox" name="peliculas" value="Intriga" checked="checked" />Intriga<br />
<input type="checkbox" name="peliculas" value="Terror" checked="checked" />Terror<br /></p>

<p><input type="image" src="imagendeboton.jpg" alt="Enviar" width="170" height="40" /> </p>

</form
>

</body>
</html>

El código fuente anterior muestra lo siguiente en los navegadores Web:

Formularios Web
Cliquear para ver en grande

LISTAS Y MENUS

Hasta ahora hemos visto los elementos de formulario que se definen con la etiqueta <input>, sin embargo también existen otros elementos de formulario que se definen con otras etiquetas; éstos son los menús y listas de opciones, así como las áreas de texto que permiten ingresar comentarios más largos de varios renglones o párrafos.

Para agregar un menú o lista de opciones se debe utilizar la etiqueta <select> para definir el menú o la lista y la etiqueta <option> para definir cada una de las opciones, que deben colocarse entre las etiquetas <select> de apertura y cierre.

Además, para definir el valor de cada opción que será enviado al programa de procesamiento ubicado en el servidor del sitio Web, hay que utilizar el atributo valueen cada etiqueta <option> de la lista o menú. El texto que se debe escribir entre la etiqueta <option> de apertura y cierre tiene funciones visuales para que los usuarios puedan leer cada opción del menú o lista que se diseña, sin embargo el verdadero valor enviado al servidor es el definido en el atributo value.

El nombre de la variable que se utiliza en el programa de procesamiento ubicado en el servidor y donde se almacenarán los valores especificados en cada atributo value de las etiquetas <option> debe definirse en el atributo name de la etiqueta <select>. En aquella variable serán añadidos el o los valores seleccionados por los usuarios.

Veamos un ejemplo simple:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<p>Seleccione una marca de autos</p>
<select name="marcas">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
</select>

<p><input type="submit" value="Enviar" /> </p>

</form
>

</body>
</html>

El código fuente anterior muestra lo siguiente en navegadores Web:

Menus en formularios Web
Cliquear para ver en grande

En el ejemplo anterior agregamos un menú desplegable; para definir una lista de opciones hay que agregar el atributo size (tamaño) en la etiqueta <select> donde se debe especificar la cantidad de renglones que serán visualizados entre la cantidad total de opciones que la lista contiene; por ejemplo si la lista contiene 20 opciones y se especifica un tamaño de 5 renglones, para ver todas las opciones la lista tendrá una barra de desplazamiento vertical ubicada a la derecha.

Para definir una lista de opciones en la que se pueden seleccionar más de una opción se debe utilizar el atributo multiple en la etiqueta <select> y especificar en el mismo el valor "multiple".

Veamos un ejemplo que contiene un menú y una lista de opciones:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<p>Seleccione una marca de autos</p>
<select name="marcas-menu">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
</select>

<br /><br />

<select size="4" name="marcas-lista">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
</select>

<br /><br />

<select name="marcas-lista-multiple" multiple="multiple" size="5">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
</select>

<p><input type="submit" value="Enviar" /> </p>

</form
>

</body>
</html>

El código fuente anterior muestra lo siguiente en los navegadores Web:

Menus en formularios Web
Cliquear para ver en grande

Se puede tener una opción preseleccionada de menú al cargar la página Web con el formulario o variar opciones preseleccionadas en el caso de listas que permiten elegir selecciones múltiples. Esto se logra mediante el uso del atributo selected (seleccionado) en la etiqueta <option> y en el cual debe especificarse el valor "selected".

Otra posibilidad es la de tener opciones de menú o lista deshabilitadas al cargar la página Web; también se pueden tener menús o listas deshabilitadas por completo; esto se logra mediante el atributo disabled (deshabilitado), en el cual se debe especificar el valor "disabled". El mismo puede ser utilizado tanto en la etiqueta <select> como en <option>.

Veamos un ejemplo que utilizan estos atributos:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<p>Seleccione una marca de autos</p>
<select name="marcas-menu">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Buick" disabled="disabled">Buick</option>
<option value="Cadillac" selected="selected">Cadillac</option>
</select>

<br /><br />

<select size="4" name="marcas-lista">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Buick"disabled="disabled">Buick</option>
<option value="Cadillac" selected="selected">Cadillac</option>
</select>

<br /><br />

<select name="marcas-lista-multiple" size="5" disabled="disabled">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
</select>

<p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p>

</form
>

</body>
</html>

Esto se vería de la siguiente manera en los navegadores Web:

Menus en formularios Web
Cliquear para ver en grande

Dentro de las listas o menús se pueden agregar títulos para separar las opciones en grupos, la etiqueta que permite hacer eso es <optgroup>; cada grupo de opciones debe estar encerrado entre la etiqueta <optgroup> de apertura y de cierre. El título que representa cada grupo de la lista o menú se define dentro del atributo label de esta etiqueta.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<p>Seleccione una marca de autos</p>
<select name="marcas-menu">
<optgroup label="Marcas de General Motors">
<option value="Buick">Buick</option>
<option value="Chevrolet">Chevrolet</option>
</optgroup>
<optgroup label="Otra marca">
<option value="Ford">Ford</option>
</optgroup>
</select>
<br /><br />
<select name="marcas-lista" multiple="multiple" size="5">
<optgroup label="Marcas de General Motors">
<option value="Buick">Buick</option>
<option value="Chevrolet">Chevrolet</option>
</optgroup>
<optgroup label="Otra marca">
<option value="Ford">Ford</option>
</optgroup>
</select>

<p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p>

</form
>

</body>
</html>

El código fuente anterior muestra lo siguiente en los navegadores Web:

Menus en navegadores Web
Cliquear para ver en grande

Hay una etiqueta que no agrega ningún cambio visual, pero que facilita el uso de formularios con el mouse al seleccionar un elemento de formulario. Se trata de la etiqueta <label> la cual le confiere funcionalidad de selección a un texto o rótulo. Esto significa que si por ejemplo tenemos un texto junto a un campo de texto o a una casilla de selección o botón de opción, si aquel texto se encuentra entre etiquetas <label> de apertura y cierre y se lo relaciona con un elemento de formulario; al tocarse con el botón del mouse el texto, el elemento de formulario relacionado con el mismo se activará; en el caso de un campo de texto el cursor del mismo se activa, en el caso de una casilla ésta se selecciona.

Para que un texto se relacione con un elemento de formulario, el elemento debe tener un nombre de identificación el cual se define mediante el atributo id y la etiqueta <label> debe tener un atributo for (para) en el cual se debe colocar el mismo nombre especificado en el atributo id del elemento de formulario, así al tocar el texto se activará dicho elemento.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">

<p>
<label for="nombre">Nombre</label><br /><input type="text" name="nombre" id="nombre" /></p>

<p><label for="tel">Teléfono</label><br /><input type="text" name="telefono" id="tel" /></p>

<p><label for="mail">Email</label><br /><input type="text" name="email" id="mail" /></p>

<p><label for="direc">Dirección</label><br /><input type="text" name="direccion" id="direc" /></p>

<p><u>Nivel de estudios alcanzado</u><br />
<input type="radio" name="estudios" value="Primario" id="prima" /><label for="prima">Primario</label><br />
<input type="radio" name="estudios" value="Secundario" id="secun" /><label for="secun">Secundario</label><br />
<input type="radio" name="estudios" value="Terciario" id="terci" /><label for="terci">Terciario</label><br />
<input type="radio" name="estudios" value="Universitario" id="univ" /><label for="univ">Universitario</label><br />
<input type="radio" name="estudios" value="Postgrado" id="post" /><label for="post">Postgrado</label><br /></p>

<p><u>Géneros de película favoritos</u><br />
<input type="checkbox" name="peliculas" value="Accion" id="acci" /><label for="acci">Acción</label><br />
<input type="checkbox" name="peliculas" value="Ciencia Ficcion" id="cienc" /><label for="cienc">Ciencia Ficción</label><br />
<input type="checkbox" name="peliculas" value="Comedia" id="come" /><label for="come">Comedia</label><br />
<input type="checkbox" name="peliculas" value="Intriga" id="intri" /><label for="intri">Intriga</label><br />
<input type="checkbox" name="peliculas" value="Terror" id="terr" /><label for="terr">Terror</label><br /></p>

<p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p>

</form
>

</body>
</html>

Esto muestra lo siguiente en navegadores Web:

Label en formularios html
Cliquear para ver en grande

Hay otro elemento muy utilizado en formularios, el área de texto, <textarea>; el cual sirve para realizar comentarios largos, temas de foros de discusión, escribir texto para formularios de contacto, etc. A diferencia de los campos de texto, las áreas de texto permiten ingresar más de un renglón formando párrafos. También se pueden especificar las dimensiones de un área de texto tanto en cantidad de renglones como en cantidad de caracteres visibles de ancho.

A diferencia de la etiqueta <input>, la etiqueta <textarea> utiliza etiquetas de apertura y de cierre. Para definir las dimensiones de un área de texto se utiliza el atributo cols (columnas) para el ancho en cantidad de caracteres y el atributo rows (filas o renglones) para el alto en cantidad de renglones.

Al igual que en otros elementos de formulario el atributo name sirve para definir el nombre de variable que utilizará el programa de procesamiento en el servidor y en el que se almacenará el texto introducido en el área de texto.

También como se vio anteriormente con otros elementos, se pueden diseñar áreas de texto deshabilitadas, con el atributo disabled (deshabilitado), donde se pone el valor "disabled" como sucede con <input>, <select> y <option>.

A veces se requiere la utilización de áreas de texto de sólo lectura en las cuales se puede leer el texto ya escrito que aparece al cargar la página pero no se puede ingresar ninguno nuevo. Por ejemplo se los utiliza en formularios de inscripción de sitios Web que incluyen una especie de contrato con normas o términos de uso y políticas de privacidad. Para definir un área de texto de sólo lectura se debe utilizar el atributo readonly (sólo lectura) con el valor "readonly".

Veamos un ejemplo con áreas de texto:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<p>Comentario</p>
<textarea cols="40" rows="10" name="comentario"></textarea>
<br /><br />

<p>Comentario 1</p>
<textarea cols="40" rows="10" name="comentario-1">Escribe un comentario</textarea>
<br /><br />

<p>Area de texto deshabilitada</p>
<textarea cols="40" rows="10" name="comentario-2" disabled="disabled"></textarea>
<br /><br />

<p>Area de texto de solamente lectura</p>
<textarea cols="40" rows="10" name="comentario-3" readonly="readonly">Esta es un area de texto de solamente lectura</textarea>
<br /><br />

<p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p>

</form
>

</body>
</html>

Lo anterior muestra lo siguiente en los navegadores Web:

Textarea en HTML
Cliquear para ver en grande

Como se ve, se puede agregar texto previamente ingresado en el código fuente, el cual será cargado en el área de texto al abrir la página; el mismo debe ser escrito entre las etiquetas <textarea> de apertura y de cierre.
 

RECUADRO DE FORMULARIO
 
Ya sabemos casi todo acerca del diseño de formularios en HTML; solamente nos falta conocer una etiqueta de carácter más bien estético; su función es simplemente la de agregar un recuadro alrededor de un formulario. Se trata de la etiqueta <fieldset>, cuya etiqueta de apertura debe estar ubicada luego de la etiqueta <form> y antes de todos los elementos que forman parte del formulario, mientras que la etiqueta de cierre </fieldset> debe estar colocada inmediatamente antes de la etiqueta de cierre </form>.

Además, opcionalmente, se le puede agregar un título al recuadro de formulario; para eso junto a la etiqueta <fieldset> se debe utilizar la etiqueta <legend> la cual debe ir ubicada inmediatamente después de la etiqueta<fieldset> de apertura.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<fieldset>
<legend>
Formulario de contacto</legend>
<p>
<label for="nombre">Nombre</label><br /><input type="text" name="nombre" id="nombre" /></p>

<p><label for="tel">Teléfono</label><br /><input type="text" name="telefono" id="tel" /></p>

<p><label for="mail">Email</label><br /><input type="text" name="email" id="mail" /></p>

<p><label for="direc">Dirección</label><br /><input type="text" name="direccion" id="direc" /></p>

<p><u>Nivel de estudios alcanzado</u><br />
<input type="radio" name="estudios" value="Primario" id="prima" /><label for="prima">Primario</label><br />
<input type="radio" name="estudios" value="Secundario" id="secun" /><label for="secun">Secundario</label><br />
<input type="radio" name="estudios" value="Terciario" id="terci" /><label for="terci">Terciario</label><br />
<input type="radio" name="estudios" value="Universitario" id="univ" /><label for="univ">Universitario</label><br />
<input type="radio" name="estudios" value="Postgrado" id="post" /><label for="post">Postgrado</label><br /></p>

<p><u>Géneros de película favoritos</u><br />
<input type="checkbox" name="peliculas" value="Accion" id="acci" /><label for="acci">Acción</label><br />
<input type="checkbox" name="peliculas" value="Ciencia Ficcion" id="cienc" /><label for="cienc">Ciencia Ficción</label><br />
<input type="checkbox" name="peliculas" value="Comedia" id="come" /><label for="come">Comedia</label><br />
<input type="checkbox" name="peliculas" value="Intriga" id="intri" /><label for="intri">Intriga</label><br />
<input type="checkbox" name="peliculas" value="Terror" id="terr" /><label for="terr">Terror</label><br /></p>

<p>Comentario</p>
<textarea cols="40" rows="10" name="comentario"></textarea>
<br /><br />

<p><input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" /></p>
</fieldset>
</form>

</body>
</html>

El código fuente anterior mostraría lo siguiente en los navegadores Web:

Recuadro en formulario Web
Cliquear para ver en grande

 

CONTINÚA EN EL CURSO DE HTML - CUARTA PARTE >>


1 person likes this

Share
Related Articles

Photo Gallery
Photoalbum: 

Curso de HTML


Suggested posts
Follow Youbioit






Comments

Post new comment

The content of this field is kept private and will not be shown publicly.