Formularios HTML

1

Formularios

TEMAS

Introducción a los formularios. Cajas de texto. Áreas de texto. Opciones. Listas. Checkbox. Botones de control de formularios. Botones de comando. Otros atributos para formularios.

OBJETIVOS ESPECÍFICOS

Usar objetos gráficos con acciones específicas para interactuar con el usuario.

Desarrollar documentos dinámicos.

ACTIVIDADES

Desarrollar un formulario que solicite datos para la inscripción a una biblioteca.

Crear un formulario que solicite datos para acceder a una cuenta de correo gratuito.

1. Introducción a formularios.

Los formularios son herramientas para la entrada de datos que realiza el usuario y que posteriormente será procesada y/o almacenada en el servidor.

Para procesar la información recibida mediante un formulario se requiere un programa que se aloja en el servidor Web, llamado CGI (Common Gateway Interface). También es posible procesar la información mediante páginas ASP (Active Server Pages), JSP (Java Servers pages) o PHP (acrónimo recursivo que significa “PHP Hypertext Preprocessor” y que fue inicialmente PHP Tools o Personal Home Pages Tools). Mediante alguno de estos programas se incorpora los datos recibidos por el formulario a una base de datos en el servidor o alguna otra respuesta, consistente en una página que se implementa en el servidor.

Los formularios están formado por una serie de controles asociado a un tipo concreto de dato y cuyo resultado final es una lista de variables (identificado por su nombre) y valores asignados a las mismas, que son los que viajan por la red hasta el servidor o viceversa.

Bases del uso del formulario.

2

Todo formulario debe tener el atributo ACTION que apunta a un ejecutable cgi-bin en el servidor que lo procesa. Este ejecutable lo único que recibe son pares del tipo NOMBRE=VALOR, en donde NOMBRE (name) es el identificador del campo de ingreso y VALOR (value) es el valor ingresado por el usuario.

Partes del formulario.

<FORM ACTION=”NombreArchivoEjecutable” METHOD=”POST | GET”>

Cuerpo del formulario. Botones de envío y para limpiar los campos.

</FORM>

Cuerpo del formulario.

El cuerpo del formulario contiene varios campos de ingreso que pueden ser:a) Ingreso de texto (de una línea o multilínea).b) Selección de una opción (menú desplegable o una serie de opciones para

seleccionar una).c) Seleccionar varias opciones (checkbox).

Ejemplo 1:

El resultado del formulario anterior se muestra a continuación:

Botones de envío y para limpiar los campos

Cuerpo del formulario.

3

2. Cajas de texto.

Para una línea se define mediante:<INPUT TYPE=”text” NAME=”nombre”>

3. Atributos para INPUT.

NAME=”…”Define el nombre del campo retornado al servidor al ser enviado el formulario y debe estar presente para todos los elementos input, excepto cuando TYPE=”submit” o TYPE=”reset”. Multiples TYPE=”submit” pueden tener diferentes nombres para identificar cuál botón de envío fue presionado.

TYPE=text | password | checkbox | radio | submit | reset | hidden | image | file | range | scribble | jot

El valor por omisión es TYPE=”text” .

VALUE=” …”Para TYPE=” text | password “ VALUE define el texto que será retornado, con la diferencia de que con password no se mostrará el texto ingresado; Para TYPE=” checkbox | radio “, define el valor retornado de la lista seleccionada; para TYPE=” submit | reset “, define la etiqueta del botón.

CHECKEDHace aparecer la opción como elegida por omisión.

SIZE= número [ pt | in | cm | mm | em | px ]Define el tamaño físico del campo de texto, expresado en caracteres.

MAXLENGTH= número [ pt | in | cm | mm | em | px ]Define el número máximo de caracteres aceptables en el ingreso.

ALING = [ top | middle | bottom | left | right ]. Define la posición de la imagen.

MIN=”…”. Valor mínimo para un ingreso de TYPE=range.

4

MAX=”…”. Valor máximo para un ingreso de TYPE=range.

SRC=”…” . URL de una imagen usada de fondo para ingreso con TYPE=scribble.

DISABLED=”…”. Para prohibir el ingreso o modificación de datos.

ERROR=”…” Define el texto a mostrar si el valor para INPUT no sea válido.

LANG=”…” Lenguaje. Los códigos de lenguaje se definen en RFC1766.

DIR= [ ltr | rtl ]. Dirección de la escritura.

ID=”…”. Identifica el contenido, para ser referenciado por HREF.

CLASS=”…”. Identifica el estilo definido mediante una hoja de estilo asociada.

Ejemplo 2:

<font size="4" face="verdana"><form name="form2" action="nombreX.php" method="post"> <p>Ingrese su nombre:<br> <input type="text" name="nombre" size="30" maxlength="20"> </p> <p>Su dirección:<br> <input type="text" name="direccion" size="30" maxlength="20" dir="rtl"> </p> <p>Su password:<br> <input type="password" name="password" size="10" maxlength="5" > </p></form></font>

4. áreas de texto.

Para ingresar varias líneas de texto. Se define mediante:

<TEXAREA NAME=”nombre” ROWS=”líneas” COL=”columnas” >

5</TEXTAREA>

Ejemplo:Su comentario:<br><TEXAREA NAME=”comentario” ROWS=”4” COL=”50” ></TEXTAREA>

Atributos:

NAME=”…”. Define el nombre del campo retornado al servidor.

ROWS=”n”. Número de filas del textarea.

COLS=”n”. Número de columnas del textarea.

WRAP=[ on | off | virtual ]. Controla el hecho de que las palabras sean enviadas a la línea siguiente si no caven en la línea actual, dentro del textarea.

ALIGN= [ top | middle | bottom | left | right ]. Posición del texto en el textarea.

DISABLED Impide que los contenidos del textarea sean modificados.

ERROR, LANG, DIR, ID y CLASS son otros atributos.

Ejemplo 3:<font size="4" face="verdana"><form name="form3" action="nombreX.php" method="post"> <p>Código:<br> <textarea name="mensaje" rows="8" cols="50" disabled> <html> <head> <title>Pruebas</title> </head> <body> <h3> Esto no puede modificarse </h3> </body> </html> </textarea></form></font>

5. Opciones.

Una alternativa para que el usuario pueda elegir una sola opción entre varias es el caso de radio buttons. Este se define así:

6<INPUT TYPE=”radio” NAME=”nombre” VALUE=”valor” > todos los cuales comparten el mismo nombre pero tienen distintos valores. Al momento del envío del formulario, se envía el nombre y el valor de la opción elegida.

Ejemplo 4:

<font size="4" face="verdana"><form name="form_botones" action="nombreX.php" method="post"> <p>Sexo:<br> <input type="radio" name="sexo" value="masc">Masculino <br> <input type="radio" name="sexo" value="fem">Femenino <br></form></font>

La opción que aparecerá seleccionada se marca dándole el atributo CHECKED.

<input type="radio" name="sexo" value="fem" CHECKED >Femenino

Atributos:

SELECTED. Especifica que esta opción estará seleccionada por omisión.

VALUE=”…”. Valor asignado al botón.

DISABLED Impide que el usuario seleccione la opción.

SHAPE=”…” Define la forma del símbolo usado para mostrar que la opción fue elegida o la imagen definida por el atributo SRC.


6. Listas.

Otra forma de que el usuario pueda seleccionar una opción entre varias es usar un menú desplegable. Al ser enviado el formulario al servidor, lo que se envía es el nombre del SELECT seguido del valor (VALUE) de la opción seleccionada.

Ejemplo 5:

7

<select> <option value ="sydney">Sydney</option> <option value ="melbourne">Melbourne</option> <option value ="cromwell">Cromwell</option> <option value ="queenstown">Queenstown</option></select>

La opción que aparecerá seleccionada se marca dándole el atributo SELECTED.

<option value ="cromwell" SELECTED>Cromwell</option>

Atributos:

NAME=”…”. Nombre del campo.

SIZE=”n”. Número de opciones visibles.

MULTIPLE. Admite seleccionar varias opciones a la vez.

SRC=”url”. Identifica un URL de una imagen que será mostrada en vez de los textos de OPTION.

DISABLED. Prohibe que el este menú sea alterado por el usuario.

UNITS=[píxeles | em ]. Unidades para WIDTH y HEIGHT.

ALIGN=[ top | middle | botom | left | right ] Posición del texto en la caja.

WIDTH=”n” y HEIGHT=”n”. Ancho y alto del SELECT.


7. Checkbox.

Para permitir al usuario seleccionar varias opciones a la vez, se utiliza checkboxs, que se muestran como pequeños cuadraditos que aparecen al contado de un texto y que se pueden seleccionar o deseleccionar de manera independiente, haciendo clic sobre ellos.

Ejemplo 6:

8<html><head><title>My Page</title></head><body><form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"><div align="center"><br><input type="checkbox" name="option1" value="Milk"> Milk<br><input type="checkbox" name="option2" value="Butter" checked> Butter<br><input type="checkbox" name="option3" value="Cheese"> Cheese<br><br></div></form></body></html>

Ejemplo 7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>

<title>Input - checkbox and radio</title><style type="text/css" media="all">

body {font: 100% arial, helvetica, sans-serif;

}

fieldset {padding: 0 1em 1em 1em;

}

legend {padding: 1em;

}

label {float: left;width: 6em;

}

</style></head>

<body>

<form action="">

9

<fieldset><legend>Films you like</legend>

<div><label for="drama">Drama</label><input type="checkbox" name="drama" id="drama" value="drama" /></div><div><label for="action">Action</label><input type="checkbox" name="action" id="action" value="action" /></div><div><label for="comedy">Comedy</label><input type="checkbox" name="comedy" id="comedy" value="comedy" /></div><div><label for="horror">Horror</label><input type="checkbox" name="horror" id="horror" value="horror" /></div><div><label for="scifi">Sci-fi</label><input type="checkbox" name="scifi" id="scifi" value="scifi" /></div>

</fieldset>

<fieldset><legend>Your age</legend>

<div><label for="lt20">19 or under</label><input type="radio" name="age" id="lt20" value="lt20" /></div><div><label for="20to39">20 to 39</label><input type="radio" name="age" id="20to39" value="20to39" /></div><div><label for="40to59">40 to 59</label><input type="radio" name="age" id="40to59" value="40to59" /></div><div><label for="gt59">60 or over</label><input type="radio" name="age" id="gt59" value="gt59" /></div>

</fieldset>

</form>

</body></html>

10

8. Botones de control de formulario.

El botón de envío permite enviar el formulario al ACTION del formulario. Se declara usando <INPUT TYPE=”submit” VALUE=”texto”>, donde texto es lo que se aprecia en la cara del botón.

<INPUT TYPE=”submit” VALUE=”Enviar comentarios”>

El botón de limpiar permite devolver al formulario sus valores iniciales. Se declara usando <INPUT TYPE=”reset” VALUE=”texto”>, donde texto es lo que se aprecia en la cara del botón.

<INPUT TYPE=”reset” VALUE=”Enviar comentarios”>

9. Botones de comandos.

Permiten ejecutar ciertas instrucciones de JavaScript al generar un evento onclick sobre dicho botón.

<INPUT TYPE=”button” value=”+” onClick=”Sumar(frmX)”>

Ejemplo 8:

<html>

11<head><title>JavaScript</title></head><body><script languaje="javascrpt"></script><form name="frmX"> <input type="text" name="x1" size="6"> + <input type="text" name="x2" size="6"> <input type="button" value="=" onClick="Sumar(frmX)"> <input type="text" name="r" size="10"></form></body> </html>

10. Elemento <BUTTON>.

A partir de la implementación de los estándares HTML 4.0 contamos con varias etiquetas nuevas para construir formularios, siendo BUTTON una de ellas, bastante util por cierto. Esta etiqueta proporciona un método único para la implementación de cualquier tipo de botón de formulario. Sus principales atributos son:

type= " tipo ", que puede tomar los ya conocidos valores submit (por defecto), reset y button.

name= " nombre ", que asigna un nombre identificador único al botón. value= " texto ", que define el texto que va a aparecer en el botón.

La principal ventaja que aporta estas etiquetas es que ahora vamos a poder introducir dentro de ellas cualquier elemento de HTML, como imágenes y tablas.

Ejemplo 9:

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform"> <button name="boton_1" type="button"> <img src="beso.gif" width="75" height="30" border="0" alt="enviar"> </button></form>

11. Etiqueta <FIELDSET> … </FIELDSET>.

Hasta ahora, no disponíamos de ninguna manera de agrupar visualmente varios controles, si no echábamos mano de elementos que no son del formulario, como tablas o imágenes.

12Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se mostrara un rectángula alrededor de los mismos. Además, podemos indicar un título por medio de la etiqueta LEGEND, que admite el parámetro align="left / center / right / top /bottom", lo que nos permite alinear el título horizontal y verticalmente. La única restricción es que deberemos introducir el conjunto en una celda de tabla con un ancho determinado, ya que si no lo hacemos así el recuadro abarcara todo el ancho de pantalla disponible.

Ejemplo 10: (Sólo para I. Explorer)

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform"> <table width="300" > <tr> <td> <fieldset> <legend align="left"><font color="blue" face="verdena" size="5px">Caja de texto</font></legend> <font face="verdena" size="4px"> pon tu nombre:<br></font> <input type="text" size="35" maxlength="25"> </fieldset> </td> </tr> <table></form>

ACTIVIDAD 1

Desarrollar un formulario que solicite datos para la inscripción a una biblioteca.

ACTIVIDAD 2

Crear un formulario que solicite datos para acceder a una cuenta de correo gratuito (por ejemplo, Hotmail). En ambos casos trate de utilizar todos los elementos de formulario.

Formularios HTML

Education

Transcript of Formularios HTML