Ingenieria en Sistemas Computacionales 1 "B"

Los formularios son el sistema del que nos provee el HTML para enviar información desde una página web a algún programa u otro recurso en un ordenador remoto. Esto quiere decir que un formulario no sirve de mucho si no tenemos un lugar al que enviarlo.

El funcionamiento de los formularios es muy simple: La persona que visita la página rellena una "matriz" (el formulario propiamente dicho) con los datos que se quieran enviar y, al picar en un botón, estos son enviados al lugar que corresponda (generalmente, un programa CGI alojado en nuestro servidor) en la forma NOMBRE-DEL-CONTROL=VALOR.

Aquí no hablaremos de los CGIs, si no que nos limitaremos a ver como se construyen los formularios web. Por ahora, te basta con saber que los CGI son programas que se ejecutan en la máquina donde está alojada tu página (o en otra máquina de Internet), y que envían una respuesta al navegador.

El primer tag que tenemos que tener en cuenta es el que crea un formulario. Este tag deberá englobar en su interior a todos los elementos que formen parte de este:

FORM.../FORM

FORM tiene tres atributos:

ACTION=URL que indica la dirección a la que será enviado el contenido del formulario.

METHOD=método. Donde método, que puede ser POST o GET, indica la forma en que se enviarán los datos a la url especificada en ACTION. (La opción por defecto es "GET")

ENCTYPE=tipo-mime que sirve para definir el tipo de datos que se enviarán. La opción por defecto (y la más usual) es el "application/x-www-form-urlencoded", que significa que la información se mandará codificada como una cadena URL (sustituyendo algunos caractéres "problemáticos" con códigos especiales). TYPE, que es el que determina el tipo concreto de control de que se trata:

INPUT TYPE="tipo de control"

Donde "tipo de control" puede ser uno de los siguientes:

"SUBMIT" crea el clásico botón "Enviar", y es el que, al ser pulsado, envía los datos del formulario a la dirección especificada en ACTION.

"RESET" inserta un botón "Borrar" que, al ser pulsado, elimina los datos de todos los controles del formulario que lo contiene.

"BUTTON" crea un botón.

"TEXT" crea un cuadro para insertar una línea de texto.

"PASSWORD" hace lo mismo que "TEXT", pero los caracteres que se escriban no se verán en pantalla, sino que serán sustituidos por asteriscos.

"CHECKBOX" crea una caja de verificación, que es uno de esos pequeños cuadraditos que pueden marcarse como activados o desactivados (Bueno, luego los verás).

"RADIO" crea un "Radio Button", algo parecido a lo anterior, pero con la sutil diferencia de que suelen ser redondos, estar agrupados, y que, dentro de un grupo solo puede aparecer uno marcado cada vez. (De acuerdo, también los verás luego).

"IMAGE" funciona exactamente igual que "SUBMIT", pero aquí puedes especificar una imagen para que aparezca en lugar del aburrido botón tradicional.

"HIDDEN" no muestra nada, absolutamente nada. Si lo pones dentro de tu formulario, este se verá exactamente igual. ¿Y para que sirve entonces? Pues para enviar al CGI, siempre que se use ese formulario, información que pueda ser necesaria, pero que no necesite cambiarse ni verse.

"FILE" sirve para crear un cuadro de diálogo mediante el que enviar un archivo desde tu disco duro. No está soportado en todos los navegadores.

CAPITULO 12

Hoy vamos a hacer una pequeña introducción a las hojas de estilo.

Las hojas de estilo son un sistema práctico y eficiente para controlar la apariencia de las páginas web. Con ellas es posible controlar todo aquello que se refiera a la representación en pantalla, o incluso en otros soportes, como medios impresos, lectores de voz...

Las hojas de estilo están escritas en un lenguaje propio, o sea, independiente al HTML. Por ello aquí nos vamos a ocupar solamente de cómo se insertan en un documento HTML, sin preocuparnos de cómo se escriben. Para aprender a usar la hojas de estilo hará falta un tutorial aparte.

En teoría, existen varios lenguajes en los que se pueden escribir las hojas de estilo, pero en la práctica solo uno está lo suficientemente extendido. Ese lenguaje es el Cascading Style Sheet (Hojas de Estilo en Cascada), más usualmente llamado CSS para ahorrar tiempo. Por lo tanto, en lo que queda de capítulo, vamos a suponer que este es el lenguaje del que hablamos, aunque sería lo mismo para cualquier otro que usemos (si algún día los navegadores soportan otro lenguaje de estilo).

Empecemos:

La primera forma de aplicar un estilo a un elemento de tu página Web es por medio del atributo STYLE, que se puede aplicar a casi cualquier etiqueta de HTML.

Por ejemplo, la siguiente línea:

P STYLE="background-color: #FFFF00;"Hola, amigos, esto solamente es un texto experimental./P

Haría que el fondo del párrafo se viera con el color amarillo que le hemos asignado, de este modo:

Hola, amigos, esto solamente es un texto experimental.

La cadena background-color: #FFFF00; que hay entre las comillas es una regla de estilo escrita en CSS.

Se pueden aplicar varias reglas a un mismo elemento. Por ejemplo, la regla de CSS para hacer que un texto aparezca en negrita es font-style: italic;, de modo que, si queremos que un párrafo aparezca en cursiva sobre un fondo de color verde, tenemos que escribir lo siguiente:

P STYLE="background-color: #00FF00;font-style: italic;">Hola, amigos, esto solamente es otro texto experimental, con la sola idea de demostrar las virtudes de las hojas de estilo en cascada CSS./P

Hola, amigos, esto solamente es otro texto experimental, con la sola idea de demostrar las virtudes de las hojas de estilo en cascada CSS.

Aunque hoy día no es necesario, para evitar posibles errores el día que se generalicen varios lenguajes de estilo dustintos, es recomendable poner, dentro de la sección HEAD /HEAD, la siguiente directiva:

META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"

Esto no es más que una etiqueta de Metainformación (no te asustes, ya veremos más adelante lo que significa eso) que indica el tipo de lenguaje de hojas de estilo que vamos a usar en el documento. Hoy por hoy no es necesaria, porque CSS el el único lenguaje reconocido, pero quizás algún día si sea necesaria.