Tutorial Formularios

Clase 1 ( Foro 1 )
Julio 2014
Jos Casanova
En este tutorial haremos un repaso bsico del tema de formularios y veremos como crear
y procesar un formulario con html y php. Para lorar esto es necesario usar estos dos
lenua!es" ya #ue con html creamos la vista del formulario y procesamos los datos del
mismo con P$P.
Requisitos
% &ener instalado el '()PP y al*n editor como +otepad ,,
% $aber le-do los apuntes del m.dulo 1 sobre html" php y formularios

Creando formularios
/eamos paso a paso como se crea y se procesa un formulario en html y php.
1 % (brir el panel de control de 'ampp y activar el apache 0 con el bot.n start 1.
2 % Crear una carpeta dentro de la carpeta rai2 de apache 0 en 3indo3s
C456ampp5htdocs5 1 llamada tutorial1 .
7 % (brir el +otepad,, " crear un nuevo archivo con el nombre foro1.php y uardarlo en la
carpeta #ue crearon.
4 % Copiar el contenido del modelo 0 disponible en el rupo " en el aula y en la pina de
8it$ub 1 en el nuevo archivo.
9 % Cambiar el titulo en la eti#ueta :title; por su nombre y apellido
< % (rear un t-tulo principal con :h1; #ue dia =&utorial 1> !unto con su nombre y
apellido
1
?% Crear un formulario con la eti#ueta :form;
@% (rear dentro de la eti#ueta el atributo methodA>et>
B % Crear dentro de las eti#uetas :form; un campo de entrada de te6to con la eti#ueta
:input C; . Para eso areamos el atributo typeADte6tD y el atributo nameADpalabraD . Entre
comillas se inresa el nombre 0atributo name1 con el cual va a ser enviado al servidor el
dato #ue el usuario de la pina inrese.
10 % Crear un input deba!o del anterior con typeADsubmitD " nameADenviarD y
valueADenviarD
11 % (hora podemos ver como va #uedando nuestro formulario. Para eso abrimos el
2
naveador 3eb 0 Eirefo6" Chrome1 y escribimos la direcci.n localhostCtutorial1Cforo1.php
12 % $asta ahora si completamos el formulario cuando clicFeemos en enviar lo *nico #ue
vamos a ver es como cambia la barra de direcciones. Para poder hacer alo con esos
datos necesitamos incorporar alo de php.
17 % En la eti#ueta :form; areamos el atributo actionADdatos.phpD. Con action
indicamos en #ue archivo se van a procesar los datos completados en el formulario.
14 % Creemos un archivo llamado datos.php en la misma carpeta #ue el anterior.
19 % (brimos y cerramos las eti#uetas de php :Gphp G;
1< % Hueo debemos aseurarnos de #ue haya sido pulsado el bot.n de enviar. Para eso
creamos el condicional como se ve en la imaen.
1? % Ii e6iste en la variable JK8E& el -ndice enviar usamos la funci.n echo para ver el
contenido escrito en el formulario de te6to. Para acceder a este dato usamos la variable
JK8E&LMnombreMN
3
1@ % Escribamos por *ltimo una advertencia en el archivo datos.php . Ii no e6iste
JK8E&LMenviarMN debe advertir #ue no ha sido pulsado el bot.n enviar. )s adelante esto
va a ser muy importante.
1B % Escriban de nuevo la direcci.n de antes en el naveador y prueben como funciona.
Ontenten a la hora de probarlo #ue la PQH est limpia" como en el paso 11.
Recomendaciones
)ucho cuidado con los punto coma" parntesis" llaves" corchetes" may*sculas"
min*sculas y comillas.
Por supuesto #ue esto es un e!emplo prctico de como se usa un formulario simple y hay
muchas cosas #ue se estn pasando por alto. Por eso es muy importante la lectura de los
apuntes y las consultas para complementar el aprendi2a!e.
Actividades
Comentar en los foros 0si estn en clic en clic" sino en fb1 a#uellas cosas #ue no se
entiendan.
(veriRen para #ue sirve y como se usa la eti#ueta :label; y prueben usarla en el
e!emplo.
Probar incluir otros tipos de formularios. 0 Heer el apunte para ms info1.
Ion bienvenidos comentarios" suerencias" correcciones" etc. sobre este tutorial%

Entrega
Entrear el tutorial resuelto =condimentado> con alo de lo #ue se pide arriba.
Comprimir 0 2ip" rar " ?2ip" como usten1 la carpeta #ue contiene los archivos y
nombrarla indicando #ue es foro1 nombre apellido y +(C. Por e!emplo4
foro1 S Jose Casanova S +(C Ian miuel.2ip
Enviarla v-a clic 0 mensa!er-a interna 1 o a !osecasanovaTclic.ob.ar indicando4 foro1"
nombre apellido y +(C en el asunto.
4