FORMULARIOS
Un formulario es una plantilla creada para que el usuario se comunique con nuestro servidor Web de una forma fácil. Igualmente, nos puede enviar información de una forma ordenada, dependiendo de las etiquetas que suministremos en el formulario
El conjunto de datos es una secuencia de campos con pares nombre/valor. Por ejemplo, al configurar el formulario para uso con un programa CGI es necesario que el servidor tenga este programa para poder ejecutarlo.
Declaración del Formulario
La declaración del formulario se pone entre las marcas:
<FORM>…..</FORM>
En la definición del formulario se pueden incluir los siguientes atributos:
• ACTION. Especifica el URI de la acción asociada al formulario. Si no se especifica, por defecto
se asume que el URI es el BASE del documento.
• METHOD. Indica el método de acceso al URI de la acción.El conjunto de métodos aplicables es función del esquema del URI. Se pueden emplear los métodos GET y POST, que se describirán más adelante.
• ENCTYPE. Especifica el tipo de codificación para el transporte de los pares nombre/valor, excepto en los casos en los que el protocolo no imponga uno.
Campos de entrada (INPUT)
El elemento <INPUT> representa un campo de entrada de datos. Los atributos posibles vienen dados por el valor del atributo TYPE, que determina el tipo de entrada.
Los tipos de entrada son:
• Texto: INPUT TYPE=TEXT
Como atributos opcionales puede tomar:
MAXLENGTH. Limita el máximo número de caracteresque pueden ser introducidos en el campo.
SIZE. Especifica la cantidad de espacio reservado para este campo. El valor por defecto
depende del navegador.
VALUE. Indica el valor inicial del campo.
Password: INPUT TYPE = PASSWORD. Es un campo de texto como el anterior, pero el valor no se ve al escribirlo.
Casilla de verificación: INPUT TYPE=CHECKBOX. Representa una opción boo-leana (sí o no). Los elementos de este tipo, requieren los atributos NAME y VALUE, que indican el nombre del elemento o grupo de elementos y la parte del valor del campo aportada por el elemento, respectivamente. Opcionalmente, podemos incluir el atributo CHECKED, que indica que el estado inicial es seleccionado.
Botón de opción: INPUT TYPE=RADIO.Representa una opción boo-leana (sí o no). Un conjunto de varios elementos de este tipo con el mismo nombre representan un campo de selección múltiple Los elementos de este tipo requieren, al igual que en el caso anterior, los atributos NAME y VALUE.
Opcionalmente, podemos incluir el atributo CHECKED, que indica que el estado inicial es se leccionado
Botón de envío: INPUT TYPE=SUBMIT.Representa una opción, normalmente mediante un botón, que le indica al cliente que debe enviar el formulario.
Como atributos opcionales acepta:
NAME. Indica que este elemento constituye un campo cuyo valor es el del atributo VALUE.
VALUE. Indica la etiqueta para el botón.
Pixel de una imagen: INPUT TYPE=IMAGE .Especifica una imagen para que la muestre el navegador y permite la entrada de dos campos, las coordenadas"x"e"y"
Los atributos NAME y SRC son necesarios, y el campo ALIGN es opcional (al igual que en el elemento <IMG>). El atributo SRC indica la imagen usada de fondo, y el atributo ALIGN indica la posición de la imagen.
Ejemplo:
<INPUT TYPE = IMAGE NAME = punto SRC ="enviar.gif">
Botón de reinicio: INPUT TYPE=RESET. Representa una opción de entrada, generalmente mediante un botón, que le indica al cliente que debe reiniciar los valores de sus campos a los que tenían inicial-mente. El atributo VALUE, si existe, indica la etiqueta del botón.
Ejemplo :
<INPUT TYPE = RESET VALUE = "Volver a comenzar">
El elemento <INPUT> representa un campo de entrada de datos. Los atributos posibles vienen dados por el valor del atributo TYPE, que determina el tipo de entrada.
Los tipos de entrada son:
• Texto: INPUT TYPE=TEXT
Como atributos opcionales puede tomar:
MAXLENGTH. Limita el máximo número de caracteresque pueden ser introducidos en el campo.
SIZE. Especifica la cantidad de espacio reservado para este campo. El valor por defecto
depende del navegador.
VALUE. Indica el valor inicial del campo.
Password: INPUT TYPE = PASSWORD. Es un campo de texto como el anterior, pero el valor no se ve al escribirlo.
Casilla de verificación: INPUT TYPE=CHECKBOX. Representa una opción boo-leana (sí o no). Los elementos de este tipo, requieren los atributos NAME y VALUE, que indican el nombre del elemento o grupo de elementos y la parte del valor del campo aportada por el elemento, respectivamente. Opcionalmente, podemos incluir el atributo CHECKED, que indica que el estado inicial es seleccionado.
Botón de opción: INPUT TYPE=RADIO.Representa una opción boo-leana (sí o no). Un conjunto de varios elementos de este tipo con el mismo nombre representan un campo de selección múltiple Los elementos de este tipo requieren, al igual que en el caso anterior, los atributos NAME y VALUE.
Opcionalmente, podemos incluir el atributo CHECKED, que indica que el estado inicial es se leccionado
Botón de envío: INPUT TYPE=SUBMIT.Representa una opción, normalmente mediante un botón, que le indica al cliente que debe enviar el formulario.
Como atributos opcionales acepta:
NAME. Indica que este elemento constituye un campo cuyo valor es el del atributo VALUE.
VALUE. Indica la etiqueta para el botón.
Pixel de una imagen: INPUT TYPE=IMAGE .Especifica una imagen para que la muestre el navegador y permite la entrada de dos campos, las coordenadas"x"e"y"
Los atributos NAME y SRC son necesarios, y el campo ALIGN es opcional (al igual que en el elemento <IMG>). El atributo SRC indica la imagen usada de fondo, y el atributo ALIGN indica la posición de la imagen.
Ejemplo:
<INPUT TYPE = IMAGE NAME = punto SRC ="enviar.gif">
Botón de reinicio: INPUT TYPE=RESET. Representa una opción de entrada, generalmente mediante un botón, que le indica al cliente que debe reiniciar los valores de sus campos a los que tenían inicial-mente. El atributo VALUE, si existe, indica la etiqueta del botón.
Ejemplo :
<INPUT TYPE = RESET VALUE = "Volver a comenzar">
Campos de Selección (SELECT)
El elemento <SELECT> se emplea parra reducir el campo a una lista de valores.
Los atributos del elemento son:
MÚLTIPLE. Indica que el valor puede incluir más de una opción.
NAME. Especifica el nombre del campo.
SIZE. Determina el número de ítems visibles.
Si se indica tamaño uno, se suelen presentar como listas desplegables, mientras que si el tamaño es mayor se suelen presentar como listas con barra de desplazamiento.El elemento <OPTION> sólo puede aparecer dentro de un elemento <SELECT>, y representa una posible elección. Puede tomar los siguientes atributos:
SELECTED. Indica que esta opción está seleccionada inicialmente.
VALUE. Indica el valor a retornar si se selecciona la opción.
Área de Texto (TEXTAREA)
El elemento <TEXTAREA> representa un campo de texto de múltiples líneas. Los atributos posibles son:
COLS. El número de columnas visibles del área de texto, en caracteres.
NAME. Nombre del campo.
ROWS. El número de líneas visibles del área de texto
Envío de formularios
Al presentarse el formulario al usuario por primera vez, el contenido de los campos es el de sus valores por defecto, ya sea en blanco o con texto. Al terminar de rellenarlo, el usuario envía el formulario, y el navegador analiza las entradas en función del método, acción y tipo de codificación.
Tipo de Codificación de formularios
Al enviar un formulario, éste se codifica. El tipo de codificación por defecto es, según el esquema MIME
los datos obtenidos del formulario se representan del siguiente modo:
1. Los nombres de campos y los valores son preprocesados:los espacios son reemplazados por el símbolo "+", y los caracteres son sustituidos como en los URL. Es decir, los caracteres no alfanuméricos se representan con un signo de porcentaje y dos dígitos hexadecimales que indican el código ASCII del carácter (%HH). Los saltos de línea (empleados en campos de múltiples líneas), se representan con pares CRLF (sustituidos por %OD%OA).
2. Los campos se listan en el orden en el que aparecen en el documento, con los nombres separados del valor por el símbolo "=" y los pares separados entre sí por el símbolo "&". Los campos con valores nulos pueden ser omitidos, en particular, los campos no seleccionados en entradas booleanas no deben aparecer en los datos, pero los campos ocultos que tengan el atributo VALUE, sí.
Método Get: METHOD=GET
El método de envío GET es un método de consulta. El servidor recibe los datos en una variable de entorno llamada QUERY-STRING. Un ejemplo de formularios que utilizan el método GET son las consultas a bases de datos, que no tienen efectos visibles en otros programas.
Al procesarse un formulario cuyo URL de acción es un URL de tipo HTTP, el navegador genera un URI que comienza con el de la acción, al que se le añade un interrogante (?) y el conjunto de datos codificado con el formato application/x-www-form-ur-lencoded. Para acceder a la consulta, el navegador accede al URI de la misma manera que lo hace con cualquier dirección.
Método Post; METHOD=POST
El método de envío POST, se utiliza cuando los datos del formulario realiza una modificación, por ejemplo, en la base de datos.
Al procesarse un formulario cuyo URL de acción es de tipo HTTP, el navegador realiza una transacción de tipo POST del protocolo HTTP, usando el URI de la acción y el cuerpo de un mensaje de tipo application/x-www-form-urlencoded. El navegador presentará la respuesta del HTTP POST del mismo modo que la respuesta obtenida con el método GET.
Presentamos ahora un ejemplo completo de una página web con un formulario. Si utilizamos el método POST en un archivo ".txt", el resultado de los datos se presenta de la siguiente manera.
MARCOS
Los marcos, o frames, nos brindan la posibilidad de dividir nuestras páginas Web en varias regiones, lo que nos permitirá presentar el contenido más estructurado.
Con los marcos podemos conseguir los siguientes efectos:
Los elementos como barras de control, copyrights o títulos gráficos, que nos interesa que aparezcan fijos, pueden ser situados en marcos individuales está ticos.
Podemos crear marcos con índices de contenido
Del mismo modo, el diseño de una página con marcos paralelos
Comandos para crear marcos
Los comandos utilizados en la creación de marcos son los siguientes:
• FRAMESET define un conjunto de marcos.
<FRAMESET> </ FRAMESET >
FRAME describe las características concretas de un marco.
<FRAME>
NOFRAMES, que utilizaremos para los navegadores que no soportan los comandos que hacen referencia a los marcos.
<NOFRAMES> </ NOFRAMES >
El comando FRAMESET.
El elemento <FRAMESET> nos permite definir el contenedor principal para otros marcos. . Este elemento incluye los atributos ROWS y COLS (filas y columnas).
Debemos tener en cuenta que una página con marcos no tendrá cuerpo, por tanto, ni la marca <BODY> ni ninguna de las marcas asociadas a ésta, pueden aparecer antes de la marca <FRAMESET>. En caso contrario, <FRAMESET> será ignorado.
Lógicamente, el número de filas será igual al número de elementos que componen la lista.
Distintos tipos de valores que pueden tomar los atributos:
Valor. Un valor numérico simple es un tamaño fijo en pixeles. Éste es el tipo de valor más crítico, ya que el tamaño de la ventana del cliente variará dependiendo de la resolución de la
pantalla. Al utilizar valores fijos,es conveniente combinarlos con valores relativos, puesto que, en
caso contrario, el navegador del usuario asignará los valores que crea conveniente hasta alcanzar
el tamaño de la ventana.
Valor%. Con este valor indicaremos un porcentaje del tamaño de la ventana.
Valor*. El valor de este campo es relativo. Introduciendo un asterisco indicaremos que el marco ocupe el espacio que quede libre. Si creamos dos marcos especificando "2*,*", el resultado sería que el primer marco ocupará 2/3 del espacio y el segundo, el resto.
El comando FRAME.
El comando o marca <FRA-ME> crea un marco dentro de un conjunto de marcos. Esta marca no contiene nada, por lo que no es necesario incluir la marca de cierre.
Los atributos que pueden acompañarla son los siguientes:
SRC="url". El atributo SRC indica el URL de la página Web que se debe mostrar en el marco.
NAME="nom_marco". Este atributo nos permite asignarle un nombre al marco actual, que podrá ser utilizado como referencia en otros documentos.
MARGINWIDTH="valor".Mediante este atributo podremos especificar el tamaño de los márgenes izquierdo y derecho de un marco. Este valor vendrá expresado en pixeles.
MARGINHEIGHT="valor". Mediante este atributo podremos especificar el tamaño de los márgenes superior e inferior de un marco. Este valor vendrá expresado en pixeles.
SCROLLING = "yes /no/auto". Utilizaremos este atributo para indicar si el marco tendrá barras de desplazamiento o no.Si queremos que el marco tenga barras de desplazamiento, indicaremos "yes". En caso contrario, indicaremos "no".
NORESIZE. Atributo de tipo booleano, que indica si el marco podrá ser redimensionado o tendrá un tamaño fijo.
FRAMEBORDER=1/0. Este atributo indica si los marcos estarán separados por una línea (1) o no (0). El valor por defecto es 1.
El comando NOFRAMES
No todos los navegadores soportan marcos y, por tanto, no mostrarán su contenido. También es posible que el navegador utilizado por el usuario tenga desactivada su visualización. La finalidad del elemento NOFRAMES es incluir una alternativa para estos navegadores.
Un navegador que sí soporte marcos ignoraría todas las marcas y datos entre <NOFRAMES> y </NOFRAMES>.