Saeed CURSO VISUALYPRACTICO § Formularios web Elem: i ento form \ Input types y atributos \ Envio de datos \ Integracion con JS Ba As SOS) See Eee > Loe, Lore nesters” Re aR ad Re BCS ea Boy SO ats Vb) sl ERR NC Tah enemas PaaS By Cl Pre Wee ey Rar eee PCN NERY SO a Bes td EAR am Te ae Re CC WS Pa RS \ RE Soe —METODOS < FR he ERY poraceo aa git m™jaquev(BES S5F5 curso visual Y PRACTICO Reeth WEB Full Stack oY Taced OM icedsnecdice| backend Direccién Edna MigulLodertromer Edicion Fernando jam ‘ator Fernando Luna Produceion grfica Gustavo De Matteo ‘anion al ctor, ‘suscripcionas y ventas, usershop@redusers com rs 454011) 4110-8700 Nv +52-58-8821-9560 Publicidad publiidade@redusers.com 54/011) 110-700 tinue Aronia Cop Von await hss. 9108 ico Bare a el 94471) 4506 96008 er Dec ‘altel Si QBAPre Siew Paa 1:2) SSM, Ben As tO 4806-0114 Mba DF oreo DistuceaSA GCN, Nt? Ia ache Pda al Gt, SEES Mein ler Coup ius epi bes ris SA se CV Ceo 58D Cl rras Mec, Delp: TSCA Ds eal (Conn Tel 513670. ane Cebu Skea SA, hatin de Para E35 pe 2 Sa ee Lr St «1290 rem 21 ray Een SAL, Prey 132, engi Te 80 9% 076s Veet Der wd Carrs Bouse mas oo ox e as 2) 9% San Nn. cue co al La Paz Cass, L822 406420. Go yeuay racks Sai Tec, st zu; Fox oa SA 1 Novara 180,150, CSE, Gund Auinona do Bases As. Agee Fata Wain mgt © WANA. 2515-855 Ts cos rac pb rope sara nen pa inmate pes prep de ‘sacar e sume esa alr cle crac eta reac nora yo ein els ics yas es aE, Snano ptt at an fnacas ean pb Ws As abe eee WS, UF lo PN ERERS On EN mR nS. (ae 225 ya, un Baa wc, GB Atributos BIB Input types oa Poe Lien Anras(e 8 Formularios web [IMI Formularios web e input types. THIET Envio de datos de un form CONTENIDO ADICIONAL ONLINE Codigo fuente, . elementos graficos utlizados iva iyssclsne Ane ne eee 011-4110-8700 | USERSHOPREDUSERS.COM. pared nc iii i ane en los ejemplos y otros contenidos adicionales se pueden descargar enFormularios web e input types Los web forms o formularios web son el mecanismo mas popular de ingreso de datos. A través de estos, los sitios nos permiten, entre otras funcionalidades, ingresar datos, comé Bi registro de usuarios, 5 formulario de contacto, Bialta de productos en un sistema, Acontinuacién, repasaremos los diferentes componentes que permiten armar un formulario web. Ademas, realizaremos ejercicios priicticos que nos ayuden a comprender el armado de la parte estética de los forms, desde las prestaclones de CSS, asi como revisar los diferentes mecanismos de almacenamiento de datos que los formularios web nas ponen a dispasicién. Componentes de los formularios web GO

contone odoslos clomantas input type que conforma Lunformaterio web par le carga de dtos,Contiene une seri de atrbutosimpertantas, como formactin, que parmite detarminar ol tipo de comportamionto quetendré una web pera alnaconar datos cuando el usuori presioneAeeptar «label for> permit especiicarune stiquota, label, que describ alto docampo con ol quo estirelacionada, Seutliza para agregaruns dscrpcion rove, dealmanos una odes palabras, ace gusralusurioenta carga de tos, En algunos casos, esta etiquota,cwyo so 6s opcons, es remplazeca dlrectamente por el aibuto placeholder Esto permite ahorrar ‘aspacio on pantalla, sobre todo para los forms que deben vsualizarse los Aisosiivas méviles. Atributo placeholder permite especiicaruntextodescrptiva «qu guia a usuatio sobre ol dato a cargar ono input type. ste atributo sola puede ser uiizado en aquellos clementos Input type quo prmitaningrosar dato, como os dltpa text, ‘number, oderivados de ambos. Las inputtypo chacked, radio button, button, nae dan soporte. REDUSERS Ei PROGRAMADOR WEB Full Stack -inputtypes"text> permite oingroso de texto, nimeros u otros datos tipeados oseleccionados desde ualista, por parte del usuario, Poswe una sorie de atibutes coma mame i placeholder 1 disabled, que permiten dale un contexto nico ytabsiarsu ‘comportaniant on genera. Agunos elementos, cone Jnputtype number, to, canal ul, month, yar, ate, range, possen, sogin el ravegedor web onde se ejcuten. la posiilidad do accadera ‘unciones determinadss, come un contol spin, un calendaro para slecionar fechas, y ras tants funciones, Los elementos cinputtype="button”>puedan serreamplarados también por! elementa HTML cbuton>, unque el uso de estos 0a “submit” (Gisperar crest ‘eformaction, pare que los datos delformulaio sean guardacos 0 ‘ransitidos) 0 “eset linpiard todo contonia cargado on ol form, para realzarruevamente datos o cancelar el ingreso)Elelemento form Para crear un formulario web lo primero que debemos declarar en una pagina HTML es el elemento tag form ste elemento representa una determinada seccién de un documento o pigina HTML, en la cual estin incluidos los componentes interactivos que permitidn que un usuario transmita la informacién ingresada a un servidor web. Como bien dijimos, el elemento form y todos los componentes (o input types} declarados pueden ser modificados en el aspecto estético como también en su comportamiento, a través de una hoja de estilos CSS, En la siguiente tabla, veremos un resumen de las earacteristicas y los atributos principales del elemento form, que controlardn, por ejemplo, silos formularios aceptan ser autocompletadas 0 coma se enviardn los datos. Tons Pe Contexto para su uso Genera catagarias de contenido dinémico, Atributos aceptados ‘Acepta todos los atrbutos globales que se uilizan en HTML. Pormite codifiear los caracteres de servidor que el form acoptard. Esta codifica- caine cin puede estar delimitads por espscios o camas. La URI del programa o de a web que lo contiene procesa la informacion ingresada, ‘anel formulario através del auibuto indicado en un elemento {ol tipo o en un elemento del tipo Envier Permit ingresarteléfonas lmitando los valores tel entre"O y 9°, *, By-Es ideal pare webs ‘Teléfono: [enoerd —___) visualizadas en dispositvos méulles, Permiteingresar horas, minutos y segundos, time itando los valores entre as 0:00:00 y loa de ingreao: 23:59:59 horas. a Permite ingresar una URL odireccién ape to wb praae SSE] de una pagina web. * week Permite ingresar el nimero de una semana del afolimitando sus valores entre 1 y 54 Permit escribir muchs caracteres en mciiples linees, Los atibutos cols y rows manojan textarea alto y el ancho que ocupa este control en pantalla, También soporta l limite de caracteres, con el atributo maxienght. Puede reemplazara input type="button” solo cuando la accién por elecutar para button enviar datos del formulatio debe invocaro una funcién de JavaSeript. an Permite seleccionar un archivo desde a platform operativ, Por lo general accede, segin el sis- tem operativo, ale estructure de archivos que el SO dispone para ser vsualizada desde une web. Establece un componente input. type="text” oculto. Se pueden almacenar datos hidden ‘especificos, como ser un ID de transaccin operative, invisible al usuario, pero con posbilidad de grabar su valor al confirmar el web form, image Permmite definir una imagen especifica que reemplace el input type Submit. Aditeren- cia de una imagen clésica, este input type cuenta con los mismos aributos que Submit. REDUSERS Ei PROGRAMADOR WEB Full StackAtributos Como bien dijimos, cada elemento HTML, incluyendo _de ejercicios préctieos. Para ell, iniciemos un nuevo forme input type, contiene una serie de atributos que proyecto y creemos una pagina HTML base, tal como permiten definir un comportamiento sobre cada ‘vinimos haciendo en las clases anteriores. En esta, elemento, como asi también ajustar sus valores por agregaremos dos input type del tipo texto (para ingresar defecto, entre otras funciones importantes. nombre y apellido), un input type del tipo nimero (para Repasemos, a continiacién, los principales atributos __ingresar edad), y dos botones (para aceptar y cancelar), relacionados con estos elementos, a través de una serie tal como figura en el siguiente cédigo base: for="nonbre”>Nombre:
type="text” name="nombre” id="nombre” placeholder="Ingrese sus) nombre(s)"/> fors"apellido">Apellido:
type="text” name="apellido” id="apellido” placeholder="Ingr su(s) apellide(s)” /> fors"edad">Bdad:
type! su edad"/>cbe> type="submit” name="subnit” id="submit” value=“Aceptar"/> “cancel” id="cancel” value="Cancelaz” /> number” name=“edad” id= dad” placeholder="Ingrese Clase 08 Bi Formularios webReadonly Permite especificar que un control es dle solo lectura asignsindole el valor True Este atributo se debe especificar dentro de la declaracién propia del input type, sin importar su ubicacién, Por defecto, su valor es False
Ingrese sufs) nomibre{s) » Wmagen 02, EO: Cuando intentamos hacer le: Inge 55) ad: inputtype con el atributo readonly=" iremos disponible un método de ingreso. xz Ingese su edad Disabled Su comportamiento es s Imilar a readonly, con la diferencia que, en este caso, el componente o input type es grisado por completo. Comiinmente este atributo se uti za mAs en input types que no sean del tipo caja de texto. Por ejemplo cen elementos button, radio buttons, checkboxes, eteétera, € D> S| O file//CpUsers/funa/Desktop/F05/Recursos/index html? apelisdo: Trabajo con Formularios HTML mtr: Inyo ss) noes) cna ‘Apallido: El primer textbox y el Ingrese sufs) apalido(s) botén Aceptar poseen el |hsomm nl atributo disabled="true”. a ‘Los input type button son Ingese a edad visualmente no ‘cuando no se usan elementos CSS A sobre estos. REDUSERS Bi PROGRAMADOR WEB Full StackSize Bl atribut stze="ndmero” es funcional solo en los sigulentes input type (text, search, tel, url, email, y password). Este atributo permite especificar ‘en caracteres un ancho visible, que el input type debe tener, cbe> Imagen 04, Nombre: HERMENE? Hlatributo size solo Apellido: seré efective cuando no NUNEZ ] ‘ratemas el ancho de una Edad: a5 ] ‘siempre predominara por sobre lo especificado en HTML, Maxlength A diferencia de sie, maxlength permite delimitar la cantidad de texto que podremsingresar ens input type: (tex, seat, tel url, emily password), No existe un valor por defectoen el clemento, seste atributo noes especifcado Si exste una limitacién para a cantidad mixima de caractores, yes 524.228 (lo sufciente como para no quedar rpidamente linitados). Nomi ESTANS sha: co = Maxtength es un a: atributo excelente; pero 25] {cuidado!, solo hagamos uso de este en los casos necesario. a PRACTICAS EN EL USO DE SIZE Y MAXLENGTH bien estos atri ides con diferentes fines, siempre es conveniente evaluar a fondo qué tan itil ‘nos podra ser limitar un ancho o la cantidad maxima de caracteres. Size es un atributo poco utilizado, ya que el ancho por defecto de un input type generalmente se configura desde la hoja de estilo CSS (width: 40px; 0 ‘width: 30%). Maxtength es muy dtl para limitar la cantidad de caracteres en una caja de texto, pero en campos especificos como Nombre, Apeliido, Direccian o Comentaries, vez si sea dtil en campos como Documento oNamero de telefono, teniendo en cuenta un limite maximo coherente para este tipo de datos. sos son ut a Clase 08 Bi Formularios webMiny max Estos atributos son utlizados cominmente dentro dels input type del tipo rimero: (umber, ange), Permite configura el elemento HTMI.encuestén, para que los datos que sean ingresados en este, estén dentro de un valor minimo y maximo. Para ver su implementacidn real, modifiquemos el ejercicio realizado al inicio de este capitulo y agreguemos los atributos min y max, con los niimeros descriptos en el ejemplo de cédigo anterior, Trabajo con Formularios HTML | | Trabajo con Formularios HTML, Nombre feeeieel brome aw ingrese 2s) apts) ingress ava) aeliei) —] Cuando este input type Esad Baad recibe elfoco,y queremos a ingresar un valor, con Ee hn nimeros o mediante las flechas superior ¢ interior, Hevara su valor inicial al indicado en el Step Como valor adicional aun text input del tipo number orange, el atributo step permite determinar wn mimero legal de intervalos entre ls posibles valores por ingresar. Por eermplo, si necesttamos quealgulen Ingrese un valor uméric, solo especifcando nimeros pares, dems realizar esto dela siguiente manera umber” nam Autofocus Enel diseno de aplicaciones de esritorio, es posible especifcar a tabulacion por defecto de lo contoles ‘seteando a un control determinado con el valor 0 (cero), hacer que este sea el control predeterminado que recibe ¢foco inital cuando se carga la pantalla, tn el terreno del desarrollo web, podemos aprovechar maxlength="7" autofocus/> “nombre” placeholder: ‘a establecer un control con el foco predeterminado cuando termina de cargarse la pagina, haciendo uso el atributo autofocus. Este atributo se utiliza simplemente agregando la palabra autofocus, dentro del set de atributos correspandientes a los input types en uso, "Engrese su(s) nombre(s)” Implementar el atributo autofocus Probemos el comportamiento de tun formulario web con el atributo ‘autofocus, modificando el proyecto ‘actual y agregando dicho atributo ‘en input type="nombre”, Probemos el ‘comportamiento de dicho proyecto y, luego, input typos ambos el atributo autofocus. Ejecutemos la pagina y veamos ‘qué sucede Por altimo, agreguemos el Sietecue bar ‘abe tore nenedat None satuesshcepear® > neue typenseeset® naneoteancel SmluestConcelor= > lato ancel® atributo autofocus solamente en input type="submit’ y probemos otra vez ‘el comportamiento de la pagina, REDUSERS Ei PROGRAMADOR WEB Full Stack ‘agen 08. En esta imagen podemos apreciar cémo inclur la palabra ‘autofocus en dos te put diferentes, para evalu 4a pagina web al cargarse. ccémo se comportaInput types Para comprender mejor el uso de cada input type en un elemento form, realizaremosa continuacién un repaso de cada uno de ellos con mayor profundidad. Hasta el momento, ‘conocimos los input types text, number, submit y reset. Vearios centonces qué otras opefones nos ofrece HTMLS. Date Este Input type nos permite manipular fechas completas a través de formularis HTML, Para faciltarla carga de tna fecha, input type date fue pensado para visualizar un calendario desplegable, que nos permita navegar pot los meses yas, seg a necesidad del usuario. Soporta el usode los atributosminy max, para imitar una fecha nical y fina por mostrar, y también contamos con laposibilidad de especifcar una fecha predeterminada, Email Tal comost nombre lo indies, mputtype ema se utiliza para implementar campos que deban contener ant direceia de corrouslectrGaico, Dependiendo del navegador web, las direcciones de correo electrdnico anulingrosades pueden nr vildudaclercanen automética cuando se presiona el botén Submit, Algunos teléfonos méviles, tablets y computadoras con limitacton de entrada de datos mediante un panel tactil reconacen este tipo de campo, y visualizan un teclado ajustado al tipo de ingreso de datos por realizar; de esta forma minimizan los posibles errores, como el ingreso de un espacio o un cardcter especial, ‘Suscribase a nuestro Newsletter rursosvert ‘Suscribase a nuestro Newsletter solo para el ingreso de ‘nuevos campos de ingreso, propios de HTMLS. Limitando sus capacidades extendidas solo ‘para lingreso de una fecha, datetime-local nos ‘permite ingresar fecha y hora en un mismo campo. Fecha y hora de naciento: 21/03/1975 09:15 Bemis xa ‘Tengamos presente que los input type time y datetime-tocat rho pueden implementarse en los navegadores Internet Explorer, Firefox, y sus derivados. Sila idea es utilizarlos enn formulario simple, sin muchos controles, es posible usar directamente input type text en su lugar, y validar ¢l formata ingresado por los usuarios con JavaScript. Amagen 10, Endlispositives moviles, el teclado se Japta para visualizar cardeter @ (arroba) Si queremos ampliar el control de los ccaracteres ingresados en el campo email, tirecciones de correo odemas recurriral atributo pattern. Este = slic lint Fos permite ingresar una seid ceateres nena eget com] ‘type email es uno de los i “a formato especial, para tener en cuenta sobre ol dato ingresado en un input type, Clase 08 Ei Formularios web Implementar atributo pattern Desarrollaremos un ejercicio que contendra un formulario HTML y dos input type del tipo email. Enel primer input type i Luego agregamos un segundo input type email, en el cual integramos el mismo dobemos integrar el atributo au to, pero cambiando el formato de vali pattern, con el siguiente formato de caracteres: pattern="[* @]*@{* @]*”. El Porilt pattern="[a~A-Z)(3,)8fa-zh-Z)(3,)1.1 (0)a-zh-d] (2,)1.1 (1) fa-2b-2) 2,1". 10, probaremos el ingreso de sn ambos campos. Los do, en alguna parte de ‘su estructura, un espacio, al menos un cardcter especial, un guion y un underscore, poder visualizar el correcto comportamiento de cada uno de los atributos pattern implementados. ‘Suscribase a nuestro Ne at suomat ‘Suscribase a nuestro Newsletter Elresultado de nuestro lunar com ejercicio debe mostrar ea {ortnadioracord Bl itento segue dl signa "2" no ‘ete nc el imbolo. aparece aqui. Range estos, en lugar de mostrar una caja de texto los motores El elemento input type range es utilizado para crear de renderizado muestran un control deslizable. Como campos de entrada limitados entre un valor minimo y __podemos ver, e tipo ce implementacién que nos permite uno méximo. A diferencia del resto de los input types _realizar este input type es el més apropiado de todos para hhasta aqui tratados, range funciona de forma éptima en _combinarlo con los atributos min, max, step, value, dado todos los navegadores web modernosy, en casitodos __queeel destino de su uso seguramente asi lo requerira. Amagen 12, Igunos casos, ‘ndque cunts notkaedevea eur porpésine type range funciona de inera mas completa Yefectiva, aun cuando hablemos de navegadores web ya discontinuados. REDUSERS J PROGRAMADOR WEB Full Stack DBColor Con las prestaciones avanzadas que llegaron en la evolucién delos navegadores estos fltimos afios, HTMLS decidi6 ‘sumarallalista de input types un tipo de componente que permita seleccionar un color Asi, input type color dospliega, en la mayorfa de los navegadores web modernos, la paleta de colores predeterminada en el sistema ‘operativa, De esta manera, podemos seleccionar un calor para luego aplicarloen el destino que necesitemas. EnWindows, input typ color lista la clisica poleta de colores que encontramas on casitodos los programas de este SO. En Android, ista la paleta propia del sistema ‘operativo, que puede expandirse mediante la ‘opcién ‘Mostrar mas’ URL De la misma forma que vimos con el elemento email, nput type url nos presenta una caja de texto adaptada para ingresar direcciones de sitios web. Al utilizar este componente en dispositivos moviles, dependiendo del dispositive, el teclado se adapta y muestra teclas adicionales como punto (), barra (/) y.COM, ala vex que bloquea el uso de Ia barra espaciadora, Su implementacién se realiza a través del siguiente cédigo: mgrese una URL emewmeun | penne a ——— == — Su sintaxis de implementacién es la siguiente: Y como resultado, através de avaScript, PHP o cualquier otro lenguaje, podemos obtener, de su atributo value, el valor en formato hexadecimal del color seleccionado por elusuario, Si deseamos predeterminar un color especttico, _agregamos el atributo value, seguido del color deseado, en formato hexadecimal: value="#669900" > Checkbox iste elemento nos permite establecer entre cero ymiltiples opetones diferentes para selecclonar en un formulario. ci
‘A través del atributo checked podemos forzar a cada elemento a que esté tildado por defecto. Seleccione los lenguajes que domina o 2 Vous eee Jae \magen 13, input type checkbox | Aceptr EE nos permite establecer unsistema estilo _ multiple choice, para seleccionar entre w Omas opciones. REDUSERS Ei PROGRAMADOR WEB Full Stack Este elemento dispone de propiedades, como cols, rows ymaxlength, que permiten establecer un alto y un ancho a través de filas y columnas, y una cantidad limitada de caracteres por ingresar, respectivamente. Dinner ingrose su oma : Imagen 8. Comenionos: Los tipicos formularios ee para ingresar forenense® ‘comentarios utilizan text area para el ingreso de textos extensos. Trabajo con checkboxes La consigna del siguient mmiltiples checkboxes y que, al presionar el botén Aceptar, tun monsaje nos devuelva la cantidad de elementos qu homos tildado. Tengamos en cuenta os siguientes puntos: ‘2lIntegrar en el formulario una tabla que nos p estructurar doce checkboxes, divididos en tres columnas. joes poder tildar [51 Agregar al archivo HTML una referencia aun archivo JS externo. LEI archivo JS debe contener una funcién que cuente los checkboxes tildados, y solo muestre un mensaje de alerta cuando haya checkboxes tildados, vesctoe ver FORE eo ane Otpenoc eve Piren Jo Ande sat Asn ese Sitodo salié bien, el resultado de nuestro ejercicio debe sorsimilar a esta imagen. Por iltimo, modifiqu que todos los elementos checkbox aparezcan tildados por defecto cuando la pagina HTML carga, 108 el proyecto nuevamentRadioButton ‘tra opeibn de seeccidn para los formularios web es Ja ncorporacién del inputtype radloButton. Este nos petite crear miltiples opciones de seleceién, que podrn tidarse de manera individual o miltple, tal tione este input type respecto a checkbox, es que, através de su atributo name podemos armar grupos diferentes de redioButtns, Simplemente debemos especificar para cada grupo un mismo nombre Su implementacién es sen Basico Mediocbe> Otros input types HTML5 Accontinuacién listamos otros input types implementados desde HTMLS como estindar web. Muchos de ellos pueden ser suplantados por un input type con un estindar més asentado, pero hay que Avanzado
Y su resultado en pantalla es como el de la siguiente imagen: Seleccione los ienguajes que domina Imagen 18, Input type radioButton ee atras opciones de ne selecciénen los formularios web. Promedio generale sus conocimlentos de programacibn reconocer que dichas implementaciones son mas efectivas en cuanto a comportamiento y funcionalidad en un dispositive mévil, que en una computadora de escritorio ia i Ta con Permite selecofonar un mas y al fio. El comportamionto ¢ similar @ date, con la diferencia que en este contral se blaquean los dias yl seleccionar un mes, este se muestra con su nombre completo en lugar de némero, ‘Month Es doa! para a creacion de una caja de bosqueda en un sito web. Es une simple caja do texto que visualize on do- ‘erminados navegadores web el botin Eiminar, cuando contiene un texto, Combinando este input type con data~ ‘List, lagraremos tener un listado de texto prodeterminado coincidente con parte del texto que vamos escribiondo. Search " solo valores acordes. Agregando el atibuto pattern, aml limitaré en aquellos dispositivas no méviles el ingraso de ceracteres numéricos, Clase 08 Bi Formularios webEnvio de datos de un form Los formularios web se utilizan para decenas de propésitos diferentes, y este hecho condiciona 1 tipo de forma en la que viajardn los datos cargados en estos, Dentro de las implementaciones mas comunes, podemos destacar el uso de formularias web para envio de informactén de contacto, para la carga 0 modificact de datos en un sistema web, y hasta para suscribirse CLIENTE | | I He usuario completa los datos que requiere ol frmularo, Luego prosiona ol batén Enviar ‘un newsletter o dejar comentarios en publicaciones, entre otras tantas funcionalidades. Cualquier sea el fin, en el pracesamiento para el envio de datos, se ejecutan ciertas acciones, atributos y propledades de cada formulario web. Veamos a continuacién fos puntos més importantes, tanto deste el lado del cliente coma desde el del servidor. SERVIDOR Destino [Seejecuta enelserviorelmecanismo | covasponions qe processlas datos eargados en el frmulario. I — |__| besdotos pueden sereniados ma ta elmétoda POST o el método GET. — \eibotinesinoutype | submit elanaa ping ‘especificada en el atributo | Acton dlelonento cforms | Sielbotin esun elemento ,seinvocaré agin | | sip | REDUSERS Ei PROGRAMADOR WEB Full Stack * dace El Los datos son procesados por cuslqui aplcacion web dinamice: PHP, Net, Cl, JavaScript o Webservice wr” <4 | Ebrineimente tos datos se slmacenan llegan destin indicad,formaction ‘Como hemos visto en algunos ejemplos explicados a Jo largo de esta clase el atributo action, perteneciente al elemento fom, define el tipo de accién que hard ¢}formulario cuando el botén input type submit es preslonade, Cuando se presiona el botén submit se ejecuta un segundo formulario, generalmente una. pagina web dindmica (PHP, ASP, ASP.Net) que procesa todos los datos ingresados en el formularo,y ejecuta una accién determinada sobre ellos: almacenarlos cen una basede datos, uardarlos en un archivo de texto enviatlos por e-mail, eeétera, ‘Una ver procesados ls datos cargadosen el form, laweb sucle mostrar una notificaién del proceso realizado eritosamente, oreenvia al usuario hacia la pégina principal de sitio, para que pueda seguir navegance | USO DE CGI Cuando ta Web cobré vide a nivel mundial, el ‘manejo de recursos dindmicos en los sitios web se realizaba a través de la tecnologia {GI (Common Gateway \mertace). Esta tecnolo que se programaba en lenguaje Perl, C++ 0 JAVA, se implement6originalmente para adm bases de datos en linea, contadores dev ‘goneradores de e-mails autométicos, mapas de imagones, sistemas de chat y, por supuesto, envio de datos de formularis web. Sibi tecnologias presentan soluciones mucho més ‘efectivas, el uso de C6! Seripts ain sigue vigente ‘en algunas plataformas de hosting. las nuevas, Métodos POST y GET (method) Ambos son los métodos utilizados para enviar datos de un formulario web. En los Formulacios web, se especifica dentro del elemento

qué método utilizaremos para transferir los datos. 0 la vorsién utilizando POST: , agregamos el método de envio POST. Guardamos el archivo y volvemos @ probar qué ocurre ahora cuando se transmiten los datos cargados en el form.‘Veamos a continuactén una referencia mas completa sobre las ventajas y desventajas de utilizar uno u otro métado de envio de la informacién ‘CARACTERISTICA POST Ls datos cargados en of form, se visuaizan en la UAL si No Lainformacién de los frmularios web permenece ene historia del navegador. si No Hay una imitacin en la cantidad de datos por enviar si No La URL se puede almacener con los datos emiados como parémetos. si No Ideal para implementar en el envio de datos sensibles:t passwords, etcétera as de crédito, No si ‘Soportael envio de archivos u otros datos del tipo binaro No si Los datos ya enviados pueden ser racuperados de una caché, si No Es més pormoablo ante intontos de hackeo, si No Funciones JavaScript Como hemos visto en el ejercicio donde estructuramos de los elementos button e input type button, donde los checkboxes, JavaScript también puede implementarse _especificaremos el nombre de la funcién JS por ejecutar. ‘como funeién para enviar o procesar datos cargados Si por algin motivo debemos ejecutar una funcién en un formulario, Podemos realizarlo utilizande tanto de JavaScript que procese los datos del formulario web, un Input ype button como el elemento button, can la debemos integrar dicha funcién en un archive HTML, diferencia que, en lugar de usar el atribute action del 1ya sea escriblendo el script dentro del HTML o invocando método form, usaremos directamente el atribute onClick desde el HTML un script escrito en un archivo JS, [Seer tata ann ieee reees eet en 4 Pythonebr>
2 Java Androidcbr>
S am Tmagen 1), a small Talkchro
tuna funcién JavaScript “ ASP.Netcbr>
de los datos cargados ss cinput type="checkbox" name="che id="chkbox12" value="js">Javascript
cbr> ons faraalete wet x | Procesar un formulario web con JS aprendidos, realizaremos un ejercicio en Se Se ea el que se pracesarén los datos cargados ‘en un formulario web a través de una funcién JavaScript. Para esto, podemos constr formutario web desde cero 0 tomar uno de los ya na por cumplirs cel método GET y un segundo archivo HTML, que € 0 0 Fn api-Sionapap RCE Lena de pregroactncneciepor el ste: contendeé el cédigo JS que procese ls datos Imagent8. cenviados porelformulario web. Finalmente, Ear Elresutado do archivo HTML invocado mostraré en pantalla Pana ‘ lobera vers los datos procesades, cargados por el usuario, , " como muestra esta ima Construyamos a continuacién la pagina HTML que procesarit Jos datos del formulario web, Creamos para ello un archivo HTMLal cual lamaremos procesar;jshtml, Armamosa ccontinuacl6n la estructura bisica de todo archivo HTML LINEAG: en decleracién de le variable parametrosGET, uardamos la URL completa del navegador, Luego, através de la sentencia if, veritieamos que en dicha URL sta ol signo de intorrogacién (7). Este nos dala pauta de que oxisten parémetros pasados en la UAL. 4 luego, abrimos el tag correspondiente a un nuevo script Dentro del HTML ereamos una fue lamada obtenerParametros(y escribimos el siguiente <_< ite eee 01 var parametrosGET = document. location.href; Pyar sbi larieda gett 02 if(parametrosGE7.indexof('?’)>0) Enesta dvidimos el string ost almacenado enta variable 0s var getString = parametrosGET.split('?’)(1]; parametrosGET, tomando 05 «var GET = getString.eplit('s'); ‘como referencia el signo de 05 = var get = (0 imerrogacién, Reaizado esto, 07 ~—for(var 4 = 0, 1 = GEF.length; i < 1; itt) ( ahora procesamos el string 8 var tmp = GET[i].split('="); aimacenado eno array] d2 lavariabla getString, Para esto 0} ite, decleramos ura nueva variable, lamade GET. En ests 4iviimos et string aimecenedo enparametrosGETT, tomendo como referencia ol simbolo ampersand (6 get(tmp[0]] = unescape(decodeuRT(tmp{1])); return get; 2) LINEA 07: través dea sentencia for, recorremos todo el array de GET, separando {e este as claves/valores almacenados como string. Cuando obtenemas al valor asignado 8 cada clave, lo quardamos anal array dela variable get, decacificendo los caracteres especiales que puedan exist en le URL, con|a funcién decodeURI(), REDUSERS Bi PROGRAMADOR WEB Full Stack BeAhora procesamos todos los valores obtenidos mediante la funcién obtenerParametros|): 01 window.onload = function() o2 03 var valores = obtenerParametros(); 04 i ftvatores) 0 06 document write(*ch3>Lenguajes de programacién conocidos por 21 usuario:
"); 07 for(var index in valores) 08 ‘ 09 Af (index != ‘oubmit’) ( 10 document write("
" + valores{index]); a document write(*
"); 2 ) 23 ) 14 document .write(*
"); 45 docunent write ("
") 16 document .write("Gracias por participar de 1a encuesta.”) aw ) else ¢ 18 document.write("

No se han recibido pardmetros mediante el método GET

"): wo) 20) Cuando se carga la pagina (Io detectamos con Ia funcién JS window.onload()), ejecutamos el c6digo anterior, Este se ocupa de parametrizar en la variable valores, los strings almacenados en Ia funcién obtenerParametrost) Luego escribimos el HTML con document write, todos los strings almacenados en esta variable, teniendo cuidado de filtrar el ltimo parémetro string del array, que casi siempre corresponde al botdn submit del formulario, ‘Sino llegan datos a través del string, notificamos al usuario en pantalla con una leyenda que indique que ro se recibieron datos (linea 18), Ya.con el script de procesamiento escrito, salo nos queda: 1 Asegurarnos de que el método del formulario para transmitir los datos cargados sea el correcto. BF Asignarle, al elemento form, el archivo procesays. HTML, para que procese los datos. 151 Validar el funcionamiento de este archivo de procesamiento, probando el formulario con datos datos ingresados. ingresados y si EI Modificar el método del elemento form poniendo en su valor POST, y evaluar a continuacién qué comportamiento obtiene nuestro formulario web. Ei DECLARACION DE VARIABLES EN JS Ena doclaracion de as variables usadas dentro dela funcién obtenerParametros(), podemos encontrar dos variables eon ol mismo nombre: R. Debemas recordar que, cuando declaramos variables en JavaScript con el mismo nombre utilizando ‘mayisculas, minisculas o una combinacién entre amis, cada una de estas variables seré independiente de las demas. JavaScript es case ‘sensitive, por lo tanto, variables funciones con el ‘mismo nombre, pero con diferente tipo de formato en sus caracteres trabajarén como independientes dentro del bloque de cédigo. Clase 08 BI Formularios webEN LA PROXIMA CLASE.. | CURSO VISUALY PRACTICO 9) ackend_| } Multimedia y APIs | ntos audio y video Geolocalizacion \ APIS HTMLS \ Objetos embebidos | py eTy-tacediie Perce b Elemet(23755 curso visuat ¥ prActico PROGRAMADOR WM g ieee Desarrollo frontend y backend Porque desde cero, y sin ningun conocimiento Previo, este curso te ensefia a disefiar un simple sitio que luego transformaremos en uno dinamico, interactivo y responsivo, conociendo y aprovechando las tiltimas tecnologias de desarrollo. Porque alo largo de 24 fasciculos, repletos de ejemplos, ejercicios y explicaciones visuales, aprenderas tanto los lenguajes y tecnologias frontend como backend: HTML, CSS, JavaScript, PHP, MySQL, JQuery y mas. {Son varios cursos en uno solo! Porque actualmente el perfil FULL STACK es uno de los mas demandados en el mercado laboral Te ensefaremos a darles vida a tus propios proyectos, generar un portfolio y a dar tus primeros pasos laborales como desarrollador. —_ L@,@) BS Explicaciones Gules Ejercicios practicos pasoa paso visuales eintegradores @P@, Serviciode profesores en linea profesores@redusers.com Clases anteriores Puede adquirirlas escribiendo a usershop@redusers.com ee PLAN DE LA OBRA EMI Ecosistema web HTMLS eI Css3 HEI Disefio UI con CSS BEI Introduccién a JavaScript GIG JavaScript orientado a objetos Integracién de HTMLS y JavaScript Formularios web EI Multimedia y APIs CSS Avanzado Disefio web responsive Sitios multiplataforma con Bootstrap PHP Mysal PHP y MySQL Webs dinémicas con Ajax y PHP Buenas précticas: andlisis, tests y optimizacién Fundamentos del ecosistema mobile Jquerymobile: la web mévil BGI Funcionalidades extendidas en mobile web EMMI Potenciando la faceta full stack HIE Webapps y plataformas amigables Versionando el desarrollo: GIT y Github Salida laboral 9 VL TOU ooo08 SION