Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 1!

"#
Formularios Web con HTML y PHP ver.4
Índice de contenido
1 Intro..................................................................................................................................................2
2 Elemento <form> de un formulario HTML.....................................................................................2
3 Dos archivos vamos a crear: el formulario.html la res!uesta.!h!.................................................2
" #am!os de te$to...............................................................................................................................3
% &otones de env'o..............................................................................................................................3
%.1 E(em!lo1. Mi color !referido...................................................................................................3
%.2 E(ercicio1. Mis favoritos...........................................................................................................)
* #asillas de verificaci+n.....................................................................................................................,
*.1 E(em!lo2. #asillas de verificaci+n. -has ido a.........................................................................,
*.2 E(ercicio2. In/redientes e$tras de una 0i11a..........................................................................12
) &otones de o!ci+n..........................................................................................................................12
).1 E(em!lo3. &otones de 3!ci+n. Test aritm4tica.......................................................................11
).2 E(em!lo35is. Test aritm4tica #orre/ido. I6...EL7E................................................................13
).3 E(ercicio3. &otones de o!ci+n. E$amen #. 8aturales............................................................1"
, E(em!lo". #uadros de Lista...........................................................................................................1%
,.1 9rchivo res!uesta con 0H0: e(em!lo".!h!............................................................................1)
,.2 E(ercicio". #uadros de lista !ara tu color favorito.................................................................1,
: Tra5a(o 6inal: Men; del D'a...........................................................................................................1,
12 E$tra E(em!lo %. #alculadora !ara sumar....................................................................................1:
11 E(ercicio %. 6inanciera de veh'culos.............................................................................................22
12 3<T=3........................................................................................................................................23
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia "!"#
1 Intro
$0iste &os +ormas 1ásicas &e iteractuar co ua págia 2e13 po&emos hacer clic so1re u
elace o eviar &atos e u +ormulario.
Los +ormularios se usa e la avegaci' ha1itual por págias 2e1 4i.e. Cua&o etramos e
uestro correo 2e13 iiciamos sesi' e youtube para su1ir u v*&eo3 1uscamos ua págia co
google3 o os i&eti+icamos e facebook para acce&er a uestra re& social3... siempre estamos evia&o
&atos me&iate los campos &e u +ormulario.
Los +ormularios &e ua págia 2e1 se &ise5a como el resto &e la págia3 emplea&o HTML
4Legua6e &e $ti7uetas &e HiperTe0to8.
2 Elemento <form de un formulario HTML
Para crear u +ormulario 1asta isertar eti7uetas <form> &e apertura y cierre e tu págia
9$B. To&os los cotroles 4campos &e te0to3 casillas &e veri+icaci'3 1otoes &e opci' o 1ot' &e
eviar8 7ue a5a&as etre las eti7uetas <form> y </form> +ormará parte &el +ormulario 7ue se
ev*a al servi&or 9$B.
$l elemeto <form> cueta co muchos atri1utos pero 1asta co utili-ar " &e ellos: action y
method.
Atributo action: i&ica al servi&or a 7u; págia 4u archivo8 &e1e &espla-arse cua&o el
usuario pulsa el 1ot' &e ev*o &el +ormulario. $s &ecir3 i&ica 7u; págia reci1irá la i+ormaci'
&el +ormulario. Por supuesto3 esta págia &e1e e0istir e el servi&or 9e1.
Atributo method: cotrola la +orma e 7ue se ev*a la i+ormaci' al servi&or y e0iste &os
m;to&os3 GET y POST. Co <$T se ev*a la i+ormaci' itro&uci&a por el usuario a&6utá&ola a
la =>L &espu;s &el sigo ??@. Co PA%T se ev*a los valores itro&uci&os e el +ormulario e el
cuerpo &e la solicitu& HTTP.
$l c'&igo siguiete crea u +ormulario 9$B ... 7ue aB o cotiee igB campo. Cua&o
a5a&amos los campos ormales e u +ormulario3 el archivo ?respuesta1.php? reci1irá me&iate el
m;to&o PA%T los &atos itro&uci&os e el +ormulario.
<form action="respuesta1.php"method="post">
aquí van los controles del formulario...
...
</form>
3 !os arc"ivos vamos a crear# el formulario."tml y la res$uesta.$"$
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia #!"#
Para to&os los +ormularios 7ue vamos a &ise5ar crearemos &os archivos.
Archivo_1.html. $l primer archivo cotiee el +ormulario &o&e el usuario itro&uce e campos la
i+ormaci' solicita&a y el 1ot' &e ev*o. $s u archivo HTML
Archivo_2.php $l segu&o archivo recupera los &atos &el +ormulario para tratarlos posteriormete
4i.e. mostrarlos e la patalla &el or&ea&or3 a5a&irlos a ua 1ase &e &atos3...8. $ste archivo
Icorpora a&emás &e c'&igo HTML3 otro legua6e &istito llama&o PHP3 &el 7ue ha1laremos más
a&elate.
Vínculo: %iempre &e1emos crear u elace etre los &os archivos...
Archivo_1.html → Archivo_2.php
C cotiuaci' vamos a presetar los campos o cotroles más comues 7ue po&emos usar e u
+ormulario.
" %am$os de te&to
$6emplo &e cua&ro &e te0to:
Los campos &e te0to3 tam1i; llama&os
cua&ros &e te0to3 so pro1a1lemete los
cotroles más cooci&os e cual7uier
+ormulario. %e crea por me&io &el elemeto
<input> y esta1lecie&o &os atri1utos: type igual a 'text” indica que el campo es tipo texto y
name igual a “color_favorito” será el nombre de la variable que almacene la dirección de
trabao que solicitamos rellenar.
<input t!pe="text" name="color#favorito">
$ los campos &e te0to el usuario puese escri1ir +rases &e te0to completas3 lo 7ue les hace
muy iteresates para pregutas a1iertas 4i.e. )irecci' &o&e tra1a6as8.
% (otones de env)o
Los 1otoes &e ev*o se usa e to&os los +ormularios. %o ecesarios para eviar
la i+ormaci' &el +ormulario al archivo.php receptor. %e crea por me&io &el
elemeto <input> y esta1lecie&o el atri1uto type e submit . $l te0to 7ue
aparece so1re el 1ot' se i&ica me&iate el atri1uto value=”Envialo Ya”$ ! por %ltimo$en
estos controles no necesitamos definir su atributo nombre &name'.
<input t!pe="submit" value="(nvialo )*">
5.1 Ejemplo1. Mi color preferido
Damos a crear u +ormulario 7ue te pregute por tu color pre+eri&o y luego lo muestre e
patalla.
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 4!"#
>ecuer&a3 ecesitamos " archivos3 uo HTML para el +ormulario y otro PHP para mostrar el valor
itro&uci&o.
Para ello a1re tu e&itor &e c'&igo +avorito 4Eompo-er3 Blue <ri++o3 Blue+ish3...8 e itro&uce el
siguiete c'&igo:
<html>
<head>
<title>(emplo 1. +ormulario, -i .olor +avorito</title>
</head>
<bod!>
<form method="/(0" action="respuesta1.php">
1.uál es tu color favorito2
<br>
<input t!pe="text" name="color">
<br>
<input value="(nvialo )*" t!pe="submit">
<br>
</form>
</bod!>
</html>
<uár&alo e tu carpeta ra*- como eemplo!"html y cierra el archivo.
%i itro&ucimos u color e el campo &e te0to y pulsamos el 1oto &e eviar3 o1teemos u
$>>A>. CB o +ucioa el 1ot' &e ?eviar@ ya 7ue o hemos crea&o la segu&a págia 2e13 la
7ue reci1e los &atos itro&uci&os e el +ormulario.
Como se ha i&ica&o e el +ormulario <form action="respuesta1.php"> sa1emos 7ue la
segu&a págia se llamará ?respuesta1.php@.
FC'mo po&emos recuperar la i+ormaci' &el color itro&uci&o e el +ormulario e u
segu&o archivoG %'lo co HTML HA BC%TC3 ya 7ue HA pue&e tra1a6ar co varia1les.
Hecesitamos escri1ir guioes co PHP3 un lenu!"e #e pror!m!ci$n %ue tr!b!"! #el l!#o #el
&ervi#or #e p'in!& (eb)* %ue e& c!p!+ #e m!ne"!r l!& v!ri!ble& %ue !lm!cen!n lo& #!to&
intro#uci#o& en el &ervi#or.
$ las pr'0imas l*eas vamos a a1rir ua pe7ue5a vetaa al legua6e PHP3 si tiees &u&as
&e mi e0plicaci'3 hay u tutorial &e PHP ameo y muy3 muy claro 7ue he ecotra&o &etro &e la
secci' &e i+ormática &el sitio 2e1 http:!!222.ricoastur.et!
%eguimos co PHP3 estos guioes o l*eas &e c'&igo se itro&ucirá &etro &el c'&igo HTML &e la
págia 2e13 y para separarlas &el resto &el c'&igo irá siempre &elimita&as por las eti7uetas &e
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia I!"#
apertura J<?php3 y &e cierre 3 ?>3.
$l c'&igo &e uestra págia es el siguiete3 itro&Bcelo e tu e&itor 2e1 y guár&alo como
respuesta!"php
<bod!>
0u color favorito es, <br>
<2php
echo 4#/(053color367
2>
</bod!>
</html>
FKue hace uestro gui' PHPG
<?php , i&ica 7ue iiciamos u gui' escrito e php.
echo , es u coma&o usa&o para mostrar e la págia 2e1 las pala1ras 4ca&eas &e te0to8 y!o
varia1les 7ue 7ueramos. Las ca&eas &e te0to &e1e ir etre comillas &i.e. echo 8hola mundo"7' las
varia1les o lo ecesita &i.e. echo 4x7'. %i pre+erimos3 para 7ue sea más claro el c'&igo usamos
par;tesis & ' para &elimitar el cotei&o 7ue vamos a mostrar e patalla 4i.e. echo &89ola
mundo"'78
$ uestro e6emplo el coma&o echo mostrará e la págia 2e1 el cotei&o &e la varia1le
L(<$TMJcolorJN3...pero F7u; es estoG Ho es &i+*cil3 ahora te lo e0plico...
#_$E%&'color'( es ua varia1le automáticamete crea&a por PHP y 7ue almacea el valor
&el JcolorJ itro&uci&o e el campo &e te0to. Fu poco raraG 1ueo3 ya te acostum1rarás... tiee
varios s*m1olo 7ue tam1i; te e0plico:
• # se emplea siempre e PHP para i&icar 7ue lo 7ue viee a cotiuaci' es ua varia1le.
• _$E%&' '( por7ue el m;to&o &e ev*o &el +ormulario elegi&o es <$T3 y los corchetes 7ue
cote&rá el om1re &el campo &e te0to.
• color por7ue es el om1re 7ue le &imos al campo &e te0to e el +ormulario4 atri1uto
ameO@color@83 y las comillas secillas 3 se usa siempre 7ue tra1a6amos co ca&eas
al+aum;ricas3 es &ecir3 te0tos.
• ,-. $l puto y coma siempre se usa al +ial &e las istruccioes PHP3 es impresci&i1le
poerla.
*Atento: PHP es superquisquilloso con las mayúsculas y minúsculas, para él 'A' y 'a' son distintas: si el
nombre de nuestro campo de teto es 'color', no podemos in!ocarlo en PHP como '"olor', 'co#or',....
$A%&'%() .
Chora ya teemos las &os archivos3 el primero es el +ormulario &o&e os hace la preguta so1re
uestro color pre+eri&o co u campo &e te0to para respo&erla y la segu&a ua págia llama&a
?respuesta1.php" 7ue mostrará el color elegi&o. Pero si a1res co u avega&or el +ormulario3
relleas el campo &e te0to co la pala1ra ?ara6a@ y lo ev*as pulsa&o el 1ot'3 /O APA0E1E
T2 0ESP2ESTA ?ara6a@ e págia 8respuesta1.php"...Fpor 7ueG
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia P!"#
3MPO0TA/TE: Bie3 si te +i6as el archivo ?respuesta1.php" tiee e0tesi' PHP3 estos archivos
&$lo &e pue#en interpret!r en el &ervi#or #e p'in!& (eb. Bie pero3 FKui; tiee u servi&or &e
págias 2e1 e su PCG...
Hoy e &*a esto es +ácil yQ gratuito. $l servi&or 2e1 más usa&o e el mu&o es CPCCH$3
tato e 9i&o2s como e Liu0. $ 9i&o2s e0iste varias suites gratuitas 7ue istala
CPCCH$ co u s'lo clicR e tu PC3 6uto co servi&ores &e 1ases &e &atos My%KL3 servi&or &e
Correo Mercury y servi&ores FTP File-illa.
=a &e las suites más cooci&as e 9i&o2s es 4AMPP 4gratu*to83 si la istalas3 to&as las
págias 2e1 &e1e guar&arse e la carpeta &e 9i&o2s ?c,:;*-<<:htdocs:@3 para 7ue os las
sirva el servi&or CPCCH$.
$ Liu03 y cocretamete e la &istri1uci' =1utu 4MCS es =1utu83 teemos ya
istala&o u servi&or CPCCH$3 y la carpeta &o&e &e1emos guar&ar las págias 2e1 es
?/var/)))/@. C&emás3 siempre &e1emos con#ecer permi&o& !#ecu!#o& para 7ue uestra págia
2e1 sea accesi1le &es&e cual7uier cliete 7ue la solici&e a trav;s &e u avega&or.
M5S 3MPO0TA/TE6 osotros siempre vamos a copiar to&as uestros archivos &e págias 2e13
sea HTML o PHP al or&ea&or &el pro+esor 7ue cueta co u servi&or CPCCH$3 a ua carpeta
comparti&a 7ue ecotrareis e /mi)eb/
CPCCH$ servirá las págias 2e1 7ue haya e esta carpeta.
A7/ M5S 3MPO0TA/TE6 T si 7uiero ver &e ua ve- mi +ormulario e acci'...FKue
HC<<AAAG
Bie3 a1re el avega&or 2e1 4i.e. Mo-illa Fire+o03 Chrome3...8 e tu PC y e el campo &e te0to &e las
&ireccioes =>L itro&uce la &irecci' IP &el servi&or &o&e está el +ormulario3 segui&a &e !mi2e1!
i.e.:
y verás to&as las carpetas &etro &e !mi2e1!3 avega etre ellas para ecotrar el archivo &el
+ormulario 7ue 7uieres a1rir y ha- clicR so1re ;l.
Ha- clicR e el eemplo1.html3 verás el +ormulario 7ue has &ise5a&o. >ellea el cua&ro &e te0to y
ev*a el +ormulario. Derás tu color +avorito escrito e la págia respuesta1.php .
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia /!"#
5.2 Ejercicio1. Mis favoritos
Te propogo u e6ercicio si mostrarte la soluci'3 as* compro1arás si has apre&i&o 1ie
c'mo crear tu primer +ormulario. Uimo...
T!re!6 Crea u +ormulario co los campos &e te0to 7ue ves e la captura y luego crea ua secilla
págia para mostrar los valores itro&uci&os.
%i has hecho 1ie el eercicio1 es;5aselo al pro+esor y cotiua co el tutorial.
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
ejemplo1.html
respuesta1.php
ejercicio1.html
ejecicio1.php
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia V!"#
* %asillas de verificaci*n
$s ua sola casilla 7ue se pue&e marcar o '3 segB lo 7ue seleccioemos. Para crearla el
elemeto <input> &e1e teer como atri1uto type=”chec*box”3 a&emás si 7ueremos 7ue
apare-ca por &e+ecto marca&a la casilla lo i&icaremos co chec*ed.
Las casillas &e veri+icaci' so i&eales para respuestas &el tipo %I!HA. %i ecesitamos pasar al
archivo.php algua i+ormaci' más Btil 7ue %W o HA lo i&icaremos e el atri1uto value 4i.e.
value="-useo del <rado"8.
6.1 Ejemplo2. Casillas de verificación. ¿has ido a...?
Damos a crear u +ormulario 7ue pregute si has esta&o e alguos museos...
Para ello el c'&igo HTML es:
<bod!>
<form method = "/(0" action = "eemplo=.php" >
>ombre, <input name = "nombre" > ! apellidos, <input name = "apellidos" >
<br> <br>
1al?una ve@ has ido....
<br>
al museo del <rado2 <input name = "prado" value =" -useo del <rado" t!pe = "checAbox" >
<br>
al Bceano?rafic de Calencia2 <input name = "oceano?rafic"
value = "Bceano?ráfico de Calencia" t!pe = "checAbox" >
<br>
<input value = "nCiaDo" t!pe = "submit">
<br>
</form>
</bod!>
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
ejemplo2.html
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia X!"#
<uar&a el archivo como ?eemplo+"html" y a cotiuaci' vamos a crear la págia &o&e
se presetará la i+ormaci' itro&uci&a e el +ormulario.
$l archivo ?eemplo+"php" recogerá las respuestas marca&as e las casillas y mostrará sus
valores 4value="-useo del <rado" y value="Bceano?ráfico de Calencia"8. Tam1i; mostrará
el om1re y apelli&os separa&os por u espacio etre ellos co esta l*ea:
<2php echo &4#/(053nombre36." ".4#/(053apellidos36'72>
F*6ate 1ie 7ue &espu;s &el om1re se a5a&e etre comillas u espacio y luego se a5a&e el
apelli&o. T +*6ate 7ue se usa el puto ?"? para conc!ten!r 4uir8 ca&eas e la istrucci' echo.
$sto sigi+ica 7ue se mostrará 6utos e la págia 2e1 como ua sola l*ea los tres 1lo7ues
separa&os por ?"@:
4#/(053nombre36 segui&o &e u espacio y luego 4#/(053apellidos36
$l c'&igo completo se muestra a cotiuaci'3 itro&Bcelo e tu e&itor 2e1 y guár&alo
como eemplo=.php .
<bod!>
<2php echo &4#/(05 3nombre3 6 . " " . 4#/(05 3apellidos3 6' 7 2>
ha ido a, <br>
<2php echo 4#/(05 3prado3 6 7 2>
<br>
<2php echo 4#/(05 3oceano?rafic3 6 7 2>
<br>
</bod!>
%e &e1er*a ver e u avega&or como e la captura siguiete:
%i to&o ha i&o 1ie estás prepara&o para hacer el e6ercicio"...
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
ejemplo2.php
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 1.!"#
6.2 Ejercicio2. Ingredientes extras de una i!!a
T!re!6 Crea u +ormulario 7ue pregute si el cliete &e ua pi--er*a 7uiere o o ciertos
igre&ietes e0tras. F*6ate e la siguiete captura:

Cua&o lo termies y +ucioe3 mB;straselo atu pro+esor...
) (otones de o$ci*n
Cosiste e u c*rculo 7ue se pue&e seleccioar o o. Hormalmete se usa varios 1otoes
6utos y S8LO &e pue#e &eleccion!r uno #e ello&. $s i&eal para las respuestas tipo T$%T co ua
sola respuesta posi1le &e etre varias opcioes. Los 1otoes &e opci' se crea co el elemeto
<input> y su atri1uto type=”radio”. $s importate 7ue to&os los 1otoes ?coecta&os@ e el
mismo grupo tega el mismo om1re 4atri1uto name8 . C&emás3 si 7ueremos 7ue uo &e los
1otoes apare-ca &e etra&a como marca&o se usa el atri1uto chec*ed. La i+ormaci' 7ue se
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
ejercicio2.html
ejercicio2.php
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 11!"#
pasa a la segu&a págia se pue&e itro&ucir e el atri1uto value="valor que quiera enviar al
seleccionar este botón"3 o1serva el siguiete e6emplo.
7.1 Ejemplo". #otones de $pción. %est aritm&tica
Damos a crear u
+ormulario co ua preguta tipo
test so1re aritm;tica. Ten#r' 9
re&pue&t!& po&ible& * &$lo &e
po#r' eleir un! #e ell!&. %e
mostrará siempre por &e+ecto la
primera opci' como marca&a
4ecesitaremos usar el atri1uto
chec*ed8. $ la siguiete
captura se muestra el +ormulario:
T el archivo respuesta
)I%$YA )$L FA>M=LC>IA
Itro&uce este c'&igo HTML e tu págia 9e1 y guár&alo e tu carpeta ra*- como
?eemplo,"html@:
<bod!>
<h=>(xamen tipo test de aritmetica</h=>
<form method="/(0" action="eemploE.php">
>ombre, <input name="nombre"> *pellidos, <input name="apellidos">
<br><br>
1. .uanto es EF&ExG' 2
<br>
a' 1H <input checAed="checAed" name="pre?unta1" value="1H" t!pe="radio">
<br>
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
ejemplo3.html
ejemplo3.php
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 1"!"#
b' =1 <input name="pre?unta1" value="=1" t!pe="radio">
<br>
c' 1G <input name="pre?unta1" value="1G" t!pe="radio">
<br>
d' >in?una de las anteriores respuestas<input name="pre?unta1"
value="nin?una de las respuestas mostradas" t!pe="radio">
<br>
<br>
<input value="nCiaDo" t!pe="submit"><br>
</form>
</bod!>
$0plicaci' &el c'&igo.
Como ya tiees cierto coocimieto e el mae6o &e +ormularios ir; a lo más importate:
1. Cl crear el +ormulario se muestra el atri1uto action co el om1re &el archivo
4eemplo,"php8 &o&e se eviará la i+ormaci' &el +ormulario.
2. F*6ate 7ue to&os los 1otoes &e opci' tiee el mismo atri1uto om1re
4name=-pre.unta!-8 &e esta +orma el +ormulario recooce 7ue los 1otoes perteece al
mismo grupo y o prmitirá 7ue se seleccioe simultáeamete más &e uo.
3. $ ca&a 1ot' &e opci' se &e+ie u atri1uto value &i+erete. $ste atri1uto cotiee el
te0to 7ue se eviará al archivo.php respuesta &el +ormulario cua&o se ha elegi&o ese 1ot'
&e opci'.
3MPO0TA/TE: %i hici;ramos u e0ame tipo test co varias pregutas s'lo ha1r*a 7ue om1rar
ca&a grupo &e 1otoes como name="pre?unta1"3 name="pre?unta="3 y as* sucesivamete.
Chora vamos co la págia llama&a ?eemplo,"php@7ue recoge la i+ormaci' itro&uci&a e el
+ormulario. La captura siguiete te la muestra.
$l c'&igo siguiete cosigue recuperar la i+ormaci' &el +ormulario y mostrarla e patalla.
Itro&Bcelo e tu e&itor 2e1 y guár&alo e tu carpteta ra*- como ?eemplo,"php@.
<bod!>
(l alumno <2php echo 4#/(053nombre36 . " " . 4#/(053apellidos36 7 2>
ha respondido que EF&ExG' es,
<br>
<2php echo 4#/(053aritmetica36 7 2>
<br>
<br>
</bod!>
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 1#!"#
Ho hay mucho 7ue e0plicar3 el primer gui' PHP muestra e patalla me&iate el coma&o
echo el om1re y apelli&os3 como ya hemos visto e otros e6emplos. T la l*ea <2php echo
4#/(053aritmetica3672> muestra el valor &el 1ot' 4atri1uto value="1H"8 7ue se ha seleccioa&o.
)espu;s &e hacer este e6emplo so1re 1otoes &e opci' para hacer pregutas tipo test3 uo
se hace siempre la misma preguta. :Po#rí!mo& &!ber &i l! re&pue&t! &eleccion!#! e& correct!;
Por supuesto 7ue s*3 pero para ello ecesitamos mae6ar otros coma&os &e PHP3 las setecias
3< ELSE
%o secillas &e emplear3 e el siguiete e6emplo lo a1or&amos.
7.2 Ejemplo"'is. %est aritm&tica Corregido. I(...E)*E
C5a&e el c'&igo PHP a tu págia eemplo,"php y guár&alo como 8eemplo,bis"php".
<bod!>...
<bod!>
(l alumno I.. ha respondido que I.es, <br/>
<2php echo 4#/(053aritmetica367
if &4#/(053aritmetica36===1' Jecho &"0u respuesta es correcta"' 7 K
else Jecho &"<br> <ero 0u respuesta es Lncorrecta"' 7 K
2>
</bod!>
La setecia IF...$L%$ 4%I...%I HA8 +ucioa as*:
S3 =se cumple esta co&ici'> ?hago estoZ@ %I HA ?hago lo otroZ@
$ el c'&igo aterior:
Si la varia1le 4#/(053aritmetica36 es igual a "1 muestra e patalla ?Tu respuesta es correcta@ &i no
muestra ?Pero Tu respuesta es Icorrecta@.
%i lo has ete&i&o3 [[[ $HHA>CB=$HC3 estás e el camio &e ser u programa&or...\\
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
ejemplo3bis.php
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 14!"#
*.+ E"ercicioA. Botone& #e opci$n. EC!men 1. /!tur!le&
T!re!6 Crea u e0ame &e Ciecias Haturales como se muestra e el siguiete +ormulario y
guár&alo como eercicio,"html
$l archivo 7ue recoge las respuestas se llamará eercicio,"php$ a cotiuaci' te muestro ua
captura &e al la&o:
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
ejercicio3.html
ejercicio3.php
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 1I!"#
Iteta 7ue este archivo
eercicioE.php muestre si las respuestas so
correct!& o no3 como se muestra e la captura
siguiete.
<uár&alo como eercicio,bis"php
V $6emplo4. Cua&ros &e Lista
Tam1i; llama&os cu!#ro& #e
li&t! #e&ple!ble& so cotroles
7ue muestra e ua lista varios
elemetos. Fucioa
1ásicamete igual 7ue los
1otoes &e opci' agrupa&os3
&o&e s'lo se pue&e escoger uo
&e ellos.
Creamos ua archivo llama&o
e"emplo9.html y &e+iimos e ;l
u +ormulario co sus atri1utos
action y method 1ie &e+ii&os
como hacemos siempre.
$l cua&ro &e lista es u cotrol
u tato especial3 ya 7ue se
&e+ie co ua eti7ueta
<select> y ates &e cerrarla
&e+iimos ca&a elemeto &e la
lista co la eti7ueta DoptionE.
Co Eompo-er po&emos usar
los meBs para isertar
automáticamete los cua&ros &e
lista e u +ormulario....
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
ejercicio3bis.php
ejemplo4.html
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 1P!"#
)espu;s &e ha1er &e+ii&o
u +ormulario3 isertamos
u Cua&ro &e lista
4Selection Li&t si el meB
está e igl;s83 como se
muestra e la captura:
%e a1rirá u cua&ro &e
&iálogo co las
propie&a&es &el cua&ro &e
lista. Lo primero 7ue
teemos 7ue hacer es
#eFinir el nombre &el
cua&ro &e lista3 como se
muestra e la captura:
C cotiuaci' in&ert!mo& el primer elemento #e l! li&t! &esplega1le hacie&o clicR e el 1ot'
?3n&ert!r Opci$n@ y teclea&o el om1re &el primer elemeto 7ue aparecerá e mi lista. >epetimos
el proceso para isertar los I elemetos &e esta lista. Para &e+iir los elemetos &e la lista sigue los
pasos mostra&os e la captura &e arri1a.
%i to&o ha sali&o 1ie te&remos u c'&igo html como el siguiete:
]html^
]hea&^ ]title^cua&ros(&e(lista]!title^
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 1/!"#
]!hea&^
]1o&y^
]1ig^Busca&or &e coches]!1ig^]1r^
]1r^
FKu; precio &e coches estás 1usca&oG]1r^
]1r^
]+orm metho&O_get_ actioO_e6emploI.php_^
]select ameO_precios_^
]optio^]"I.. euros]!optio^
]optio^"I..`I... euros]!optio^
]optio^I...`1.... euros]!optio^
]optio^1....`".... euros]!optio^
]optio^^".... euros]!optio^
]!select^
]iput ameO_eviar_ valueO_$viar_ typeO_su1mit_^]1r^
]!+orm^
]!1o&y^
]!html^
8.1 Crchivo respuesta co PHP: e"emplo9.php
Creamos u archivo co esta om1re y e0tesi' 4PHP8 co algB e&itor &e programaci' 4i.e.
Blue+ish3 1lue gri++o3 Eompo-er33...8. Isertamos u te0to iicial e0plicativo y luego isertamos el
c'&igo PHP para mostrar e patalla. Ho voy a resolver esta parte pues ya lo hemos hecho
e0tesamete e ateriores e6emplos. Te &e6o la captura +ial &el archivo respuesta para 7ue lo
hagas igual.
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 1V!"#
8.2 Ejercicio+. Cuadros de lista para tu color favorito.
Crea &os archivos e"ercicio9.html y e"ercicio9.php co el +ormulario 7ue ves a cotiuaci':
X Tr!b!"o <in!l6 MenG #el Hí!
Crea u +ormulario 7ue muestre el meB &el &*a e u re&t!ur!nte3 te&rás 7ue pe&ir los siguietes
&atos:
1. HBmero &e la mesa 4cua&ro &e te0to8
". Hom1re y apelli&os &el camarero 7ue atie&e la mesa 4cua&ro &e te0to8
#. Tres primeros platos a elegir uo &e ellos 41otoes ra&iales8
4. Tres segu&os platos a elegir uo &e ellos 4l1otoes ra&iales 8
I. Tres 1e1i&as a elegir ua &e ellas. 4lista &esplega1le8
P. $0tras como pa3 mate7uilla3 puro pu&ie&o escoger los 7ue 7uieras. 4co 1otoes
checR1o08
<uar&a el archivo como trabao_final"html e tu carpeta ra*-
Crea otro archivo para mostrar el meB escogi&o y guár&alo como ?trabao_final"php@ e la
misma carpeta ra*-.
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia 1X!"#
1. ECtr! E"emplo I. 1!lcul!#or! p!r! &um!r
Damos a crear u +ormulario 7ue os pi&a itro&ucir &os Bmeros3 para mostraros luego e el
archivo respuesta su suma...
$l archivo &el +ormulario se llamará e"emploI.html y e ;l los valores a sumar se itro&uce por
me&io &e &os cua&ros &e te0to:
• Campo &e te0to S: n!meO@0@
• Campo &e te0to T: n!meO@y@
$ la captura se muestra u 1ot' uevo 7ue vale para L3MP3A0 los &atos 7ue se ha itro&uci&o
e los cua&ros &e te0to. %e hace co el BOT8/ 0ESET.
$ste 1ot' &e 0ESET lo pue&es ecotrar e la misma lista &e isertar campos &e u +ormulario
6usto &e1a6o &el 1ot' &e ev*o....
Te muestro el c'&igo HTML &el e"ercicioI.html
<html>
<head>
<title>.alculadora</title>
</head>
<bod!>
<form action="eercicioM.php" method="?et">
(sta calculadora suma dos n%meros,<br /><br />
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia ".!"#
Lntruduce los valores,<br />
; , <input t!pe="text" name="x" /> <br />
) , <input t!pe="text" name="!" /> <br /><br />
<input t!pe="submit" value=".alcular" />
<input t!pe="reset" value="Norrar" />
</form>
</bod!>
</html>
$ cora-' &e la calcula&ora está e el archivo &e PHP 7ue llamaremos e"ercicioI.php Te muestro
ua captura &el c'&igo para 7ue lo hagas...
<html>
<head>
<title>Oesultado de la suma</title>
</head>
<bod!>
<2php
4@=4#/(053x36F4#/(053!367
echo "Pa suma de " . 4#/(053x36 . " ! " . 4#/(053!36 . " es, <br />". 4@ 7
2>
</bod!>
</html>
ECplic!ci$n6 &e+io ua ueva varia1le L- igual a la suma &e S e T3 luego muestro e
patalla S3 T y a.... y se aca1' el misterio.
J J J /O 1OP3ES EL 18H3GO HE A003BA) no !pren#er'& n!#! * el #í! #el eC!men /O
POH05S HA1E0LO K K K K
11 E"ercicio I. <in!ncier! #e vehículo&.
Das a crear el +ormulario &e ua empresa +iaciera 7ue presta &iero para 7ue los clietes pue&a
comprar coches. $l +ormulario &e etra&a se llamará e"ercicioI.html
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia "1!"#
Datos !ara dise>ar los controles:
Campo &e te0to Hom1re: n!meO@om1re@
Campo &e te0to Cpelli&os: n!meO@apelli&os@
Campo &e te0to $&a&: n!meO@e&a&@
Campo &e te0to Precio &el coche: n!meO@precio@
Urea &e Te0to )irecci': n!meL@&ireccio@
Cua&ro &e Li&t! He&ple!ble:
om1re &e la lista: n!meO ?etra&a@
Los valores pasa&os para ca&a caso so:
1.3... euros →v!lueO 1...
I3... euros →v!lueO I...
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia ""!"#
1.3... euros →v!lueO 1....
)atos &e los botone& #e opci$n agrupa&os:
n!meO@mesuali&a&es@
Dalores pasa&os por los 1otoes
1" meses al Vb QR v!lue O 1"
#P meses al 1Pb QR v!lue O #P
Crchivo &e respuesta al +ormulario3 e"ercicioI.php
Te muestro &os capturas3 ua coce&ie&o el pr;stamo y otra egá&olo.
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#
PRÉSTA! "#$#%A"!
PRÉSTA! &!$&#"'"!
Formularios HTML y PHP para 1º Bachillerato TIC ver. 4 págia "#!"#
C'&igo PHP:
➢ 0ecoi#! #e H!to&: Primero teemos 7ue recuperar los &atos itro&uci&os por el
solicitate3 om1re3 e&a&3 precio &el veh*culo3 etra&a 7ue pagaremos3 y Bmero &e
mesuali&a&es. T to&as los mostramos tal y como aparece e cual7uiera &e los &os págias
respuesta &e arrri1a.
➢ An'li&i& #e lo& #!to&6
 Ho se le coce&erá pr;stamo e igB caso S3 su e&a& o supera los "I a5os.
 %i cumple co el criterio &e la e&a&...
 La cuota a pagar ca&a mes será igual al precio &el veh*culo meos lo 7ue pagamos &e
etra&a3 to&o &ivi&i&o etre las mesuali&a&es y aplica&o el iter;s correspo&iete
4Vb e el caso &e 1" mesuali&a&es o 1Pb e el caso &e #P mesuali&a&es8
cuot!LinterM& N=precioOentr!#!>Pmen&u!li#!#e&
 Los itereses so +áciles &e aplicar3 por e6emplo para u iter;s &el Vb se har*a los
siguietes cálculo: 1uot! L 1)QRN=precioOentr!#!>Pmen&u!li#!#e&
Pi&t! 1: cua&o ua varia1le 4i.e. el iter;s8 pue&e tomar uo &e etre &os valores segB la opci'
escogi&a po&emos usar la estructura IF.... para asigarle los valores.
1" A=T>A
$vi&etemete3 cual7uiera 7ue haya visto u +ormulario sa1e 7ue os hemos salta&o alguos
cotroles muy usa&os3 campos para cotrase5as3 ev*o &e archivos3 1otoes varios.... pero HA es
uestro empe5o verlos to&os. Hay cietos &e e6emplos e págias 2e1 para apre&er3 ahora la
pelota está e tu T$,C)A si 7uieres seguir...
Tam1i; es evi&ete 7ue co la i+ormaci' 7ue se itro&uce e los +ormularios se pue&e
hacer muchas más cosas 7ue simplemete presetarlas e patalla. Te he mostra&o por ua re&i6a
el uso &e PHP como corrector &e e0ámees3 pero si piesas u poco3 recoecerás la misma utili&a&
cua&o te coectas para leer tu correo3 ya 7ue s'lo se te permite acce&er a tu cueta &e correo
cua&o itro&uces el par usuario!cotrase5a correctos. $sto es ua aplicaci' más &e PHP3 los login
o auteti+icacioes &e usuario. , as* hay muchas3 muchas mas aplicacioes. Como he &icho ates3 si
te gusta verás 7ue es mucho más +ácil &e lo 7ue te ha pareci&o hasta ahora3 y es 7ue los comie-os
siempre so lo más &i+icil.
I.$.%. Clara Campoamor &e M'stoles( )ept. Tecolog*a. Pro+. ,avier %a- Leyva ./!.#!1#