Partes del formulario Etiqueta <FORM> La etiqueta <FORM> presenta los siguientes atributos: Comando ACTION METHOD ENCTYPE Descripción El valor de este parámetro es la URL del programa o script en el Servidor Web utilizado para procesar la información recolectada. Puede asumir el valor GET o el valor POST, y definen la manera en la que los datos son transferidos al servidor. Este atributo está reservado para que la información viaje en forma encriptada a través de Internet. Campos de entrada Etiqueta <INPUT> Define la introducción de variables y puede ser definida como una etiqueta multifunción, ya que con la misma podemos crear push buttons, radio buttons, check boxes y simples recuadros para ingresar texto. Para personalizar este control, podemos modificar sus características o atributos, los cuales se listan a continuación: Atributos de input Align: Se usa sólo con un tipo de imagen. Los posibles valores son top, middle y bottom. Checked: Provoca que el estado inicial de un botón o caja de selección sea marcado. Maxlength: Coloca el tamaño máximo de caracteres que un usuario puede entrar en un campo de texto. El valor por omisión es ilimitado. Name: Especifica el nombre simbólico usado en la transferencia de salida de la forma. Size: Específica el ancho el campo mostrado al usuario.
Sus valores son: Src: Define el archivo fuente para la imagen cuando el atributo Type es colocado en image. Text: Indica que el campo a introducir será un texto. Sus atributos son: - maxlenght="" Seguido de un valor que limitará el número máximo de caracteres a introducir en ese campo. - size="" Seguido de un valor que limitará el número de caracteres a mostrar en pantalla. - value="" Indica que no hay valor inicial del campo. - Type: Define que tipo de entrada es posible. Checkbox: Usado para recolectar datos que puedan tener múltiples valores a la vez. Hidden: Especifica valores configurados por la forma, sin ayuda del usuario. Image: Envía la forma una vez que el usuario presiona la imagen, con las respectivas coordenadas x/y más el nombre del objeto. Password: El usuario ingresa texto aquí, pero éste no se visualiza en pantalla. Radio: Recolecta información donde uno y sólo un valor puede ser seleccionado. Reset: Reinicia la forma a sus valores por omisión. El atributo value muestra la cadena de caracteres que el usuario verá por pantalla. Submit: Envía los valores de la forma. El atributo value muestra la cadena de caracteres que el usuario verá por pantalla. Image: El campo contendrá el valor en coordenadas del punto de la imagen que haya pinchado. Atributo obligatorio: src="" Entre comillas escribiremos el nombre del archivo de imagen. Hidden: El visitante no puede modificar su valor ya que no está visible. Se manda siempre junto al atributo value= seguido de su valor entre comillas. Observa el siguiente ejemplo:
Código <HTML> <HEAD> <TITLE>Ejemplo Formularios</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba@ipn.mx" METHOD="POST"> Texto: <INPUT TYPE="text" NAME="nombre"><BR> Password: <INPUT TYPE="password" NAME="contra"><BR> Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre <INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR> Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto <INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche <BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML> Visualización
Campos de selección Etiqueta <SELECT></SELECT> Este par de etiquetas define una lista de elementos, de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos. Los atributos que acompañan a la tag de apertura son: name="" Indicará el nombre del campo de selección. Size="" Indicará el número de opciones visibles. Si le asignamos 1, la selección se presentará como un menú desplegable. Si le asignamos un valor mayor, se presentará como una lista con barra de desplazamiento. Múltiple: Indica si se pueden realizar múltiples selecciones. Las diferentes opciones de la lista se indicarán mediante la tag <option> que puede acompañarse del atributo selected para indicar cuál es la opción que aparecerá por defecto. Si no lo especificamos, siempre será la primera de la lista. Observa cómo sería el código y la visualización. Código <HTML> <HEAD> <TITLE>Ejemplo Formularios</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba@ipn.mx" METHOD="POST"> <SELECT NAME="Colores" MULTIPLE> <OPTION VALUE="r">Rojo</OPTION> <OPTION VALUE="g">Verde</OPTION> <OPTION VALUE="b">Azul</OPTION> </SELECT> <BR><BR> <SELECT NAME="Colores" SIZE="1"> <OPTION VALUE="r">Rojo</OPTION> <OPTION VALUE="g">Verde</OPTION> <OPTION VALUE="b">Azul</OPTION> </SELECT> <BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML>
Visualización Áreas de texto <TEXTAREA> Con las tags <textarea>;...</textarea> definimos un texto de múltiples líneas para que el visitante pueda incluir un comentario junto a sus datos. Junto a la tag de apertura pueden aparecer los siguientes atributos: name="" Nombre del campo Cols="" Número de columnas de texto visible Rows="" Número de filas de texto visible Y su código y visualización sería de la siguiente forma:
Código <HTML> <HEAD> <TITLE>Ejemplo Formularios</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> <TEXTAREA COLS=20 ROWS=10 NAME="Texto"> </TEXTAREA> <BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML> Visualización
Botones Se definen mediante la tag <input> a la que le acompañan los atributos: type="" Seguido de submit para enviar los datos del formulario y seguido de reset para borrar los datos que se han introducido. Value="" Indica el texto que incorporarán los botones. Normalmente, enviar y borrar. Y su código y visualización sería de la siguiente forma: Código <HTML> <HEAD> <TITLE>Ejemplo Formularios</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba@ipn.mx" METHOD="POST"> <BR> <INPUT TYPE="button" VALUE = Botón > <BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML> Visualización
Botones SUBMIT y RESET El SUBMIT y RESET son los botones para enviar y limpiar el formulario. Existen los siguientes: Botón de envío: Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar al destino donde será procesada la información, se hace uso del botón SUBMIT. <input type="submit" value="enviar"> Como se observa, tan sólo especificamos que se trata de un botón de envío (type="submit") y hemos de definir el mensaje del botón por medio del atributo value. Botón de borrado: Este botón nos permitirá borrar el formulario por completo en el caso de que el usuario desee rehacerlo desde el principio. Su estructura es: <input type="reset" value="borrar"> A diferencia del botón de envío (indispensable en cualquier formulario), el botón de borrado es optativo y no es empleado frecuentemente. Datos ocultos En algunos casos, aparte de los propios datos enviados por el usuario, puede resultar práctico enviar datos definidos por nosotros mismos que ayuden al programa en su procesamiento del formulario. Por un ejemplo: <input type=hidden name="sitio" value="www.pagina.com"> Esta etiqueta incluida dentro de nuestro formulario enviará un dato adicional al programa encargado de la gestión del formulario y podríamos, a partir de este dato, dar a conocer al programa el origen del formulario o algún tipo de acción a llevar a cabo (una redirección, por ejemplo). A continuación te mostramos un ejemplo completo con el uso de algunos campos con cajas de texto, botones de opción y de selección, donde el usuario puede definir sus preferencias o enviar sus datos al servidor. Observa con mucho cuidado.
Código <form action="mailto:correo@ipn.mx" method="post"> Nombre <input type="text" name="nombre" size="30" maxlength="100"> Email <input type="text" name="email" size="25" maxlength="100" value="@"> Sexo <input type="radio" name="sexo" value="masculino" checked> Hombre <input type="radio" name="sexo" value="femenino"> Mujer Estudios <select name="utilización"> <option value="1"> Bachillerato <option value="2"> Licenciatura <option value="3"> Maestría <option value="4"> Posgrado </select> Comentarios: <textarea cols="30" rows="7" name="comentarios"></textarea> <input type="checkbox" name="recibir_info" checked> Deseo recibir notificación de las novedades. <input type="submit" value="enviar formulario"> <input type="reset" value="borrar todo"> </form>
Visualización Ya que conoces los controles que pueden incluirse en la página web para lograr una mayor interacción con el usuario, podrás darle un mayor impacto a tu sitio. No obstante, y con todo este despliegue de tecnología, te has preguntado: a dónde va y cómo se procesa toda esa información? Te sugerimos consultar algunos datos sobre CGI para iniciar con este tema.