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.

2

Bases del uso del formulario.

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:

Cuerpo del
formulario.

Botones de
envío y para
limpiar los
campos

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

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.

CHECKED
Hace 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.

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

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

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>

5
4. áreas de texto.

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

<TEXAREA NAME=”nombre” ROWS=”líneas” COL=”columnas” >
</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:
<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>

6

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í:

<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:

<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.


7

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:

<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.


8

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:

<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 {

9
padding: 1em;
}

label {
float: left;
width: 6em;
}

</style>
</head>

<body>

<form action="">

<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)”>

11
Ejemplo 8:

<html>
<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>

12

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.

Ahora, 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

Más contenido relacionado

La actualidad más candente (16)

Destacado (20)

Similar a Formularios HTML (20)

Último (20)

Formularios HTML