Documente Academic
Documente Profesional
Documente Cultură
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
Siparaunaplantillamuysimplela"criba"delcontenidopropiamentedichoesunaoperacin
rpida,paraformularioslargosycomplejos(ynumerosos)resultaunavadifcilmente
practicableyenabsolutoprofesional.
Heaquelresultadoqueobtenemosconelcdigoquehastaahorahemos
examinado.
Esoestodoporestetutorial!!esperoquehallanaprendidoalgoxd
Echopara:
ElclanWhitehatsYECHOPOR:<blink>el_cellu5</blink>