Está en la página 1de 15

Los Formularios

En cierta forma, los formularios nos permiten manejar el ingreso de los datos en una
aplicación WEB.

Por medio de estos verdaderos repositorios de datos, podemos enviar información


directamente al Servidor (Base de Datos) o bien, manejar información para ser procesada
en forma posterior.

La estructura general de un formulario es:

1. Etiqueta de inicio:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST">
2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos.
3. Botones de envío y/o de borrado.
4. Etiqueta de cierre </FORM>

Supongamos el siguiente ejemplo, denominado formulario.2.htm.


Los Formularios

Para lograr este despliegue de información, se deben seguir los siguientes pasos:
Los Formularios
Nombre: FORMULARIO.HTM

<head>
<title>Ejemplo Formulario con Validación en PHP</title>
</head>

<body>

En esta sección del formulario, solo se definen el inicio de la página html.


Recordar que un formulario es un SCRIPT inserto en una pàgina html.

Posterior a la etiqueta BODY, podemos definir el script:


Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />

• <form>: Indica el inicio del formulario.


• Action= “”: Entre comillas se indica el programa que va a tratar las variables enviadas
con el formulario. Por ejemplo una URL o mailto.
• Method="“: Indica el método de transferencia de las variables. Post, si se envía a través
del STDIO. Get, si se envía a través de la URL. .
• El tag <input> define la introducción de variables. Junto a estos TAG encontraremos los
siguientes atributos:

type="“: Indicará el tipo de variable a introducir.


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 carácteres a


introducir en ese campo.
size="" Seguido de un valor que limitará el numero de carácteres a mostrar en pantalla.
value="" Indica que no hay valor inicial del campo.
Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />

Atributo type="“: Indicará el tipo de variable a introducir.

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 numero de caracteres a mostrar en
pantalla.
• value="“: Indica que no hay valor inicial del campo.
Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />

Atributo type="“: Indicará el tipo de variable a introducir.

• Password: Indica que el campo a introducir será una palabra de paso o transitoria,
que por lo general se usa para validación. Mostrará asteriscos en lugar de letras
escritas. Sus atributos serán los mismos que para text, es decir:

• 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 numero de caracteres a mostrar en
pantalla.
• value="“: Indica que no hay valor inicial del campo.
Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />
Sexo:<br />
<input type="radio" name="sexo" value="Hombre"
checked="checked" />Hombre<br />

<input type="radio" name="sexo" value="Mujer" />Mujer<br /><br />

Atributo type="“: Indicará el tipo de variable a introducir.

• Radio: El campo se elegirá marcando de entre varias opciones una casilla circular.
Sus atributos son :

• value="“: Entre comillas se indicará el valor de la casilla.


• Checked: La casilla aparecerá marcada por defecto
Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />
……
Aficiones:<br />
<input type="checkbox" name="aficiones[]" value="Deportes" />Deportes<br />
<input type="checkbox" name="aficiones[]" value="Libros" />Libros<br />
<input type="checkbox" name="aficiones[]" value="Informatica" />Informatica<br />
<input type="checkbox" name="aficiones[]" value="Musica" />Musica<br /><br /><br />

Atributo type="“: Indicará el tipo de variable a introducir.

• Checkbox: El atributo se elegirá marcando de entre varias opciones una casilla


cuadrada. Sus atributos son :

• value="“: Entre comillas se indicará el valor de la casilla.


• Checked: La casilla aparecerá marcada por defecto.
Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />

Atributo type="“: Indicará el tipo de variable a introducir.

• Image: El atributo 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.


Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />

Atributo type="“: Indicará el tipo de variable a introducir.

• Hidden: No se puede modificar su valor ya que no está visible. Se manda siempre


junto al atributo value= seguido de su valor entre comillas.
Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />

• Atributo Name="“: Indicará el nombre que se asigna a un determinado campo o


atributo, equivale al nombre de variable que recepciona el valor ingresado
Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />
…….
Nivel Maximo de Estudios:<br />
<select name="grado">
<option value="Primaria">Primaria</option>
<option value="Secundaria" selected="selected">Secundaria</option>
<option value="Universitaria">Universitaria </option>
………
</select><br /><br />

• Los tags <select>.....</select> encierran los valores que podremos elegir a partir de
una lista. Los atributos que acompañan al 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.
• multiple Indica si se pueden realizar multiples selecciones.
Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />
…….
Comentarios:<br />
<textarea name="comentario" cols="30" rows="10">Sin
Comentarios</textarea><br /><br />

• Con los tags <textarea>;.....</textarea> definimos un texto de múltiples líneas para


ingresar un comentario. Los atributos que acompañan al tag de apertura son:

• name="" Nombre del campo.


• Cols="" Numero de columnas de texto visible.
• Rows="" Numero de filas de texto visible.
Los Formularios
<form action="form01.php" method="post">
<p>
Nombre: <br /><input type="text" name="nombre" /><br />
Direccion: <br /><input type="text" name="direccion" /><br />
Telefono: <br /><input type="text" name="telefono" /><br /><br />
…….
<input type="submit" value="Enviar" />
<input type="reset" value="Limpiar" /><br />
</p>
</form>
</body>
</html>

• Con los tags <input>, podemos definir los BOTONES de comportamiento del
formulario. Los atributos que acompañan al tag de apertura son:

• 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 incorporaran los botones. Normalmente, enviar y borrar.
Los Formularios
<html>
<head> // Si es que se pudo crear el arreglo $afi
<title>Ejemplo en PHP</title> // porque se haya activado al menos un checkbox
</head> // se imprime cada uno de sus valores
// La función isset() devuelve verdadero
<body> // si existe la variable especificada

<?php if(isset($afi)){
echo "<p>Tus aficiones:</p>\n<p>\n";
// Cada uno de los nombres de los controles del formulario for($x=0;$x<count($afi);$x++)
// de form01.html (propiedad name=) echo "- $afi[$x]<br />\n";
// Se reciben en el arreglo de sistema $_POST }
// si es que en el formulario se especificó el metodo post echo "</p>\n<p><a href='formulario.htm'><br
// de lo contrario se recibirán en el arreglo $_GET />[Regresar]</a></p>";
// Para mayor facilidad se crean variables locales
// con los valores recibidos en $_POST ?>

$nom = $_POST["nombre"]; </body>


$dir = $_POST["direccion"]; </html>
$tel = $_POST["telefono"];
$sex = $_POST["sexo"];
$gra = $_POST["grado"];
$com = $_POST["comentario"];
$afi = $_POST["aficiones"];

echo "<p>Tus datos :</p>\n";


echo "<p>\nNombre : $nom<br />\n";
echo "Dirección : $dir<br />\n";
echo "Teléfono : $tel<br />\n";
echo "Sexo : $sex<br />\n";
echo "Grado : $gra<br />\n";
echo "Comentario : $com\n</p>\n";