Este mensaje lo escribí yo en el foro sugerencias:
Hola amig@s aguí tengo información de sobra sobre formularios vamos a pulirla entre todos y le pido a Jorgens que la publique (si quiere, claro)
A lo mejor es un poco larga, no??
Seguimos haciendo nuestra Web hasta que dices “quiero insertar un formulario” pero… ” ¿Cómo lo hago?” sencilla pregunta y fácil respuesta, lo único que tienes que hacer es seguir mis indicaciones. En muchas páginas habrás visto un formulario, claro ejemplo: Google. El formulario de esta página es sencillo pero hay más complejos, pero todavía no entraremos en detalles.
Empecemos abre el Dreamweaver y ve al código html (porque empezaremos por lo básico) donde, para hacer un formulario tendrás que poner dos palabrejas entre <BODY> y </BODY>: <FORM> que indica el comienzo y </FORM> que indica el final. Bien ya tienes hecho el formulario pero le falta algo… o todo je je.
Los famosos botones Enviar y Restablecer
Empecemos por Enviar. Este botón, en html se inserta de la siguiente manera, con el <INPUT> que significa Enviar, pero hay un problema, depende del navegador se lee en el botón una palabra distinta pero para evitar eso pondremos después de …”Submit” este trozo VALUE=”palabra" .
Ahora en el ejemplo colocaremos un campo de texto después de, por ejemplo: Nombre. El campo de texto inserta con la siguiente línea en html después de nombre, que hemos escrito anteriormente:
<INPUT>
INPUT TYPE significa: objeto de tipo.
Text significa: campo de texto
Ahora el código html nos quedaría algo así:
<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<FORM>
Nombre: <INPUT>
<INPUT>
</FORM>
</BODY>
</HTML>
Aunque lo habitual es incluir un único botón de envío el lenguaje HTML permite la posibilidad de incluir varios. En este caso debemos usar un nuevo atributo, NAME, para dar un nombre a cada uno que permita al servidor diferenciar cual se ha pulsado. Este nombre será enviado junto con los datos cuando se pulse sobre el botón. De esta forma es posible realizar acciones diferentes dependiendo de sí se pulsa uno u otro. Por ejemplo podían incluirse botones que simulasen distintas direcciones a las que acceder tras introducir los datos:
<INPUT>
<INPUT>
<INPUT>
<INPUT>
Es importante indicar que el atributo NAME no debe usarse únicamente para el botón de envío. A continuación aprenderemos a insertar los distintos tipos de controles existentes y crearemos formularios más complejos que hasta ahora, por esta razón deberemos usar NAME en cada uno de los controles. Cuando se pulse el botón de envío se enviará los datos de cada control junto con el nombre especificado con este atributo. De esta forma el servidor podrá saber el control en que se ha insertado cada dato. Recordemos brevemente todos los atributos de la etiqueta INPUT cuando la usamos para insertar el botón de envío:
<INPUT>
Todos los controles que pueden usarse a la hora de crear un formulario permitirán al navegante insertar información. Unas veces esta información consistirá en la inserción de un texto, que podrá ser de una sola línea o varias y que podrá estar oculto o no. En otras ocasiones se ofrecerá entre una serie de opciones entre las que simplemente hay que elegir una o varias. Todo ello se podrá realizar de diferentes formas que ahora mismo comenzamos a estudiar.
Para empezar vamos a ver una serie de controles todos los cuales se crean con la etiqueta INPUT. Para diferenciar entre unos controles y otros se hará uso del atributo TYPE que puede tomar los siguientes valores: text, password, radio, checkbox, submit, image, reset, file y hidden. Además del atributo TYPE, esta etiqueta consta de algunos más cuya función variará del tipo de control estemos insertando, es decir, en función del valor del atributo TYPE. Uno común a todos es NAME, ya mencionado, con el que damos un nombre al control, y que es recomendable usarlo siempre. Otro también común a todos será ALIGN, que explicaremos con las cajas de texto.
Una vez hecho este comentario, podemos empezar a estudiar cada uno de los tipos de control uno a uno.
Las cajas de texto
SIZE=”x”
Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20 caracteres. En “x” pon el número de caracteres a tu gusto
MAXLENGTH=”x”
Con este atributo limitamos el número máximo de caracteres que pueden ser escritos en una caja de texto. Esta cifra es independiente respecto a SIZE, por ejemplo:
<INPUT>
En este ejemplo habría un espacio estándar y número de letras sobrepasaría al espacio así que el campo de texto se iría rodando y no se verían las primeras letras pero no se han borrado, lo mejor que puedes hacer es hacer el ejemplo y comprobarlo tú mismo.
VALUE=”Lo que quieras”
Sirve para especificar un texto que debe aparecer por defecto en la caja de texto, antes de que el usuario escriba nada. Este texto suele ser, en general, o bien instrucciones o bien la respuesta más probable.
Alineamiento de controles.
Tal y como hemos indicado antes, todos los controles que insertamos con la etiqueta INPUT tienen un atributo, llamado ALIGN, que nos permitirá seleccionar entre varios tipos de alineamiento.
El atributo ALIGN puede tomar los siguientes valores:
ALIGN="top"
Alinea verticalmente el control con la parte superior de la línea en que es insertado.
ALIGN="bottom"
Alinea verticalmente el control con la parte inferior de la línea.
ALIGN="middle"
Sitúa el control a una altura media entre el resto de elementos de la línea.
ALIGN="left"
Sitúa el control a la izquierda de la pantalla.
ALIGN="left"
Sitúa el control a la derecha de la pantalla.
Aquí tenéis un resumen de las cajas de texto:
<INPUT>
Bueno, hemos acabado con las cajas de texto, un abrazo amig@s, ¡Ay! Que leñazo con la pantalla.
Cajas de texto para claves
En ocasiones puede ser conveniente pedir al usuario algún tipo de información confidencial como puede ser una clave de acceso o password. Debemos tener en cuenta que algunos usuarios pueden estar en algún lugar público o, al menos, con gente alrededor que pueden leer lo que escriba en la pantalla y por tanto no le interesará que lo que escribe sea mostrado en ésta. El lenguaje html permite utilizar, en estos casos, una caja de texto modificada en la que al escribir se mostrarán únicamente asteriscos. Para ello debemos usar TYPE="password" en la etiqueta INPUT.
Las cajas de texto para claves también tienen los atributos SIZE, MAXLENGTH, VALUE y ALIGN que vimos en las cajas de texto.
Bueno otra cosa terminada, esta si fue rápida, no??
Botones de radio
Estos controles reciben también el nombre de botones de radio, como traducción directa de su denominación inglesa radio buttons y porque en general los navegadores suelen darles una forma circular. Para insertar un botón de elección usaremos de nuevo la etiqueta INPUT, pero esta vez el valor del atributo TYPE será radio
Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado (OFF), estando inicialmente todos en la posición OFF. También es posible especificar que un botón determinado esté seleccionado inicialmente insertando el atributo CHECKED en la etiqueta INPUT de la siguiente manera:
<INPUT>
Los botones de elección suelen ser insertados en los formularios en grupos, dando al usuario la posibilidad de elegir entre una serie de opciones. Cuando pulsamos sobre un botón de radio le pasamos a la posición ON y permanecerá en ese estado hasta que pulsemos en otra opción del mismo grupo. Esto es así porque entre los botones de radio de un mismo grupo sólo uno de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estuviese seleccionado previamente dejará de estarlo.
Para indicar que una serie de botones de elección pertenecen a un mismo grupo debemos incluir el mismo valor en el atributo NAME en todos ellos. Además debemos usar el atributo VALUE para dar un nombre distinto a cada uno de los botones.
Bueno, como en todo vamos a colocar un resumen:
<INPUT>
Cajas de selección
Las cajas de selección guardan ciertos parecidos con los botones de radio, pero además permitirán seleccionar varias opciones en una lista. Al igual que dichos botones tienen dos posiciones, seleccionados o no seleccionados, estando en esta última posición inicialmente, a no ser que hayamos usado el atributo CHECKED. Cada caja de selección es independiente del resto, y por tanto el valor del atributo NAME debe ser diferente en cada una.
Para insertar una caja de selección debemos usar de nuevo la etiqueta INPUT, pero esta vez con TYPE="checkbox".
Otro resumen de las cajas de selección:
<INPUT>
Imágenes
El lenguaje HTML permite una manera alternativa para insertar un botón de envío personalizado, al poder usar en lugar del botón normal que hemos visto anteriormente una imagen creada por nosotros mismos. Para insertar este tipo de control debemos usar TYPE="image", mientras que la dirección de la imagen se indica con el atributo SRC al igual que hacíamos con la etiqueta IMG.
Vamos a ver un ejemplo:
<INPUT>
Botón de reseteado
La mayoría de los controles anteriores permitían al usuario introducir una serie de datos o elegir entre una serie de opciones. Inicialmente las cajas de texto aparecían vacías, a no ser que hubiésemos usado el atributo VALUE para asignarles por defecto. Igualmente los botones de elección y cajas de selección aparecían en posición de no seleccionados a no ser que hubiésemos indicado lo contrario usando el atributo CHECKED. Una vez a cargado la página con el formulario en blanco o con unas opciones por defecto el navegante puede actuar sobre los controles y modificar sus valores (en esto se basa la interactividad). Pero quizás en algún momento decida que quiere dar marcha atrás y recuperar los datos que aparecieron al principio. Con este fin existe en el lenguaje HTML un control que permite borrar los datos actuales de todos los campos del formulario y restablecer los valores por defecto, si es que los había. Este control recibe el nombre de botón de borrado o botón de reseteado (reset button ). La creación de este control es muy sencilla. De nuevo usaremos la etiqueta INPUT, esta vez con TYPE="reset".
Aquí un resumen, como siempre:
<INPUT>
Botón genérico
Para completar la colección de botones de los formularios, nos encontramos con la posibilidad de insertar un botón genérico, es decir, que no tiene ninguna función definida, sino la que nosotros queramos darle. Para insertar un botón genérico usaremos la etiqueta INPUT con TYPE="button".
Las acciones que debe llevar a cabo este botón al ser pulsado sólo pueden indicarse con lenguajes de script como JavaScript o VBScript y no con HTML estándar. Para insertar el código de estos lenguajes se usa el atributo ONCLICK:
No todos los navegadores soportan los lenguajes de script, y por tanto el botón genérico debe ser considerado como una extensión. Si lo usamos debemos ser conscientes que únicamente los navegadores que soporten el script usado podrán hacer uso suyo.
Por ahora no nos adentraremos en ningún lenguaje de script, ya que más adelante en esta obra, éstos serán tratados más en detalle, pero mostraremos dos ejemplos sencillos que ilustran el funcionamiento de este tipo de botones. Estos ejemplos han sido probados con los navegadores Internet Explorer y Netscape Navigator en sus versiones 3.0 y posteriores, pero pueden no funcionar con otros navegadores.
El primero consistirá en un botón cuya función será cerrar una ventana del navegador. El código necesario será:
<FORM>
<INPUT>
</FORM>
El segundo ejemplo es más usado aún y consiste en usar el botón con la misma función que un enlace hipertexto. El resultado es más atractivo, pero debemos usarlo con moderación, ya que no todos los visitantes tendrán navegadores que entiendan este código:
<FORM>
<INPUT>
</FORM>
Campos ocultos
Los campos ocultos son un tipo de control que únicamente sirve para incluir información adicional entre los datos del formulario. Este tipo de control es invisible, y por tanto el navegador no muestra ningún tipo de gráfico para advertir de su existencia.
¿Para qué sirve entonces un control oculto? Si no aparece en la página y el navegante no puede hacer nada con él ¿Cuál es su función? En general, los campos ocultos se usan para enviar información específica al programa del servidor Web que procesará los datos enviados, por ejemplo si este programa es capaz de realizar varias funciones distintas con estos datos, podemos usar un campo oculto para pasarle la información de que debe hacer con los datos de este formulario concreto (debemos tener en cuenta que este mismo programa puede procesar la información de otros formularios también). Aún así esta problemática queda fuera de lo que pretendemos abarcar en esta sección dedicada al lenguaje HTML.
Los campos ocultos se crean usando la etiqueta INPUT con TYPE="hidden". Además debemos usar los atributos VALUE y NAME, para indicar los datos y su nombre:
<INPUT>
Por ejemplo:
<INPUT>
Innovaciones
TITLE
La compañía Microsoft en sus navegadores Internet Explorer 3.0 y posteriores ha incorporado una serie de extensiones a la etiqueta INPUT para incrementar las posibilidades de los programadores de HTML. Estas extensiones afectan a todos los controles que hemos visto que hacen uso de esta etiqueta.
La primera extensión resultará conocida a los lectores, se trata del atributo TITLE, y su función será mostrar un bocadillo explicativo cuando el usuario pase el cursor por encima del control.
Este atributo puede usarse con entera libertad, a pesar de tratarse de una extensión, porque los usuarios de Internet Explorer podrán beneficiarse de ella y los usuarios de navegadores que no lo entiendan no saldrán perjudicados, simplemente se quedarán igual que si no lo hubiésemos usado.
DISABLED READONLY
La última innovación que ha introducido Microsoft son los atributos READONLY y DISABLED. Estos atributos funcionan exclusivamente con Internet Explorer 4.0 (y posteriores), por lo que debemos tener cuidado al usarlos.
Cuando usamos el atributo DISABLED en un control lo deshabitamos. En general este atributo únicamente es usado con cajas de texto. Cuando una caja de texto usa este atributo podrá seguir mostrando texto (si usamos el atributo VALUE para poner un texto inicial), pero el usuario no podrá cambiarlo. Este control tampoco podrá ser seleccionado, prácticamente actúa como si no estuviera. La función del atributo READONLY es muy similar, con la única diferencia de que el control actúa como tal, por ejemplo en una caja de texto podemos seleccionar con el ratón el texto que hay en ella, pero tampoco podrá modificarse el contenido.
<FORM>
<H2>Cajas de texto</H2>
Normal:
<INPUT>
DISABLED:<INPUT>
READONLY:<INPUT>
<H2>Botones de elección</H2>
Normal: <INPUT>
DISABLED:<INPUT>
READONLY:<INPUT>
</FORM>
Otros controles
Estos controles que voy a mostrar no utilizan INPUT ya que tienen sus propias etiquetas:
TEXTAREA
La etiqueta TEXTAREA está compuesta por una instrucción de inicio y una instrucción de fin, siendo obligatorio el uso de ambas. Entre ellas únicamente podrá insertarse texto llano (sin ninguna etiqueta HTML) y éste será mostrado como contenido inicial del área de texto.
La etiqueta usada para insertar este nuevo control es TEXTAREA, que consta de cuatro atributos:
• NAME: El nombre que queremos asignarle al control. Como siempre, este nombre será enviado junto con los datos del área de texto al mandar el formulario.
• ROWS: El número de líneas de la caja de texto.
• COLS: El número de caracteres visibles de cada línea. Este atributo es similar al atributo SIZE que vimos en las cajas de texto convencionales.
La etiqueta TEXTAREA está compuesta por una instrucción de inicio y una instrucción de fin, siendo obligatorio el uso de ambas.
La etiqueta TEXTAREA también admite el atributo ALIGN y las extensiones introducidas por Microsoft que hemos visto anteriormente. Nos referimos a los atributos DISABLED, READONLY, TABINDEX, NOTAB y TITLE
Cuadros de selección
Éste es el último control para crear formularios que nos ofrece el lenguaje HTML. Su función será dar a elegir entre una serie de opciones de manera que el usuario pueda elegir una o varias de ellas. Existen dos formas de mostrar estas opciones, como una lista con desplazamiento, o mediante una persiana desplegable. Enseguida veremos cómo es cada una y cómo crearlas.
Para insertar un cuadro de selección usaremos la etiqueta SELECT, que consta de una instrucción de inicio y de una instrucción de fin, entre las cuales introduciremos las diferentes opciones para el usuario. Para insertar estas opciones usaremos una nueva etiqueta, OPTION, que consta de una única instrucción.
Ejemplo:
<FORM>
Elija un color:
<CENTER>
<SELECT>
<OPTION>Verde
<OPTION>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>
</CENTER>
<INPUT>
</FORM>
Existe un atributo, SELECTED, que nos permitirá elegir la opción que debe estar seleccionada por defecto.
<OPTION>Negro
Al principio hemos comentado que los cuadros de selección pueden mostrarse como persianas desplegables, o bien como listas con desplazamiento. Hasta ahora sólo hemos visto el primer caso en el que únicamente la opción seleccionada es visible. En ocasiones puede ser conveniente que todas, o al menos algunas de las posibilidades sean mostradas directamente, sin tener que pulsar un botón. Para conseguir esto el lenguaje HTML ofrece el atributo SIZE, que determina el número de opciones que pueden ser vistas simultáneamente. Si este valor es 1 (o no se usa el atributo SIZE), se mostrará una persiana desplegable, como hemos visto hasta ahora. Si es mayor, se mostrará una lista, que podrá tener barras de desplazamiento si no caben todas las opciones disponibles.
Si no indicamos lo contrario, los cuadros de selección actúan como los botones de radio, es decir, sola una opción puede ser elegida simultáneamente. Afortunadamente, es posible cambiar este comportamiento, y permitir la selección de varias opciones, usando el atributo MULTIPLE en el interior de la etiqueta SELECT.
La etiqueta SELECT también consta del atributo ALIGN para elegir su alineamiento. En lo que a extensiones se refiere, también podemos usar el atributo DISABLED en la etiqueta SELECT para desabilitarla, aunque solo funcionará con Internet Explorer 4.0. Igualmente podemos usar el atributo TITLE tanto en SELECT como en OPTION para incluir una descripción que será mostrada en un bocadillo cuando el usuario sitúe el ratón sobre el control, en el primer caso, o sobre la opción específica, en el segundo.
Aquí un resumen, como siempre:
<SELECT>
<OPTION>
...
</SELECT>
Enviar datos de formularios
Bueno, hemos llegado muy lejos, te lo digo yo pero falta una cosa, mandar los datos del formulario. Se puede hacer de varias maneras pero elegiramos la más simple, el correo electrónico.
Empecemos, donde colocaste el principio del formulario pusiste <FORM>, pues ahí vamos a colocar una serie de cosas para que cuando alguien le de a “enviar” nos mande los datos a tu dirección de correo, como por ejemplo: [correo eliminado]
Vamos a colocar después de FORM los siguientes datos:
ACTION=”mailto:[correo eliminado]” ENCTYPE="text/plain" METHOD="post"
Ahora nos quedaría la primera línea del formulario así:
<FORM>
Donde está [correo eliminado] escribe tu dirección de correo electrónico.
Hola amig@s aguí tengo información de sobra sobre formularios vamos a pulirla entre todos y le pido a Jorgens que la publique (si quiere, claro)
A lo mejor es un poco larga, no??
Seguimos haciendo nuestra Web hasta que dices “quiero insertar un formulario” pero… ” ¿Cómo lo hago?” sencilla pregunta y fácil respuesta, lo único que tienes que hacer es seguir mis indicaciones. En muchas páginas habrás visto un formulario, claro ejemplo: Google. El formulario de esta página es sencillo pero hay más complejos, pero todavía no entraremos en detalles.
Empecemos abre el Dreamweaver y ve al código html (porque empezaremos por lo básico) donde, para hacer un formulario tendrás que poner dos palabrejas entre <BODY> y </BODY>: <FORM> que indica el comienzo y </FORM> que indica el final. Bien ya tienes hecho el formulario pero le falta algo… o todo je je.
Los famosos botones Enviar y Restablecer
Empecemos por Enviar. Este botón, en html se inserta de la siguiente manera, con el <INPUT> que significa Enviar, pero hay un problema, depende del navegador se lee en el botón una palabra distinta pero para evitar eso pondremos después de …”Submit” este trozo VALUE=”palabra" .
Ahora en el ejemplo colocaremos un campo de texto después de, por ejemplo: Nombre. El campo de texto inserta con la siguiente línea en html después de nombre, que hemos escrito anteriormente:
<INPUT>
INPUT TYPE significa: objeto de tipo.
Text significa: campo de texto
Ahora el código html nos quedaría algo así:
<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<FORM>
Nombre: <INPUT>
<INPUT>
</FORM>
</BODY>
</HTML>
Aunque lo habitual es incluir un único botón de envío el lenguaje HTML permite la posibilidad de incluir varios. En este caso debemos usar un nuevo atributo, NAME, para dar un nombre a cada uno que permita al servidor diferenciar cual se ha pulsado. Este nombre será enviado junto con los datos cuando se pulse sobre el botón. De esta forma es posible realizar acciones diferentes dependiendo de sí se pulsa uno u otro. Por ejemplo podían incluirse botones que simulasen distintas direcciones a las que acceder tras introducir los datos:
<INPUT>
<INPUT>
<INPUT>
<INPUT>
Es importante indicar que el atributo NAME no debe usarse únicamente para el botón de envío. A continuación aprenderemos a insertar los distintos tipos de controles existentes y crearemos formularios más complejos que hasta ahora, por esta razón deberemos usar NAME en cada uno de los controles. Cuando se pulse el botón de envío se enviará los datos de cada control junto con el nombre especificado con este atributo. De esta forma el servidor podrá saber el control en que se ha insertado cada dato. Recordemos brevemente todos los atributos de la etiqueta INPUT cuando la usamos para insertar el botón de envío:
<INPUT>
Todos los controles que pueden usarse a la hora de crear un formulario permitirán al navegante insertar información. Unas veces esta información consistirá en la inserción de un texto, que podrá ser de una sola línea o varias y que podrá estar oculto o no. En otras ocasiones se ofrecerá entre una serie de opciones entre las que simplemente hay que elegir una o varias. Todo ello se podrá realizar de diferentes formas que ahora mismo comenzamos a estudiar.
Para empezar vamos a ver una serie de controles todos los cuales se crean con la etiqueta INPUT. Para diferenciar entre unos controles y otros se hará uso del atributo TYPE que puede tomar los siguientes valores: text, password, radio, checkbox, submit, image, reset, file y hidden. Además del atributo TYPE, esta etiqueta consta de algunos más cuya función variará del tipo de control estemos insertando, es decir, en función del valor del atributo TYPE. Uno común a todos es NAME, ya mencionado, con el que damos un nombre al control, y que es recomendable usarlo siempre. Otro también común a todos será ALIGN, que explicaremos con las cajas de texto.
Una vez hecho este comentario, podemos empezar a estudiar cada uno de los tipos de control uno a uno.
Las cajas de texto
SIZE=”x”
Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20 caracteres. En “x” pon el número de caracteres a tu gusto
MAXLENGTH=”x”
Con este atributo limitamos el número máximo de caracteres que pueden ser escritos en una caja de texto. Esta cifra es independiente respecto a SIZE, por ejemplo:
<INPUT>
En este ejemplo habría un espacio estándar y número de letras sobrepasaría al espacio así que el campo de texto se iría rodando y no se verían las primeras letras pero no se han borrado, lo mejor que puedes hacer es hacer el ejemplo y comprobarlo tú mismo.
VALUE=”Lo que quieras”
Sirve para especificar un texto que debe aparecer por defecto en la caja de texto, antes de que el usuario escriba nada. Este texto suele ser, en general, o bien instrucciones o bien la respuesta más probable.
Alineamiento de controles.
Tal y como hemos indicado antes, todos los controles que insertamos con la etiqueta INPUT tienen un atributo, llamado ALIGN, que nos permitirá seleccionar entre varios tipos de alineamiento.
El atributo ALIGN puede tomar los siguientes valores:
ALIGN="top"
Alinea verticalmente el control con la parte superior de la línea en que es insertado.
ALIGN="bottom"
Alinea verticalmente el control con la parte inferior de la línea.
ALIGN="middle"
Sitúa el control a una altura media entre el resto de elementos de la línea.
ALIGN="left"
Sitúa el control a la izquierda de la pantalla.
ALIGN="left"
Sitúa el control a la derecha de la pantalla.
Aquí tenéis un resumen de las cajas de texto:
<INPUT>
Bueno, hemos acabado con las cajas de texto, un abrazo amig@s, ¡Ay! Que leñazo con la pantalla.
Cajas de texto para claves
En ocasiones puede ser conveniente pedir al usuario algún tipo de información confidencial como puede ser una clave de acceso o password. Debemos tener en cuenta que algunos usuarios pueden estar en algún lugar público o, al menos, con gente alrededor que pueden leer lo que escriba en la pantalla y por tanto no le interesará que lo que escribe sea mostrado en ésta. El lenguaje html permite utilizar, en estos casos, una caja de texto modificada en la que al escribir se mostrarán únicamente asteriscos. Para ello debemos usar TYPE="password" en la etiqueta INPUT.
Las cajas de texto para claves también tienen los atributos SIZE, MAXLENGTH, VALUE y ALIGN que vimos en las cajas de texto.
Bueno otra cosa terminada, esta si fue rápida, no??
Botones de radio
Estos controles reciben también el nombre de botones de radio, como traducción directa de su denominación inglesa radio buttons y porque en general los navegadores suelen darles una forma circular. Para insertar un botón de elección usaremos de nuevo la etiqueta INPUT, pero esta vez el valor del atributo TYPE será radio
Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado (OFF), estando inicialmente todos en la posición OFF. También es posible especificar que un botón determinado esté seleccionado inicialmente insertando el atributo CHECKED en la etiqueta INPUT de la siguiente manera:
<INPUT>
Los botones de elección suelen ser insertados en los formularios en grupos, dando al usuario la posibilidad de elegir entre una serie de opciones. Cuando pulsamos sobre un botón de radio le pasamos a la posición ON y permanecerá en ese estado hasta que pulsemos en otra opción del mismo grupo. Esto es así porque entre los botones de radio de un mismo grupo sólo uno de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estuviese seleccionado previamente dejará de estarlo.
Para indicar que una serie de botones de elección pertenecen a un mismo grupo debemos incluir el mismo valor en el atributo NAME en todos ellos. Además debemos usar el atributo VALUE para dar un nombre distinto a cada uno de los botones.
Bueno, como en todo vamos a colocar un resumen:
<INPUT>
Cajas de selección
Las cajas de selección guardan ciertos parecidos con los botones de radio, pero además permitirán seleccionar varias opciones en una lista. Al igual que dichos botones tienen dos posiciones, seleccionados o no seleccionados, estando en esta última posición inicialmente, a no ser que hayamos usado el atributo CHECKED. Cada caja de selección es independiente del resto, y por tanto el valor del atributo NAME debe ser diferente en cada una.
Para insertar una caja de selección debemos usar de nuevo la etiqueta INPUT, pero esta vez con TYPE="checkbox".
Otro resumen de las cajas de selección:
<INPUT>
Imágenes
El lenguaje HTML permite una manera alternativa para insertar un botón de envío personalizado, al poder usar en lugar del botón normal que hemos visto anteriormente una imagen creada por nosotros mismos. Para insertar este tipo de control debemos usar TYPE="image", mientras que la dirección de la imagen se indica con el atributo SRC al igual que hacíamos con la etiqueta IMG.
Vamos a ver un ejemplo:
<INPUT>
Botón de reseteado
La mayoría de los controles anteriores permitían al usuario introducir una serie de datos o elegir entre una serie de opciones. Inicialmente las cajas de texto aparecían vacías, a no ser que hubiésemos usado el atributo VALUE para asignarles por defecto. Igualmente los botones de elección y cajas de selección aparecían en posición de no seleccionados a no ser que hubiésemos indicado lo contrario usando el atributo CHECKED. Una vez a cargado la página con el formulario en blanco o con unas opciones por defecto el navegante puede actuar sobre los controles y modificar sus valores (en esto se basa la interactividad). Pero quizás en algún momento decida que quiere dar marcha atrás y recuperar los datos que aparecieron al principio. Con este fin existe en el lenguaje HTML un control que permite borrar los datos actuales de todos los campos del formulario y restablecer los valores por defecto, si es que los había. Este control recibe el nombre de botón de borrado o botón de reseteado (reset button ). La creación de este control es muy sencilla. De nuevo usaremos la etiqueta INPUT, esta vez con TYPE="reset".
Aquí un resumen, como siempre:
<INPUT>
Botón genérico
Para completar la colección de botones de los formularios, nos encontramos con la posibilidad de insertar un botón genérico, es decir, que no tiene ninguna función definida, sino la que nosotros queramos darle. Para insertar un botón genérico usaremos la etiqueta INPUT con TYPE="button".
Las acciones que debe llevar a cabo este botón al ser pulsado sólo pueden indicarse con lenguajes de script como JavaScript o VBScript y no con HTML estándar. Para insertar el código de estos lenguajes se usa el atributo ONCLICK:
No todos los navegadores soportan los lenguajes de script, y por tanto el botón genérico debe ser considerado como una extensión. Si lo usamos debemos ser conscientes que únicamente los navegadores que soporten el script usado podrán hacer uso suyo.
Por ahora no nos adentraremos en ningún lenguaje de script, ya que más adelante en esta obra, éstos serán tratados más en detalle, pero mostraremos dos ejemplos sencillos que ilustran el funcionamiento de este tipo de botones. Estos ejemplos han sido probados con los navegadores Internet Explorer y Netscape Navigator en sus versiones 3.0 y posteriores, pero pueden no funcionar con otros navegadores.
El primero consistirá en un botón cuya función será cerrar una ventana del navegador. El código necesario será:
<FORM>
<INPUT>
</FORM>
El segundo ejemplo es más usado aún y consiste en usar el botón con la misma función que un enlace hipertexto. El resultado es más atractivo, pero debemos usarlo con moderación, ya que no todos los visitantes tendrán navegadores que entiendan este código:
<FORM>
<INPUT>
</FORM>
Campos ocultos
Los campos ocultos son un tipo de control que únicamente sirve para incluir información adicional entre los datos del formulario. Este tipo de control es invisible, y por tanto el navegador no muestra ningún tipo de gráfico para advertir de su existencia.
¿Para qué sirve entonces un control oculto? Si no aparece en la página y el navegante no puede hacer nada con él ¿Cuál es su función? En general, los campos ocultos se usan para enviar información específica al programa del servidor Web que procesará los datos enviados, por ejemplo si este programa es capaz de realizar varias funciones distintas con estos datos, podemos usar un campo oculto para pasarle la información de que debe hacer con los datos de este formulario concreto (debemos tener en cuenta que este mismo programa puede procesar la información de otros formularios también). Aún así esta problemática queda fuera de lo que pretendemos abarcar en esta sección dedicada al lenguaje HTML.
Los campos ocultos se crean usando la etiqueta INPUT con TYPE="hidden". Además debemos usar los atributos VALUE y NAME, para indicar los datos y su nombre:
<INPUT>
Por ejemplo:
<INPUT>
Innovaciones
TITLE
La compañía Microsoft en sus navegadores Internet Explorer 3.0 y posteriores ha incorporado una serie de extensiones a la etiqueta INPUT para incrementar las posibilidades de los programadores de HTML. Estas extensiones afectan a todos los controles que hemos visto que hacen uso de esta etiqueta.
La primera extensión resultará conocida a los lectores, se trata del atributo TITLE, y su función será mostrar un bocadillo explicativo cuando el usuario pase el cursor por encima del control.
Este atributo puede usarse con entera libertad, a pesar de tratarse de una extensión, porque los usuarios de Internet Explorer podrán beneficiarse de ella y los usuarios de navegadores que no lo entiendan no saldrán perjudicados, simplemente se quedarán igual que si no lo hubiésemos usado.
DISABLED READONLY
La última innovación que ha introducido Microsoft son los atributos READONLY y DISABLED. Estos atributos funcionan exclusivamente con Internet Explorer 4.0 (y posteriores), por lo que debemos tener cuidado al usarlos.
Cuando usamos el atributo DISABLED en un control lo deshabitamos. En general este atributo únicamente es usado con cajas de texto. Cuando una caja de texto usa este atributo podrá seguir mostrando texto (si usamos el atributo VALUE para poner un texto inicial), pero el usuario no podrá cambiarlo. Este control tampoco podrá ser seleccionado, prácticamente actúa como si no estuviera. La función del atributo READONLY es muy similar, con la única diferencia de que el control actúa como tal, por ejemplo en una caja de texto podemos seleccionar con el ratón el texto que hay en ella, pero tampoco podrá modificarse el contenido.
<FORM>
<H2>Cajas de texto</H2>
Normal:
<INPUT>
DISABLED:<INPUT>
READONLY:<INPUT>
<H2>Botones de elección</H2>
Normal: <INPUT>
DISABLED:<INPUT>
READONLY:<INPUT>
</FORM>
Otros controles
Estos controles que voy a mostrar no utilizan INPUT ya que tienen sus propias etiquetas:
TEXTAREA
La etiqueta TEXTAREA está compuesta por una instrucción de inicio y una instrucción de fin, siendo obligatorio el uso de ambas. Entre ellas únicamente podrá insertarse texto llano (sin ninguna etiqueta HTML) y éste será mostrado como contenido inicial del área de texto.
La etiqueta usada para insertar este nuevo control es TEXTAREA, que consta de cuatro atributos:
• NAME: El nombre que queremos asignarle al control. Como siempre, este nombre será enviado junto con los datos del área de texto al mandar el formulario.
• ROWS: El número de líneas de la caja de texto.
• COLS: El número de caracteres visibles de cada línea. Este atributo es similar al atributo SIZE que vimos en las cajas de texto convencionales.
La etiqueta TEXTAREA está compuesta por una instrucción de inicio y una instrucción de fin, siendo obligatorio el uso de ambas.
La etiqueta TEXTAREA también admite el atributo ALIGN y las extensiones introducidas por Microsoft que hemos visto anteriormente. Nos referimos a los atributos DISABLED, READONLY, TABINDEX, NOTAB y TITLE
Cuadros de selección
Éste es el último control para crear formularios que nos ofrece el lenguaje HTML. Su función será dar a elegir entre una serie de opciones de manera que el usuario pueda elegir una o varias de ellas. Existen dos formas de mostrar estas opciones, como una lista con desplazamiento, o mediante una persiana desplegable. Enseguida veremos cómo es cada una y cómo crearlas.
Para insertar un cuadro de selección usaremos la etiqueta SELECT, que consta de una instrucción de inicio y de una instrucción de fin, entre las cuales introduciremos las diferentes opciones para el usuario. Para insertar estas opciones usaremos una nueva etiqueta, OPTION, que consta de una única instrucción.
Ejemplo:
<FORM>
Elija un color:
<CENTER>
<SELECT>
<OPTION>Verde
<OPTION>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>
</CENTER>
<INPUT>
</FORM>
Existe un atributo, SELECTED, que nos permitirá elegir la opción que debe estar seleccionada por defecto.
<OPTION>Negro
Al principio hemos comentado que los cuadros de selección pueden mostrarse como persianas desplegables, o bien como listas con desplazamiento. Hasta ahora sólo hemos visto el primer caso en el que únicamente la opción seleccionada es visible. En ocasiones puede ser conveniente que todas, o al menos algunas de las posibilidades sean mostradas directamente, sin tener que pulsar un botón. Para conseguir esto el lenguaje HTML ofrece el atributo SIZE, que determina el número de opciones que pueden ser vistas simultáneamente. Si este valor es 1 (o no se usa el atributo SIZE), se mostrará una persiana desplegable, como hemos visto hasta ahora. Si es mayor, se mostrará una lista, que podrá tener barras de desplazamiento si no caben todas las opciones disponibles.
Si no indicamos lo contrario, los cuadros de selección actúan como los botones de radio, es decir, sola una opción puede ser elegida simultáneamente. Afortunadamente, es posible cambiar este comportamiento, y permitir la selección de varias opciones, usando el atributo MULTIPLE en el interior de la etiqueta SELECT.
La etiqueta SELECT también consta del atributo ALIGN para elegir su alineamiento. En lo que a extensiones se refiere, también podemos usar el atributo DISABLED en la etiqueta SELECT para desabilitarla, aunque solo funcionará con Internet Explorer 4.0. Igualmente podemos usar el atributo TITLE tanto en SELECT como en OPTION para incluir una descripción que será mostrada en un bocadillo cuando el usuario sitúe el ratón sobre el control, en el primer caso, o sobre la opción específica, en el segundo.
Aquí un resumen, como siempre:
<SELECT>
<OPTION>
...
</SELECT>
Enviar datos de formularios
Bueno, hemos llegado muy lejos, te lo digo yo pero falta una cosa, mandar los datos del formulario. Se puede hacer de varias maneras pero elegiramos la más simple, el correo electrónico.
Empecemos, donde colocaste el principio del formulario pusiste <FORM>, pues ahí vamos a colocar una serie de cosas para que cuando alguien le de a “enviar” nos mande los datos a tu dirección de correo, como por ejemplo: [correo eliminado]
Vamos a colocar después de FORM los siguientes datos:
ACTION=”mailto:[correo eliminado]” ENCTYPE="text/plain" METHOD="post"
Ahora nos quedaría la primera línea del formulario así:
<FORM>
Donde está [correo eliminado] escribe tu dirección de correo electrónico.