Formularios.
Anuncio
Formularios. La habilidad de interactuar con los usuarios es una de las principales características de los ordenadores y las redes informáticas. La posibilidad de realizar preguntas y recibir respuestas es una de las formas fundamentales de conseguir esta interactividad y el lenguaje HTML proporciona la habilidad de crear formularios e insertar cajas de texto, botones de opción y otros controles que nos permitirán aprovechar esa posibilidad de interactividad en nuestras páginas Web. Para crear un formulario el lenguaje HTML proporciona la etiqueta FORM. <HTML> <HEAD> <TITLE>Formulario de ejemplo</TITLE> </HEAD> <BODY> <H1>FORMULARIO DE EJEMPLO</H1> <FORM> Introduzca su nombre: <INPUT TYPE="Text"> </FORM> </BODY> </HTML> ¿Cómo se crea un botón de envío? El lenguaje HTML consta de una etiqueta, INPUT, que permite insertar varios tipos de controles, entre los que se encuentra el botón de envío. Para indicar el tipo de control que queremos insertar se usa el atributo TYPE. Para crear el botón de envío debemos usar TYPE="submit". <H1>FORMULARIO DE EJEMPLO</H1> <FORM> <P>Introduzca su nombre: <INPUT TYPE="Text"> <P><INPUT TYPE="Submit"> </FORM> Controles de Formularios. 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. Cajas de texto. <FORM> <INPUT TYPE="text" NAME="mitexto"> </FORM> Como podemos apreciar la etiqueta INPUT consta de una única instrucción. Ya hemos visto los atributos TYPE y NAME que existe siempre en la etiqueta INPUT. Cuando insertamos una caja de texto, es decir, cuando ponemos TYPE="text" existen otros dos: SIZE: Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20 caracteres, esta es la longitud de los ejemplos que veíamos en las figuras 12.3 a 12.6. En ocasiones convendrá decrementar o incrementar este valor por defecto, pero en todo caso siempre será conveniente mantener un valor menor de 50 caracteres de manera que la caja de texto quepa en la mayoría de pantallas. Un problema adicional que dificulta una correcta elección del tamaño de la caja es que este tamaño será considerado de distinta forma por los distintos navegadores y más aún si estos son de distintos sistemas operativos. En la figura 12.7 podemos ver una serie de cajas de texto de diferentes tamaños y las diferencias entre Internet Explorer™ y Netscape™ Navigator™ al mostrar el mismo código. MAXLENGTH: Con este atributo limitamos el número máximo de caracteres que pueden ser escritos en una caja de texto. El valor de este atributo puede ser mayor o menor que el especificado en SIZE, y que es totalmente independiente. Si es mayor cuando lleguemos al final de la caja de texto los nuevos caracteres que insertemos irán desplazando hacia la izquierda a los primeros, que dejarán de estar a la vista (OJO, esto no quiere decir que sean borrados). Para entender el funcionamiento es mejor comprobarlo in situ con unos ejemplos. Recomendamos al lector que pruebe a visualizar los siguientes códigos, y que intente escribir una frase algo larga en cada uno de ellos: <INPUT TYPE="text" SIZE="20" MAXLENGTH="20"> <INPUT TYPE="text" SIZE="20" MAXLENGTH="5"> <INPUT TYPE="text" SIZE="20" MAXLENGTH="40"> Por último queda decir que si no usamos el atributo MAXLENGTH el número de caracteres que pueden introducirse en la caja de texto no tendrá límite. VALUE: 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. Veamos un ejemplo que ilustra estos dos casos: <FORM> <P>Nombre:<INPUT TYPE="text" VALUE="Introduzca aquí su nombre"> <P>¿Le gusta nuestro Web? <INPUT TYPE="text" VALUE="Si, muchísimo"> </FORM> 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": En este caso estamos alineando el control horizontalmente a la izquierda. Al contrario de lo que ocurría con las imágenes y con las tablas, el texto no bordeará el control por su derecha, situándose éste en una línea propia. ALIGN="right": Este valor es idéntico al anterior en funcionamiento, sólo que ahora el control se situará a la derecha de la ventana del navegador. Todos el atributo ALIGN y todos estos valores existen para todos los controles que veamos a partir de ahora y que usen la etiqueta INPUT. Para terminar con las cajas de texto veamos un resumen de todos sus atributos y sus funciones: <INPUT TYPE="text" NAME="nombre" VALUE="valor por defecto" SIZE="tamaño" - MAXLENGTH="longitud_máxima" ALIGN="alineamiento"> 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. Un ejemplo típico de uso de password es al pedir una identificación, por ejemplo para entrar en algunas secciones de una página. Para crear este formulario podemos usar el siguiente código: <H2><FONT COLOR="#8080FF">Formulario de autenticación</FONT></H2> <FORM> <P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre"> <P>Introduzca su clave: <INPUT TYPE="password" NAME="clave"> <P><INPUT TYPE="submit" VALUE="Enviar"> </FORM> Aviso La caja de texto para claves o passwords simplemente impide que el texto que se escribe sea mostrado en pantalla, sin embargo este texto no es codificado al ser mandado al servidor Web, y por tanto no es seguro mandar datos confidenciales. Las cajas de texto para claves también tienen los atributos SIZE, MAXLENGTH, VALUE y ALIGN que vimos en las cajas de texto. Al igual que hicimos con estas, veamos un resumen de todos los atributos de las cajas de texto para claves: <INPUT TYPE="password" NAME="clave" SIZE="tamaño" MAXLENGTH="longitud_máxima" VALUE="clave por defecto" ALIGN="alineamiento"> Botones de elección. 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: <FORM> <INPUT TYPE="radio"> </FORM> 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 TYPE="radio" CHECKED> 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. Veamos un ejemplo: Indique el tipo de música que más le guste: <FORM> <P><INPUT <P><INPUT <P><INPUT <P><INPUT </FORM> TYPE="radio" TYPE="radio" TYPE="radio" TYPE="radio" NAME="musica" NAME="musica" NAME="musica" NAME="musica" VALUE="Jazz">Jazz VALUE="Pop">Pop VALUE="Rock">Rock VALUE="Country">Country 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". Veamos un ejemplo de uso de este tipo de controles: Indique su profesión (escoja todas las que procedan): <FORM> <P><INPUT TYPE="checkbox" NAME="medico">Médico <P><INPUT TYPE="checkbox" NAME="programador" CHECKED>Programador <P><INPUT TYPE="checkbox" NAME="abogado">Abogado <P><INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero <CENTER><INPUT TYPE="submit" VALUE="Enviar"></CENTER> </FORM> Aviso Si hubiésemos usado el atributo VALUE se sustituiría la palabra ON (que es la que se pone por defecto) por la que nosotros hubiésemos indicado en las cajas de selección con las opciones ’programador’ e ’ingeniero’. 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. <CENTER> <INPUT TYPE="image" NAME="envio" SRC="envio.gif"> 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. Cajas de texto multilínea: TEXTAREA Las cajas de texto multilínea o áreas de texto son unos campos que funcionan de manera similar a un editor de texto muy sencillo en el que el usuario puede escribir. Al contrario de lo que sucedía con las cajas de texto convencionales (<INPUT TYPE="text">), en esta ocasión será posible escribir varias líneas de texto, lo que es muy útil para campos en los que se requiere una respuesta extensa. Por ejemplo, si deseamos que el usuario pueda escribir el texto de un mail , o escribir una serie de comentarios largos, las áreas de texto serán tremendamente útiles. 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. Entre ellas únicamente podrá insertarse texto llano (sin ninguna etiqueta HTML) y éste será mostrado como contenido inicial del área de texto. Veamos un ejemplo: 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. Veamos un ejemplo que ilustra el uso de uso de este tipo de control: <FORM> Elija un color:<BR> <CENTER> <SELECT NAME="color"> <OPTION>Verde <OPTION>Negro <OPTION>Rojo <OPTION>Azul </SELECT> </CENTER> <INPUT TYPE="submit" VALUE="Enviar elección"> </FORM> 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. Veamos un ejemplo: <FORM> Lista de la compra:<BR> <CENTER> <SELECT NAME="compra" SIZE="6"> <OPTION VALUE="Fruta"> Fruta <OPTION VALUE="Verdura"> Verdura <OPTION VALUE="Ternera"> Ternera <OPTION VALUE="Mantequilla"> Mantequilla <OPTION VALUE="Salchichas"> Salchichas <OPTION VALUE="Pasta"> Pasta </SELECT> </CENTER> <P> <INPUT TYPE="submit" VALUE="Enviar lista de la compra"> </FORM> ACTION PARA ENVIO DE CORREO UTILIZANDO CLIENTE COMO INTERMEDIARIO: <form action=mailto:[email protected]…></form>
