05-Clase FORMULARIOS HTML

FORMULARIOS HTML
Los formularios son una característica del estándar HTML (lenguaje de marcas
hipertextual) que permite a los autores colectar información provista por los
visitantes. Estos formularios pueden ser útiles para recolectar información
personal, información de contacto, preferencias u opiniones, o cualquier tipo de
entrada por parte del visitante que el autor pueda necesitar
Un formulario puede ser insertado en un documento HTML mediante el tag

HTML form el cual actúa como contenedor para todos los elementos de entrada
(input). Toda la información recolectada por un formulario puede ser entregada
a un agente procesador que es usualmente especificado en el atributo
"action". Lo que el agente procesador hace con la información y cómo la
maneja es un tema que será tratado con los temas o script de php. Para
manejar datos de un formulario debe usar un script del lado serv*idor(en
nuestro caso PHP).
También puedes necesitar especificar cómo la información será enviada en el

valor del atributo "method": "post" (los datos son adjuntados al cuerpo del
formulario) o "get" (los datos son adjuntados a la URL (localizador uniforme de
recursos)). Se supone que el agente procesador conoce y maneja el método de
envío del formulario.
Un formulario simple puede tener la siguiente declaración:
<form method="post" action="pagina.php">
...Controles...
</form>
<form method="get" action="pagina.php">
...Controles...
</form>
ETIQUETAS USADAS CON FORMULARIOS
Cinco son solamente las etiquetas que el código HTML posee para definir
todos los elementos interactivos que un formulario puede presentar: <FORM>,
<INPUT>, <SELECT>, <OPTION> y <TEXTAREA>. Estas etiquetas, junto a un
número de modificadores o atributos, son suficientes para indicarle al
navegador cliente cómo debe recolectar la información, cómo debe manejarla
una vez recolectada y cómo debe interactuar con el servidor.
Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y

</FORM>, y debe ser ubicado en el cuerpo de cualquier documento HTML, es
decir, entre el par de etiquetas <BODY> y </BODY>.
Comando Descripción
ACTION el valor de este parámetro es la URL del programa o guión en el

Servidor Web utilizado para procesar la información recolectada.
METHOD puede asumir el valor GET o el valor POST, y definen la manera en

la cual los datos son transferidos al servidor.
Esos dos atributos son de uso obligatorio para cualquier formulario que
generemos, ya que establecen dónde enviar la información y cómo enviarla.
ELEMENTOS DE ENTRADA
La mayoría de los elementos de entrada son visuales y pueden interactuar con

el usuario. Su uso depende del tipo de control y también del tipo de información
que pueden recolectar. Los elementos de entrada de un formulario pueden ser
definidos usando cuatro tags: el tag HTML input, el tag HTML button, el tag
HTML select y el tag HTML textarea, dividiremos los controles de acuerdo con
su funcionalidad.
Tener en cuenta que el atributo "name" de cada control será el nombre

utilizado para identificar los datos por el agente procesador, y el valor
dependerá de la naturaleza del control (algunas veces, como en las casillas de
verificación o botones radio, será el contenido del atributo "value").
La etiqueta <INPUT>
<INPUT> es la segunda etiqueta más importante de los formularios. Se la

puede definir como una etiqueta multifunción, ya que con la misma podemos
crear "push buttons", "radio buttons", "check boxes", y simples recuadros para
ingresar texto. Posee ocho posibles parámetros:
ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE.
Pero no se asusten con tantos parámetros porque normalmente solo se utilizan

a lo sumo solo cinco. Los atributos cruciales para toda etiqueta <INPUT> son
NAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede
asumir los valores:
TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, IMAGE, and
HIDDEN;
De acuerdo al tipo de elemento que queramos representar.
ENTRADA DE TEXTO
Este control recopila información textual en una sola línea, lo que significa que
el usuario no podrá utilizar la tecla "enter" para ir a la siguiente línea. Este
control es insertado en documentos HTML usando el tag HTML input con el
valor "text" para el atributo "type".
<INPUT name="Nombre de elemento" type="Nombre de campo" value="Valor

predeterminado" >
<body>
<p>Ingresa texto: <input name="textoentrada" type="text" value="DIGITE
EL TEXTO"/> </p>
</form>
</body>
El valor pasado al agente procesador será el texto ingresado por el usuario, o

sea el contenido dentro de la caja de texto.
ENTRADA DE TEXTO CONTRASEÑA (PASSWORD)
Este control actúa exactamente como la entrada de texto de línea, con la

excepción de que este control "esconde" los caracteres mostrándolos como
puntos o asteriscos para evitar que los usuarios vean el texto ingresado. Es
comúnmente usado para el ingreso de contraseñas.
<body>
<p>Ingresa contraseña: <input name="contrasena" type="password"
/></p>
</form>
</body>

ENTRADA DE TEXTO DE MÚLTIPLES LÍNEAS
Este control permite a los usuarios ingresar texto en una o más líneas. Es
insertado utilizando el tag HTML textarea y puede ser usado para recolectar
párrafos, comentarios, cartas, etc. En este tag, el contenido será el valor inicial
del texto.
<title> EJEMPLO UNO TEXTAREA </title>
</head>
<body>
<p>Ingrese sus comentarios:<br /><textarea name="comentarios"
rows="2" cols="30">...comentario aquí;...</textarea></p>
</form>
</body>
Nota que los atributos "rows" y "cols" establecen las dimensiones de la caja de
texto y son requeridos por algunos DTDs (declaración de tipo de documento).
Atributos del textarea
cols: representa el número de caracteres que puede contener una línea
rows: representa el número de líneas
name: representa el nombre asociado con el cuadro de texto, que permite su

identificación en el par nombre/valor.
readonly: impide que el usuario modifique el texto predeterminado en el campo
value: representa el valor predeterminado que se enviará al script si el usuario

no ha escrito nada en el cuadro de texto.
<body>
<form action="pagina.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30" value="ELIZABETH
GUERRERO"
Readonly /><br>
Contrato:<br>
<textarea name="comentarios" rows="5" cols="60" readonly>
Por la presente ..............................
</textarea>
<br>
</form>
OPCIONES
Los autores también pueden permitir a sus visitantes escoger opciones

preestablecidas de una lista. Esto puede ser logrado usando uno de los tres
controles siguientes, que pueden construir diferentes tipos de listas de
opciones.
Casillas de verificación
La casilla de verificación es una opción simple que puede tomar uno de dos
valores: "marcado" o "desmarcado". Las casillas de verificación pueden ser
visualmente agrupadas como una lista de opciones, pero cada una de ellas es
tratada individualmente. Este control es insertado mediante el tag HTML input
con el valor "checkbox" para el atributo "type".
<body>
<p>Seleccione sus equipos :<br />
<INPUT TYPE="checkbox" NAME="cuervo" VALUE="YES"/>Colombia
<BR><INPUT TYPE="checkbox" NAME="gallina" VALUE="YES" />
Argentina
<BR><INPUT TYPE="checkbox" NAME="burro" VALUE="YES" />
Venezuela
<BR><INPUT TYPE="checkbox" NAME="vaca" VALUE="YES" />
Barcelona
</p>
</form>
</body>
Con el parámetro CHECKED le indicamos al navegador cual de todas las

opciones debe aparecer marcada por defecto.
<body>
<p>Seleccione sus equipos :<br />
<FORM>
¿Quiénes son malos?<BR>
<BR><INPUT TYPE="checkbox" NAME="cuervo" VALUE="YES" /> San Lorenzo
<BR><INPUT TYPE="checkbox" NAME="gallina" VALUE="YES" CHECKED /> River PLate
<BR><INPUT TYPE="checkbox" NAME="bostero" VALUE="YES" /> Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="rojo" VALUE="YES" CHECKED /> Independiente
</FORM>
</p>
</body>
Botones radio
Los botones radio funcionan en la misma forma que las casillas de verificación
con pequeñas diferencias: los botones radio que comparten un mismo nombre
conforman un grupo de opciones donde los usuarios no pueden seleccionar
más de una opción a la vez. Esto significa que cuando el usuario selecciona
una opción, el resto es automáticamente deseleccionado.
<body>
<p>Seleccione un equipo<br />
<INPUT TYPE="radio" NAME="equipos" VALUE="cuervo" />
San Lorenzo
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="gallina" />
River Plate
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="bostero" />
Boca Juniors
</p>
</form>
</body>
Para los botones radio el valor pasado al agente procesador es el contenido del
atributo "value", lo que significa que una lista de opciones con varias opciones
sólo pasará un valor.
<body>
¿Quién será el campeón del torneo argentino?<BR>
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="cuervo" /> San
Lorenzo
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="gallina" /> River
Plate
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="bostero" /> Boca
Juniors
<BR><INPUT TYPE="radio" NAME="equipos"
VALUE="rojos"CHECKED>Independiente
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="academia"/>
Racing Club
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="fortineros" />
Vélez Sarsfield
</p>
</form>
</body>
Listas
Estas lista pueden ser insertadas usando tres tags: el tag HTML select
(contenedor principal), el tag HTML option (declaración de opción) y el tag
HTML optgroup (grupo de opciones). Este tipo de lista puede ser usado como
una lista de botones radio o como una lista de casillas de verificación,
dependiendo de la presencia del atributo "multiple".
Para la creación de listas de elementos utilizamos la etiqueta <SELECT> en

lugar de la utilizada anteriormente <INPUT>, y a diferencia de esta última debe
ser cerrada con su para </SELECT>. Es decir:
<FORM>
<SELECT>
Elementos de la lista
</SELECT>
</FORM>
<body>
<SELECT NAME="equipos">
<OPTION VALUE="cuervo">San Lorenzo
<OPTION VALUE="gallina">River Plate
<OPTION VALUE="bostero">Boca Juniors
<OPTION VALUE="rojo">Independiente
<OPTION VALUE="academia">Racing Club
</SELECT>
</form>
</body>
La opción por defecto de una lista de este tipo es la primera <OPTION>

declarada. Si quisiéramos marcar otra opción por defecto lo hacemos con el
parámetro SELECTED de esta manera:
<body>
<SELECT NAME="equipos" />
<OPTION VALUE="cuervo" />San Lorenzo
<OPTION VALUE="gallina" SELECTED />River Plate
<OPTION VALUE="bostero" />Boca Juniors
<OPTION VALUE="rojo" />Independiente
<OPTION VALUE="academia" />Racing Club
</SELECT>
</form>
</body>
Listas Desplegadas
La construcción de una lista desplegada es bastante similar a la de una lista

desplegable, solo difieren en algunos parámetros. Para convertir la lista
desplegable de equipos en una lista ya desplegada utilizamos el parámetro
SIZE.
<body>
<SELECT NAME="equipos" SIZE=5 />
<OPTION VALUE="gallina" />River Plate
</SELECT>
</form>
</body>
El valor del parámetro SIZE indica exactamente cuántos elementos desplegar

simultáneamente. Si el valor del SIZE es menor al número total de elementos
de la lista, automáticamente aparecerá una barra de desplazamiento sobre el
lado derecho de la misma. Para verlo mejor indiquemos un SIZE=3 para la lista
de equipos:
<html>
<head>
<title>Prueba dos select</title>
</head>
<body>
<SELECT NAME="equipos" SIZE=3 />
<OPTION VALUE="gallina" />River Plate
</SELECT>
</form>
</body>
</html>
Múltiples
<html>
<head>
<title>Prueba dos select</title>
</head>
<body>
<p>Selecciona una sola opción, como en los botones radio:<br />
<select name="entradaselect">
<optgroup label="Entradas de texto">
<option>De una sola línea</option>
<option>Contraseña</option>
<option>Multilínea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas select</option>
</optgroup>
</select>
</p>
<p>Selecciona tantas opciones como desees, como en las casillas de
verificación (manteniendo presionada la tecla "Ctrl"):<br />
<select name="entradaselect[ ]" multiple="multiple">
<optgroup label="Entradas de texto">
<option>De una sola línea</option>
<option>Contraseña</option>
<option>Multilínea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas select</option>
</optgroup>
</select>
</p>
</form>
</body>
</html>
Para la primera lista sin el atributo "multiple", el valor pasado al agente

procesador será la opción seleccionada, pero para el segundo ejemplo el valor
pasado será una lista (array) conteniendo las opciones seleccionadas. Es por
ello, que para las listas con el atributo "multiple" presente, debes agregar al
nombre del control "select" los corchetes ("[ ]"). El valor individual pasado en
ambos casos es el contenido del atributo "value" si es que se encuentra
presente, y en su defecto el contenido del tag.
Tarea: crear cada uno de los formularios necesarios para ingresar la

información en la base de datos de sus proyectos.
Ejemplo completo de formularios
<BODY>
<FORM ACTION="pagina.php" METHOD=POST>
<table align="center" border="1">
<tr>
<td align="left" width="100">Nombre:
</td>
<td align="center" width="150"><INPUT NAME="nombre"
MAXLENGTH="25" TYPE="TEXT" VALUE="" />
</td>
</tr>
<tr>
<td align="left" width="100">Email:
</td>
<td align="center" width="150"><INPUT NAME="mail" MAXLENGTH="25"
TYPE="TEXT" VALUE="" />
</td>
</tr>
<tr>
<td align="left" width="100">Motivo:
</td>
<td align="center" width="150"><INPUT NAME="motivo"
MAXLENGTH="25" TYPE="TEXT" VALUE="" />
</td>
</tr>
<tr>
<td align="left" width="100"> Mensaje:
</td>
<td><TEXTAREA NAME="mensaje" ROWS=3 COLS=20>
</TEXTAREA>
</td>
</tr>
</TABLE>
</FORM>
</BODY>

05-Clase FORMULARIOS HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

05-Clase FORMULARIOS HTML

Cargado por

Copyright:

Formatos disponibles

FORMULARIOS HTML

Un formulario puede ser insertado en un documento HTML mediante el tag

También puedes necesitar especificar cómo la información será enviada en el

Un formulario simple puede tener la siguiente declaración:

<form method="post" action="pagina.php">

<form method="get" action="pagina.php">

ETIQUETAS USADAS CON FORMULARIOS

Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y

ACTION el valor de este parámetro es la URL del programa o guión en el

METHOD puede asumir el valor GET o el valor POST, y definen la manera en

La mayoría de los elementos de entrada son visuales y pueden interactuar con

Tener en cuenta que el atributo "name" de cada control será el nombre

<INPUT> es la segunda etiqueta más importante de los formularios. Se la

ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE.

Pero no se asusten con tantos parámetros porque normalmente solo se utilizan

De acuerdo al tipo de elemento que queramos representar.

<INPUT name="Nombre de elemento" type="Nombre de campo" value="Valor

El valor pasado al agente procesador será el texto ingresado por el usuario, o

ENTRADA DE TEXTO CONTRASEÑA (PASSWORD)

Este control actúa exactamente como la entrada de texto de línea, con la

El valor pasado al agente procesador será el texto ingresado por el usuario, o

ENTRADA DE TEXTO DE MÚLTIPLES LÍNEAS

Atributos del textarea

cols: representa el número de caracteres que puede contener una línea

rows: representa el número de líneas

name: representa el nombre asociado con el cuadro de texto, que permite su

readonly: impide que el usuario modifique el texto predeterminado en el campo

value: representa el valor predeterminado que se enviará al script si el usuario

Los autores también pueden permitir a sus visitantes escoger opciones

Con el parámetro CHECKED le indicamos al navegador cual de todas las

Para la creación de listas de elementos utilizamos la etiqueta <SELECT> en

La opción por defecto de una lista de este tipo es la primera <OPTION>

La construcción de una lista desplegada es bastante similar a la de una lista

El valor del parámetro SIZE indica exactamente cuántos elementos desplegar

Para la primera lista sin el atributo "multiple", el valor pasado al agente

Tarea: crear cada uno de los formularios necesarios para ingresar la

Ejemplo completo de formularios

También podría gustarte