Echopor:el_cellu5el_cellu5@hackxcrack.

es

TUTORIALHTML
PrimeroquetodoeltutorialvadirectamenteparalosintegrantesdelclanWhitehats
quecomosabemosestamoseneltemadeaprendizajedeHTML.
Empezareconloqueactualmenteestamosestudiandoquesetratasobrelaelaboracin
deformulariossuspartesycomofuncionan
Bien!!

INTRODUCCIONALOSFORMULARIOS
Antesdeentrardellenoeneltema,esconvenientedecirquelasdificultadesdecomprensin
delasplantillasHTMLsejustificandebidoaqueconstituyenuncasosingulardentrodela
programacinhipertextualnormal.Enefecto,lamayorpartedeloselementosHTMLdeque
disponemospermitealvisitantevisualizarloscontenidosdeunsitio,peronointeractuarconl.
Meexplico,larelacinusuario/pginaesunidireccionalyesttica.
Conlasplantillasdeformularios,eslocontrario,elusuariopuedeinteractuarconelsitio
enviandosuscomentarios,haciendopeticionessinnecesidaddeescribirmensajesporcorreo
electrnico,firmandoenellibrodevisitas,contestandoaencuestasysondeos,etc.Todoello
defineunarelacinbidireccional,queesposibleslograciasalaintervencindeprogramas
residentesenservidoresWWW:setratadelosdenominadosCGIoCommonGateway
Interface(InterfazComndePasarela).Estohaceposibleloquenopodrahacersesise
actuaradesdeelladoclient.Esdecir,lagestindelasplantillasdepende,enrealidad,msdel
servidorquedelaprogramacinHTMLpropiamentedicha.
ParaqueunformularioHTMLfuncioneesnecesariodisponerdeunCGIresidenteenelpropio
servidoroenotrositio.Elwebnoescatimalosserviciosgratuitosdestinadosjustamenteaeste
fin.AmenudosetratadeCGIgratuitosquelascomunidadesvirtuales(Geocities,Tripod,
Xoom,etc.)ponenadisposicindesuspropiosciudadanos,peronofaltanservicios
especficosgratuitosnorelacionadosconestascomunidades.Paralosmsdespabilados,es
aconsejabledirigirsealafuenteeimportarpersonalmenteenelpropioservidorunodelos
numerososprogramasCGIdistribuidosgratuitamenteporlospropiosautoresyrecopiladosen
sitiosespecficos.
Adecirverdad,unformulariopuedeelaborarsetambinsinpasarporunCGI,perolas
desventajasylmitesquecomportaesteprocedimientonopuedenobviarseporloqueno
deberaadoptarsesinoencasosdeextremanecesidadmasadelantelesexplikoalgosobre
esto

LaelaboracindeunaplantillaHTMLconstadedosfases:

impostacindelasmarcasparalacreacindelaplantilla,deloscamposydelbotnde
envo;
elaboracindeunscriptCGIenservidor(ollamamientodeunscriptyaimpostado)

LASMARCASDELOSFORMULARIOS

LasplantillasseintrodujeronenlaversinHTML2.0.
Veamosahora,condetalle,todaslasmarcasqueparalaelaboracindeformulariosprev
HTML4.0.
<FORM></FORM>
Estamarcaabreycierralaplantillayrecogeelcontenidodelamisma,quepuedevariarsegn
unaseriedemarcasqueveremosmsadelante.Noesposibleinsertarunaplantilladentrode
otra.Dichodeotromodo,losformulariosnopermitenanidamientos.
Lasintaxisusualdelasmarcascitadaseslasiguiente:
<FORMmethod="get|post"action="http://www.ejemplo.com/cgibin/nome_script.cgi">
SiMETHODestimpostadocomoGETlosdatosseenvanalservidoryseseparanendos
variables.
Paraestemtodoelnmeromximodecaracteresquepuedecontenerelformularioesde
255.
peroUtilizando"method=post",elscriptCGIrecibedirectamentelosdatossinunproceso
previodedescodificacin.Estacaractersticahacequeelscriptpuedaleerunacantidad
ilimitadadecaracteres.
Unavezimpostadalaprimeramarca<FORM>delaplantilladelformulario,esposible,siempre
ycuandoelscriptCGIlopermita,crearalgunoselementosqueresultandegranutilidadpara
unaadecuadagestindelosdatos:

<INPUTTYPE=HIDDENNAME=MAILFORM_SUBJECTVALUE="Asuntodelformulario">
Estecdigodeterminaelasunto(subject)delmensajequerecibirsporcorreoelectrnicocon
elcontenidodelformulario.Esmuytilquelosmensajesrecibidosllevenespecificadoel
asunto,nosloparaquienesusanfiltrosdeseleccindelcorreo,sinotambinparaordenarla
correspondencia.

<INPUTTYPE=HIDDENNAME=MAILFORM_URLVALUE="http://www.ejemplo.com">
Estecdigoesmuytilyaque,unavezrellenadoyenviadocorrectamente,elformulario
respondeconunapginaHTMLsucesiva,dentrodelacualesposibleincluircualquiertipode
comentario.Lomsnormalesvisualizarunapginadeconfirmacin"Tuformulariohasido
enviadocorrectamente",perosepuedetambinmandardirectamentealaportadadelsitio.Se
tratadecomandosnoestndarquevaransegnelCGIutilizado.Portanto,elcdigoantes
descritonofuncionaentodosloscasos,sinonicamenteconelejemploprcticoqueos
mostraremosmsadelante.
Lamarcadebaseparaladefinicindeloselementosdeunformularioes<INPUT>,quese
utilizaparaagregarbotones,mensdeseleccin,contraseas,etc.a<INPUT>selepueden
asignarlos8valoresqueanalizamosacontinuacin:

type="TEXT"
<INPUTtype="TEXT"name="nombre"maxlength="40"size="33"value="Tunombre">
Estevalorcrealostpicoscamposdetexto,enlosquegeneralmentesesolicitandatostales
comoelnombreoladireccindecorreoelectrnico.Esunvalorusadosobretodopara
informacionesnopredefinidas,quecambiancadavez.TEXTtienetresatributosopcionales,
presentestambinenelejemplo:maxlength(elnmeromximodecaracteresquepuedeser
introducidoenelcampoyquenoesposiblesuperar),size(laanchuradelacadenadentrode
lapgina)yvalue(visualizauntextopordefectodentrodelacadena).EJEMPLO:

((elvaluetambinlopuedendejarvacio

paraquenolesaparescanadaenlacaja))

type="PASSWORD"
<INPUTtype="PASSWORD"name="nombre"maxlength="40"size="33">
Estecampodetextofuncionacomoelanterior,peroconunapequeadiferenciaquesupropio
nombreindica:cuandoseescribedentrodelcajetnblanco,nosevenloscaracteressinolos
clsicosasteriscosdelascontraseas.Enrealidad,losdatosnosecodificandeningnmodo
porloqueestamarcanoconsigueeliminarlainseguridaddefondo.

type="CHECKBOX"
<INPUTtype="CHECKBOX"name="edad"value="s"checked>
Esteatributoseutilizapararepresentardatosdetipo"s/no"y"verdadero/falso".Crea
pequeascasillascuadradasquehayquepuntearodejarenblanco.Silacasillaest
punteada,INPUTrestituyeunvaloralCGI;encasocontrario,norestituyeningnvalor.Value
impostadoen"s"significaquepordefectolacasillaestpunteada.Checkedcontrolael
estadoinicialdelacasilla,enelmomentodecargarlapgina.

EJEMPLO:

type="RADIO"
<INPUTtype="RADIO"name="calificacin"value="suficiente">
<INPUTtype="RADIO"name="calificacin"value="bueno">
<INPUTtype="RADIO"name="calificacin"value="excelente">
Esteatributotienefuncionessimilaresalvistoanteriormente,perocontienemsposibilidades
deseleccin.Seleccionandounadelasvocespresentes,ysiempreycuandotengantodasun
valor"name"idntico,lasrestantessedeseleccionanautomticamente.

Ejemplo:

type="SUBMIT"
<INPUTtype="SUBMIT"value="Enva">
Elclsicobotndeenvoqueremiteelformulariocontodosucontenido.Ladimensindel
botndependedelalongituddeltexto.

type="RESET"
<INPUTtype="RESET"value="Reinicio">
Botnquevuelveaimpostartodoelformularioeliminandolosdatosintroducidos.

type="IMAGE"
<INPUTtype="IMAGE"src="pulsante.gif">
Funcinsimilaraladelatecla"ENVA"peroconladiferenciadequeenlugardelbotndela
opcinpordefecto,apareceunaimagen.

TEXTAREA
<TEXTAREAcols=40rows=5WRAP="physical"name="comentario"></textarea>
TEXTAREAseutilizaparaintroducircomentariosocamposqueprevnmuchaslneasde
texto.Laanchuraseimpostacon"cols"ylaalturacon"rows".WRAP="physical"establece
que,enelcasodequeeltextointroducidosuperelaanchuradelaventana,saltedelnea
automticamente.
EJEMPLO

SELECT
<SELECTsize=1cols=4NAME="calificacin">
<OPTIONselectedvalue=ninguna>
<OPTIONvalue=bueno>Bueno
<OPTIONvalue=suficiente>Suficiente
<OPTIONvalue=excelente>Excelente
</select>
SELECTesunelementoquepermitelacreacindelistasconvariasposibilidadesde
seleccin.Ennuestroejemplo,hemoshipotizadoquesesolicitaunacalificacinsobreunsitio
web.
EJEMPLO:

Muybienestoeslosonalgunasmarcasparaunformulariocgi

Formularios sin CGI

Comoyahemossealadovariasvecesenestaseccin,elusodeformulariosHTMLproduce
mejoresresultadoscuandoseacompaadeunprogramaCGIresidenteenservidor.Detodas
formas,estonoexcluyelaposibilidaddeutilizarformulariostambinsinelauxiliodeCGI.
ParaenviarunaplantillaempleandoexclusivamentelasmarcasqueHTMLponeadisposicin,
debemosinsertarunencabezamientosimilaralsiguiente:
<formaction="mailto:nome@provider.com"method="post">
dondeenlugarde"nome@provider.com",debesintroducirtudireccindecorreoelectrnicoa
laquequieresquelleguenlosformulariosyarellenados.
Elmayorinconvenientedeestaeleccinresideenlafaltadeformatacindelcontenidodel
formulario,aspectoenelque,porelcontrario,elCGIresultamuyeficaz.Cuandounformulario
esenviadoalservidor,elvalordecadaunodeloscontrolescorrespondientesestincluidoen
unacadenaindividual.Dichacadenaestcompuestaporparesdevaloresnombrevaloryest
delineadapor"&"comerciales.Alamismaseleasignantodoslosvaloresdeloselementos
denominados,enunaespeciedeconcatenacin.
Heaqu,acontinuacin,elconfusoresultadodeunformularioenelque,sinpasarporunCGI,
sehanintroducidoalgunosdatospersonales:
Nombre=Massimiliano+Valente&Email=webmaster@html.com&ciudad%27=Roma&edad
%25
mientrasqueconunCGIhabramosobtenidoelsiguienteresultado:
(Nombre)el_cellu5
(Email)webmaster@html.com
(Ciudad)Roma
(Edad)25

Siparaunaplantillamuysimplela"criba"delcontenidopropiamentedichoesunaoperacin
rpida,paraformularioslargosycomplejos(ynumerosos)resultaunavadifcilmente
practicableyenabsolutoprofesional.

Crear un formulario simple

Empecemoscreandounformulariomuysimpleenelquefigurenelnombrey
apellidos,ladireccindecorreoelectrnicoyuncomentariosobreelsitio.
pormotivosdeaprendizajenolesdejouncdigoterminadodeun
formulario
Bienveamosqucampospersonalizaryculesdejar,porelcontrario,
inalteradosparauncorrectofuncionamientodelformulario.
<FORMACTION=http://www.ejemplo.com/code/mailform/mailform.pl.cgi
METHOD=POST>
EstecampodebepermanecerinalteradodadoqueinvocaelCGIpresenteen
elservidordelservicio.
<INPUTTYPE=HIDDENNAME=MAILFORM_IDVALUE="Val_7743">
Estecamposemodificasloporloqueserefierealcdigodeidentificacin
"Val_7743",quesesustituyeconelcomunicadoporelserviciogratuito
mediantecorreoelectrnico.Estesencilloprocedimientoesfundamental
paraquetuformulariollegueatubuzndecorreoynoaldeotrapersona.
<INPUTTYPE=HIDDENNAME=MAILFORM_SUBJECTVALUE="Mi
primerformulario">
Estecampodefineelasuntodelmensajequetellegarporcorreo
electrnicoenelmomentodelenvoconelcontenidodelformulario.Enlugar
de"Miprimerformulario",puedesusarlafrasequekieras
<INPUTTYPE=HIDDENNAME=MAILFORM_URL
VALUE="http://www.ejemplo.com/index.php">
Estecampoindicalapginawebquedebervisualizarsetraspulsarelbotn
"Enva".
<inputtype=textNAME=MAILFORM_NAMEsize=33>
Estecampodebepermanecerinalterado(noporloquerespectaalas
dimensiones,obviamente)yaqueintroduceenelmensajequenosllegar
porcorreoelectrnicoesenombreenelcampodelremitente.
<inputtype=textNAME=MAILFORM_FROMsize=33>
Estecampodebepermanecerinalterado(noporloquerespectaalas
dimensiones,obviamente)yaquepermiteobtenerenel"replyto"del
mensajequeelformularioenva,ladireccindequienharellenadola
plantilla.
<INPUTTYPE=SUBMITVALUE="Enva">
Estecampoesnecesarioparaexpedirelmdulo,peronosesaledelas
reglasgeneralesdelosformularios.

Heaquelresultadoqueobtenemosconelcdigoquehastaahorahemos
examinado.

Esoestodoporestetutorial!!esperoquehallanaprendidoalgoxd
Echopara:
ElclanWhitehatsYECHOPOR:<blink>el_cellu5</blink>