Académique Documents
Professionnel Documents
Culture Documents
Prof.JohnnyDiaz
DefinicindeFormularios
Conjunto decontrolesquerellenaelusuario
yquesonenviados alservidor paraser
tratados.
Etiqueta<FORM></FORM>
FormatoBsico:
<FORMACTION=accinMETHOD=mtodo>
Elementosdelformulario(controles)
</FORM>
AtributosdeFORM(I)
ACTION:indicalaforma enquese
procesarnlosdatosdelformulario. Estose
haratravsdeunURI(Uniform Resource
Identifier ).Esobligatorioespecificarlo.
ElURIpuede ser:
Un CGI.
Unadireccindecorreoelectrnico.
AtributosdeFORM(II)
METHOD:indicaelmtodoHTTPquese
utilizarparaenviarlosdatosdelformulario
alservidor. Esunatributoopcional.
Losmtodos podrn ser:
POST: los datos se mandana la entrada
estndardelprogramaquelostrata.
GET(pordefecto):losdatossepasanconel
URI.
AtributosdeFORM(III)
Ejemplos:
<FORM
ACTION=mailto:micorreo@empresa.com.pe
METHOD=post>.....</FORM>
<FORMACTION=http://www.miwebsite.com/cgi
bin/proceso.phpMETHOD=post>.....
</FORM>
EntradadeDatos
Etiqueta<INPUT>
Definegranvariedaddetiposdecamposde
entradadedatos.
FormatoBsico:
<INPUTTYPE=tipoNAME=nombre
VALUE=valor>
AtributosdeINPUT
TYPE:tipodecontrolqueseutilizarpara
introducirlosdatos.
NAME:nombre delcontrolqueestamos
definiendo. Sepasaralprograma quetrata
elformulario juntoconelvalordelmismo.
VALUE:engeneral,valorseleccionado
paraesecampodelformulario.
TextoCorto(I)
<INPUT TYPE=text...>
Seusaparaintroducircadenascortasde
texto:nombre, apellidos,telfono,fecha,...
Otros atributos:
SIZE:tamaodelcuadrodetexto.
MAXLENGTH:nmeromximodecaracteres.
TextoCorto(II)
Ejemplo:
Nombre:
<INPUTTYPE=textNAME=nombre
VALUE=PedroSIZE=15MAXLENGTH=25>
TextoOculto(I)
<INPUT TYPE=password ...>
Seusaparaintroducirpalabrasqueno
queremos quesemuestrenenpantalla.En
lugardelasletrasseimprimeelcarcter*.
Otros atributos:
SIZE:tamaodelcuadrodetexto.
MAXLENGTH:nmeromximodecaracteres.
TextoOculto(II)
Ejemplo:
Clave:
<INPUTTYPE=passwordNAME=password
VALUE=passSIZE=15MAXLENGTH=25>
CasillasdeVerificacin(I)
<INPUT TYPE=checkbox...>Opcin
Seusacuando selequierenofrecer
diferentesopciones alusuario ystepuede
seleccionarunnmero indeterminadode
ellas.
Otros atributos:
CHEKED:opcinmarcadapordefecto.
CasillasdeVerificacin(II)
Ejemplo:
Ocupación:
<INPUT TYPE=checkboxNAME=ocupacionVALUE=EstudiaCHECKED>Estudia
<INPUTTYPE=checkboxNAME=ocupacionVALUE=Trabaja>Trabaja
CasillasdeSeleccin(I)
<INPUT TYPE=radio...>Opcin
Seusacuando selequierenofrecer
diferentesopciones alusuario ystepuede
seleccionarslounadeellas.
Otros atributos:
CHEKED:opcinmarcadapordefecto.
CasillasdeSeleccin(II)
Ejemplo:
Sexo:
<INPUTTYPE=radioNAME=sexoVALUE=masculino>Masculino
<INPUTTYPE=radioNAME=sexoVALUE=femenino>Femenino
ParmetrosOcultos(I)
<INPUT TYPE=hidden...>
Nosemuestraningn campoparalaentrada
dedatosporpartedelusuario.
Sesueleusarparaenviarinformacinde
estadoodecontrol,obienparaenviarjunto
conelformulario informacinquenodebe
sermodificada.
ParmetrosOcultos(II)
DebeincluirloscamposNAME yVALUE.
Ejemplo:
<INPUTTYPE=hiddenNAME=desdeVALUE=Form1.html>
BotndeEnvo(I)
<INPUT TYPE=submit...>
Seusaparacrearunbotn quealser
pulsado envalosdatosdelformulario al
URIindicadoenelcampoACTION dela
etiquetaFORM.
EnelcampoVALUE seledanombre al
botn.
NosuelellevarNAME.
BotndeEnvo(II)
Sepuede usarelcampoNAME sihay
varios botones deenvo ysequiere
identificardesdeculseenvi.
Ejemplo:
<INPUTTYPE=submit VALUE=Enviar>
EnvoconImgenes(I)
<INPUT TYPE=image...>
Sufuncionalidadessimilaraladelbotn
submit, peroseusaunaimagencomobotn.
Otros atributos:
SRC: imagen que se debe usar como botn.
Sepueden usarmapas.
EnvoconImgenes(II)
Ejemplo:
<INPUTTYPE=imageSRC=escape2.jpg
width=288heigth=230>
BotndeBorrado
<INPUT TYPE=reset...>
Seusaparadevolver losvalorespor
omisinquetenanloscamposdel
formulario.
ElatributoVALUE sirveparaescribirel
textodonde semostrarelvalor.
reasdeTexto(I)
Permitenlaintroduccindeuntextoque
ocupemsdeunalnea,dndoleforma de
prrafo.
FormatoBsico:
<TEXTAREANAME=nombreROWS=nfilas
COLS=ncolumnas>
Textodeinicializacin
</TEXTAREA>
reasdeTexto(II)
Ejemplo:
<TEXTAREANAME=txtROWS=10COLS=80>
Textodeinicialización.
</TEXTAREA>
MendeOpciones(I)
Seusan parahacerseleccionessimpleso
mltiples.
Definemens debarrasyofreceuna
alternativamscompactaalusode
checkboxoradio.
MendeOpciones(II)
FormatoBsico:
<SELECTNAME=nombre>
<OPTIONVALUE=valor1>Opcin1
<OPTIONVALUE=valor2>Opcin2
...
</SELECT>
OtrosAtributos:
MULTIPLE:parapoderelegirvariasopciones.
SELECTED:opcinpordefecto.
MendeOpciones(III)
Ejemplo:
<SELECTMULTIPLE NAME=Menu>
<OPTION VALUE=blanco SELECTED>Blanco
<OPTION VALUE=azul>Azul
<OPTION VALUE=rojo SELECTED>Rojo
</SELECT>
EnvodelFor mular io
Slo seenvanloscontroles emparejados.
Son loscamposdelformulario que
formanuna parejanombre/valor.