Para el uso de este material debes contar con un conocimiento basico de HTML, el material mostrado es una recopilación de muchos materiales de la red, tales como de
Comando <FORM ACTION>: permite englobar o separar un conjunto de formularios,.
Comando <INPUT TYPE= “”>: permite crear formularios, se debe indicar que tipo de formulario que se va a crear en la zona de TYPE, como
El botón no hace nada porque no hemos definido qué debe hacer, así que sed buenos y no lo pulséis.
Todos los elementos de un formulario deben estar encerrados entre <FORM> y</FORM>. Como parámetros cabe destacar tres. ACTION define el URL que deberá gestionar el formulario. Puede ser una dirección de correo (precedida del inevitablemailto:, en cuyo caso deberemos añadir el parámetro ENCTYPE="text/plain" para que lo que recibamos resulte legible.
Por otro lado, tenemos el parámetro METHOD define la manera en que se mandará el formulario. Es recomendable utilizar POST. En el caso de que estemos mandando el formulario a nuestra dirección de correo electrónico es obligado usarlo.
Ahora vamos a ver uno a uno todos los elementos que podemos incluir en un formulario. Veremos que todos ellos tienen algo en común. Como el resultado de cualquier formulario es una lista de variables y valores asignados a las mismas, todos ellos tendrán un atributo en común: el nombre de su variable. El parámetro también será común a todos: NAME.
Cajas de texto
Existen tres maneras de conseguir que el usuario introduzca texto en nuestro formulario. Las dos primeras se obtienen por medio de la etiqueta <INPUT>:
El primero nos dibujará una caja donde escribir un texto (de una sola línea). El segundo es equivalente, pero no veremos lo que tecleemos en él. Estos son los atributos para modificarlos:
Por otro lado, puede que necesitemos que el usuario pueda introducir más de una línea. En ese caso se utilizará la siguiente etiqueta:
Lo que incluyamos entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Admite estos parámetros:
Opciones
Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo de dos modos. El primero es el que vimos en el ejemplo inicial:
Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo NAME. Aparte de esto acepta los siguientes parámetros:
Pero también tenemos una posibilidad que ocupa bastante menos: las listas desplegables. Para emplearlas deberemos utilizar dos etiquetas, SELECT y OPTION:
Los parámetros que admite SELECT son las siguientes:
Y OPTION estos:
Botones del formulario
Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario:
Podemos cambiar el texto que el navegador pone por defecto en esos botones utilizando el parámetro VALUE
Otros elementos
Puede que necesitos que el usuario sencillamente nos confirme o niegue algo. Lo podremos conseguir por medio de controles de confirmación:
Si queremos que el control esté activado por defecto le añadiremos el parámetroCHECKED. El formulario asignará a la variable NAME el valor on u off.
Por último, existe la posibilidad de que necesitemos que, en el formulario, tengamos alguna variable con un valor previamente asignado. Por ejemplo, en todos los cursos que tengo el formulario es el mismo. Y de alguna manera tendré que distinguirlos cuando me lleguen, digo yo. Así que incluyo algo como esto:
De este modo ya sé de que curso me están hablando.
Controles avanzados para formularios
Tablas
Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros ALIGN.
Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Así pues, una tabla con 2 filas y 3 columnas se declarará así:
Como podéis ver (o mejor no ver) la tabla no tiene mucho aspecto de tabla. Quedaría mejor con unos bordes, ¿no? Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura. Estas son las cosas que podremos cambiar con los atributos de TABLE:
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:
Definir las filas
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una etiqueta TR, que tiene los siguientes atributos:
Definir las celdas
Por último, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas son equivalentes, pero la última se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. Estos son los atributos de ambas:
Posiblemente los dos últimos parámetros no puedan quedar claros sin ejemplos. De hecho, aún entendiendo perfectamente su función es habitual que confundamos a uno con otro. Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:
Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no deberemos declarar las celdas "absorbidas" o la creación de la tabla se nos complicará de horrible manera.
Comando <FORM ACTION>: permite englobar o separar un conjunto de formularios,.
Comando <INPUT TYPE= “”>: permite crear formularios, se debe indicar que tipo de formulario que se va a crear en la zona de TYPE, como
El botón no hace nada porque no hemos definido qué debe hacer, así que sed buenos y no lo pulséis.
Todos los elementos de un formulario deben estar encerrados entre <FORM> y</FORM>. Como parámetros cabe destacar tres. ACTION define el URL que deberá gestionar el formulario. Puede ser una dirección de correo (precedida del inevitablemailto:, en cuyo caso deberemos añadir el parámetro ENCTYPE="text/plain" para que lo que recibamos resulte legible.
Por otro lado, tenemos el parámetro METHOD define la manera en que se mandará el formulario. Es recomendable utilizar POST. En el caso de que estemos mandando el formulario a nuestra dirección de correo electrónico es obligado usarlo.
Ahora vamos a ver uno a uno todos los elementos que podemos incluir en un formulario. Veremos que todos ellos tienen algo en común. Como el resultado de cualquier formulario es una lista de variables y valores asignados a las mismas, todos ellos tendrán un atributo en común: el nombre de su variable. El parámetro también será común a todos: NAME.
Cajas de texto
Existen tres maneras de conseguir que el usuario introduzca texto en nuestro formulario. Las dos primeras se obtienen por medio de la etiqueta <INPUT>:
El primero nos dibujará una caja donde escribir un texto (de una sola línea). El segundo es equivalente, pero no veremos lo que tecleemos en él. Estos son los atributos para modificarlos:
Por otro lado, puede que necesitemos que el usuario pueda introducir más de una línea. En ese caso se utilizará la siguiente etiqueta:
Lo que incluyamos entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Admite estos parámetros:
Opciones
Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo de dos modos. El primero es el que vimos en el ejemplo inicial:
Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo NAME. Aparte de esto acepta los siguientes parámetros:
Pero también tenemos una posibilidad que ocupa bastante menos: las listas desplegables. Para emplearlas deberemos utilizar dos etiquetas, SELECT y OPTION:
Los parámetros que admite SELECT son las siguientes:
Y OPTION estos:
Botones del formulario
Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario:
Podemos cambiar el texto que el navegador pone por defecto en esos botones utilizando el parámetro VALUE
Otros elementos
Puede que necesitos que el usuario sencillamente nos confirme o niegue algo. Lo podremos conseguir por medio de controles de confirmación:
Si queremos que el control esté activado por defecto le añadiremos el parámetroCHECKED. El formulario asignará a la variable NAME el valor on u off.
Por último, existe la posibilidad de que necesitemos que, en el formulario, tengamos alguna variable con un valor previamente asignado. Por ejemplo, en todos los cursos que tengo el formulario es el mismo. Y de alguna manera tendré que distinguirlos cuando me lleguen, digo yo. Así que incluyo algo como esto:
De este modo ya sé de que curso me están hablando.
Controles avanzados para formularios
El estándar HTML 4.0 ha traído varias mejoras a los formularios, que acercan los mismos a las características que tienen en lenguajes como Java o Visual Basic. Desafortunadamente, el Netscape 4, lanzado al mercado antes de la aprobación del HTML 4.0, no implementa ninguna de estas mejoras, por lo que los ejemplos de este capítulo sólo serán contemplados correctamente por los usuarios de Explorer 4 y 5 y los arriesgados usuarios de las versiones beta del futuro Netscape 5.
Tablas
Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros ALIGN.
Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Así pues, una tabla con 2 filas y 3 columnas se declarará así:
Como podéis ver (o mejor no ver) la tabla no tiene mucho aspecto de tabla. Quedaría mejor con unos bordes, ¿no? Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura. Estas son las cosas que podremos cambiar con los atributos de TABLE:
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:
Definir las filas
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una etiqueta TR, que tiene los siguientes atributos:
Definir las celdas
Por último, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas son equivalentes, pero la última se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. Estos son los atributos de ambas:
Posiblemente los dos últimos parámetros no puedan quedar claros sin ejemplos. De hecho, aún entendiendo perfectamente su función es habitual que confundamos a uno con otro. Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:
Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no deberemos declarar las celdas "absorbidas" o la creación de la tabla se nos complicará de horrible manera.
!SI TE AYUDO REGALAME UNOS PUNTOS!