w3schools.com EL SITIO WES DE DESARROLLADOR MAS GRANDE DEL MUNDO Py Formularios HTML HIMLS: IMs main Formularios HTML Ejemplo de formulario HTML key ubr El elemento

SELECTOR DE COLOR = @ form ecenents Eau El Define un botén de aio (par elecconar una de muchas opcones) “Ginsu pu © Shubert Ln Kat du na (ara rina ara ‘COMPARTIR. oo 6 ‘Aprenderd mucho més sobre ls tpes de entrada mis adelante en este tutorial CceRTIFICADOS He Entrada de texto ae “input teehee define un campo de entrada nies par I ntads ctxt oa Bjemplo sons "iL Nombce de pl poet ‘Nota ormularo ens no es vale. También tenga en cuenta gu el anche predeterinede de un campo de eto ex de Entrada de boton de radio “Sue typee"rao"> define un Botén de radio Los betes de opi le pemitan a aur slaconar UNA de ua anid Inada de pcone Ejemplo “input ate + raaiecr> + Hasina Hembra El boton Enviar ee ‘ses como se mostrar el cig HTML anterior en un nvepadr: Nickey El atributo de accion Et ston arbi define In cen 8 elitr cundo eri formula. Nocmsimente, os datos del formulae envan a una ppina web ene servidor cuando el usual hae le ene botén Enel ejermplo anterior datos del formulate envan a una pdsna en el servidrlameda “/ction page. php. sta pi continent ln dal seriou manejo aon del formule: Si act Sone amie ate, Ia acln oe etablee onl gna at El atributo de destino El valor predeterminado es" _se1¢*, lo que sonia que el formula se enviar ena ventana actual Fara ari l eta dl forms n un va estat dl navegador ute lvalr* sak Ejemplo | tore ssstonerctien pase pnp" sarant ‘xs valores legals son * _parent*," top" oun nombre au representa el nambre de un fame. El atributo del método El tho abo expen mito HTTP (GET o POST) que a lizard nv os datos dl formula: Ejemplo Ejemplo Cuando usar GET? El mada prdsterminad envied dl formar GET. ‘Sin embargo, cuando iin GET ln ton dl formulaic evido sadn Wiaibles on el campe de icin dln cine eel pae php iestonmichyEetnanninte + Aaregs datos de frulro #8 URL on pares de nombre aor 1 Ualangtos de una URL ota (2088 arcteres) 1 ince ne GET pare evr dtoecoviencalea seb ible on In URL) éCuadndo usar POST? nls sampre POST ls datos del formule contanen forclin cnfiencilopaceonl. El métdo POST no muse lo ator de formula emia en ol campo de recon de pga + FOST no tenelmtacones de amato puede usarse par enviar grands cantdades de coon 1 Lae envor de formulae con POST no pueden marerse El atributo de nombre cada campo de enrads dae tener rane tuto para ser envi ‘i hame somite ol abut, or datas de exe campo de entrada no 5 enviain en absolut Este ejemplos rare ape deena Api: Ejemplo fora actor" /action pap» Agrupar datos de formulario con

El fleidees elemento seus para agupar dates rlaionadesen un formula. 1 chegnd elemento define un tuo para el <#else> element, Ejemplo “orn etiom®/aetionps-06"> Informacion persone: Nombre de pi pedo Ejercicios HTML Pee Neen csi Ejercicio: Aeributo Deseripeiin scegtarsuege de Expctica el conjnto de cratres tzid one formula enviado (predeteminad: cones conunto de caraceres dela pin) cin sect una deci (ut) donde enviar al formula (predetarminade: le gina de envi} saocomplear Especial navegaor debe completa automiticamen el ermulre (eeeeterminsée: sca). evens Especte a cosenin dele cits eniaos (lr sresetarminac: ets condo an rt dtd Eapecten ol mtode HTTP ued levi formar (predeterminado: GE) seme pectin un nombre tsa pare ientcar el formulari (par uso DOM: ecumen fora.) oo var pectin que el navegador no debe valde formula cbjnve Espectca ol destino del dreccién en el sib de accién (reeterinado: seh Aoranderé mis sobre los atribvtos de formulae os préximoscapitlos Los mejores tutoriales Referencias principales Mejores ejemplos Certticados web Snr ton ree Semlnesak yon caren wes sa Step Ra "oceanw3schools.com EL SITIO WES DE DESARROLLADOR MAS GRANDE DEL MUNDO aT Formularios HTML ada HTML Abo de ends HIM HIMLS nocion HIS Nuevo olementor Hina Macon Elementos de formulario HTML Este capitulo describe todos los elementos de formularo HTML El elemento El element de forma mis importante es el cSnpit elemento £1 contact elemento define une Hata deaplapable iver wotvecfoeton> Fermulano de nico stiatefopions HM cue saudiclopton> Google Maps range fnformacisn =a ae de ros de apostivas et Urea de los 1 cteuteres elemento define un carpe de entra de varia lines (um rea de texto) Ejemplo rows atributo especia el nimero visible de lineas en un dra de texts, cote abut expe el ancho vile de un ren de test, “he eat was playing inte garden, ‘También puede defini taro del iran de text ulizando CSS: Ejemplo El elemento 1 HTMLS 1 caataiSet elemento ecpaccs una lita de opciones predefnsas para un ‘input? elements Los usuarios verdn una sta dasplagable de ls opciones preencas a mesida que ngresan datos. 1 25ve seb da elomento eee0o Fjemplo faecacaiaat ‘tion valueopere"> ‘opion valuessatert"> Elemento HTMLS

SUE cemento representa elves de edt (com el eid por tn sr). Ejemplo Reales un clculoy musste al eautada en un coutput elemento: ‘oninputex.valuenparselnt (value) parsetnt(b.value)"> Ejercicios HTML Rene ts Reon tele Bjercicio: Enel davies formar, arege ane eta desagle vas cna nombre "a ‘ eo Defines an HTML form for veer input Defines a input conte Defines mule np ental (textarea) Defines Ibel or an element {Groups related elements in form Defines a caption fora fildet> element -clect> Defines drop-down st sonterove>, Defines group of related options in a dropdown Hit - “input typee"date"> “input typentnonth”> SELECTOR DE “input typoetnumber"> COLOR @ = ae ements ine pets ial smaec trl Taegan Texto de tipo de entrada peace ae ESSELTE es wn compo deo pet Ejemplo Conic ops a resin ad Firat name: cbe> range tnformacsn “put ype" nants" EesEOM oP? sobre Last naman herramientas sts pst tpee"text* namee"astnae”> efor de ctor Sapcetvas tina de clotieaeién ‘COMPARTIR ‘As como se mosraé el cdgo HTML anterior en un naveusr: ao 6 Doel ceRTIFICADOS, Hm Tipo de entrada Contrasefia a “out upee"oasnord” dine un eampo de contrasea Ejemplo mm, oi si es como se mostrar al ebdiga HTML antarir en un navegeder: Nombre de usuare: CContasta de usuario Ls caractees en un carpe de contasehs atin enmascarados (se musstran como astercoso reuls) Tipo de entrada Enviar “input typee"subaie> define un boton para enviar datos de formulae un controlador de frmularto controlador de formulae suele sr una pga de server con un Srp pare proceso datos de entrada Ejemplo si es como se mostrar al eldiga HTML antarir en un navegeder: Nombre de pa Mickey Apel: ‘Stemi eatibuto de valor del botin Envi | botén obtende un texto predetermined Fjemplo “fore settone"/etien peesene"> exe" namestLastnane®valuesoue"s iba Restablecer tipo de entrada “insur typeetraset define un betén de relniclo que retabecer todos ls volves de formulae sus valores preceterminsdoe Ejemplo ‘input types"text” nana"firstnae value hichey* ‘Asi es come se mostrar el chaigo HTML anterior en un navegador: iickey peli: Mouse Enviar | Rerab ‘Sl cambia los valores de entrada y haga hace cc ene betén “Restablecer, oe datas dl formulae ze reatabecerin 3 ae ‘oorespradtarminadas Tipo de entrada Radio ‘Asi es come se mostrar el ciao HTML anterior en un navegador: Boton de tipo de entrada insut typesTbutton define un bots Fjemplo sutton one Scka“slere("allo wera")* ‘Asi es come se mostrar eld HTML anterior en un navegador: Tipos de entrada HTMLS HTMLS apr varios tpes de entrada nuevos: Steck 1 atetimecal 1 correo eecrico Genes 1 buscar tea Lor nuevo poe de entrada que no con compatibes con navegadores web mis antguas e eomportarn come alan para rps de entrada que deen contaner un ler Depandlendo de a compatbidad dl navegador, puede aparcer un selector de color en el campo de entrada eee0e0 Ejemplo lhe Gooner? en tectee’> Tipo de entrada Fecha Et cig tpette' en pra fe campos de nade ge daen contenu fc Dependende dl soe del navegde un sled eh puede parece nel campo deed : eeexo Ejemplo También puede usar ls artes miny max para agregar restrecones alas fechas 6X0 Ejemplo ecica un campo de entrada de fecha y hor, sin zona hora, Dependlendo del soporte del navegador, un selector de fecha puede aparecer en el campo de entrada. exexo Ejemplo Birenny (ate and tine) “input typee'setatinerlocal” nawe"bday tin" Tipo de entrada Correo electrénico Se cnt esa13" ula para campos deartrada que deben contner una dreccn de core eecrénc, Dependando dl soporte del navegador Is cirecxén de corre alacréico re puede vldsrautomsicamente cuando ze ‘Agunos teléfonosintlgentesreconacen el tipe de correo elecnicoy agregan “com al teclag para que coined cn la fntracs de cores sleronice Ejemplo ‘eait"> Archivo de tipo de entrada La cinsut tysee"Fize"> cine un campo de selecelén de archive y un botén “Examiner paral carga de archivos. eee Fjemplo Tipo de entrada Mes EE RSet a re saree we ae Dependlendo del soporte del navegador, un selector de fecha puede aparecer en el campo de entrada : exexo Ejemplo Brencey (eon and yet) Numero de tipo de entrada 1 deine un comgo deentrads numérico “ambi puede etblce eteiones sabre gunman se sgt, El nvint eiempla musta un camps de errada nude, donde puede nes un vale dl aS : 26000 Ejemplo Muni (enen 4a 8) Restricciones de entrada ‘aul hay una lista de algunas restrelones de entrada comun: seribate Description cached Species tat an input eld should be pre-selected when the pate loads (for tpe="checkbon 0 ‘ypee"rade") max Spaces the maximum ve for an input elt maslersth Spaces the maximum number of character for an np ld Species regular expresion to check the input value aganet readonly Species that an input Fld i ead only (cannot be changes) required Species hat an input Fld is aquired (mus be filed out) sve Species the width (in character) ofan Input field sep Species the lagal number intervals fran input ld value Species the defale alu for an input ld ‘Aavenderd end sobre In rettriciones de entrada en el prio eaptule. E! siguiente ejemplo muestra un campo de entrada numérico, conde puede ingesar un valor de 02100, en patos de 10 valor predeterminado et 30 eee00 Ejemplo ‘uae “input typee"utoer” nanee"polnts™mine"@"mone"160" stepes@" value Rango de tipo de entrada ESSERE oie in covirel par intro eu rims eyo waar exact no ox portast (com ‘un conreldesizate). Rango por defecto as de 02100. Sin embargo, s puede establecerrestricionet drnron con aegtadee can el in, many step setae Ejemplo Busqueda de tipo de entrada 1 cSngut typee"2eereh se uiza para campos de biaquede (un campo de blaquede se compart coma un campo de texts normal) eee00 Ejemplo Tipo de entrada Tel ‘Se Tipo de entrada Tiempo Et permite a vuario eleclonar un tempo (ln 2008 haar) Depanaando dl ropes ol navegador, un selector de sempo puede aparacer ena campo de entrada eexO Fjemplo np types te” Tipo de entrada URL ‘Se cinput 89 unt ve para campos de entrada que deben contener ura direccién URL, Depenciendo de a compattidad dl navegador ol campo dela URL se puede vaidarautomiticamente cuando se envi |Algunestlsfonos ntligentesraconacen tbe de uy aregen com’ al tcdo para que coincide con ls entra de ur eee0o Ejemplo Tipo de entrada semana et EGPREESSSESST prs of rare sectar na seraray fo Desendiande dl soporte del navegador. un selector de feche suede anarecer ene camp de entre : exexo Ejemplo Ejercicios HTML Penee Nate Reon cases Ejercicio: nel quent formulae, aareque un campo de entrada parse tt, cone nombre “nombre de usa

Atributo de tipo de entrada HTML Description ‘Species the input type te dsplay Losmeprestunee, omnes peien Mapes fare coca pay ea oa ‘e = orn ==Formularios HTML nt Tot de HTMLS Hint Soporte IMs Micon Grificos HTML Atributos de entrada HTML El atributo de valor ! vatueatributo especies el valor nal par un campo de entrade: Ejemplo SELECTOR DE COLOR El atributo de solo lectura ° ! resdony atribut espciica que el campo de entrada es de soo lectura (no se puede cambiar) rene tart nec Durie dine pete “an tore smaec trl Nevegocn =a sere perraeet taras ce progreso arlae Fmd de ie El atributo deshabilitado vmcindure Sona aps Et ieatad tbo capes quel campo de entrada eth deshabitad, eran de a meinen Gentes de Bereicy apostias tes ae orn a eofeacn term ‘COMPARTIR 6o 6 CCERTIFICADOS El atributo de tamafio ‘ae 1 ise uta eapecn etm en carnctres) pr el campo deena ie Ejemplo Query scat ‘oe El atributo maxlength ! navlongth erbut especie la longtad méxima permit pre el campo de ene Fjemplo tora ation» Con un eaxtangen atvbute, al campo de entrada no aceptaré mis que el nimero pamiide de earactees. vt" nas firsama* malengthe0"> ! navlength atibut no prepercion singin comentario. i desea alertar a usuario, abe esrb leSigo JavaSert ‘Mota: Las restceones de entrada no son fle, v avasertproporiona muchas formas de agregar entradas legaes Para resting deforma segura la entrada, tambien dabe ser verfcaca pore receptor lsd! Atributos HTML5S HTMUS spre os sguentes aributos para + sutocompletar 1 enfoque automo {formar * formaion + formenctype método de forma fornovaicate 4 ake y anche lees rin y max + mile * patrsn (regexp) spa El atributo de autocompletar £! autaceopletesribut especie si un formulae campo de entrada debe tener eutacompletade etvado @ ecactivade, ‘cuando la uncin de autocompletar est acvad, el navegador completa automiticamente ls valores de entrada en fnclin de fs valores que e! usvario ha gresadeanterorment, ‘Sugerencias ex posble tener autocompletada“actvada" par l formulae y“desactado” pars campos de enrads cepecticne, 9 veers, autocomplete atrbuto funciona con

‘Consejo: En algunos navegaceres, es poibe que debs actvar a funcén de autocompltar para au El atributo novalidate ‘cuando ext resent, nova especies que le date dl formulaic no deen validare cuando ze evn eeee0 Ejemplo Inca au el ermularig no vader al nwa fore sctione"/atien page pp" novalsdetes “np typee'sutnie’> El atributo de enfoque automético ! autorecus atibuto especiica que ol campo de ereradadeberiaenfocarseautomstiamente cuando sa carga la pga Ejemplo Deje que el campo deenvada "Nome! se enfoave automticamente cuando se carga iin | Hess noes cna El atributo de formulario Formatrbuto especies una 9 ms Forms las «Snput> que pertenece un elemento, Fjemplo Un campo de entrada vendo fra cel farmulaio HTML (pare que sigue send parts del formula: “np eypeeatmie” lube" Sub) eet anes inp 9 El atributo de formacién Sormactdon atu expecta In URL den arene que procerrs el contol de entrada cuando ens formula atrbuto de formacion anus ol aribto de acibn dal First anes input pee"tert™ anes El atributo formenctype tormarctype aribut espciicachmo deben coificarie ls detos del formula cuando se erwin (soo para formulrios con method = post) Fornenctype atbuto alae tribute enctype del elemento ! formenctupe atibuto Se usa con types"subnit™y tyeee"inage” ewe Ejemplo Envar dato de formulario que etin cofiados por defect (l primer botin ‘mutipare/formlario™ (el segundo botén de envi) vo), exdieados como "tos Foret nanes input typetere™ nee “input type sbmit” Forunctype="multhpat/ Forma Subde as atiparormcata"> El atributo formmethod formnethed abut define el métode HTTP pars enviar daar de formularia AL de sci formethed aributo se puede usar con type="submit” y 8 eeo0o Ejemplo sepunco botin de envio anual método HTT del formuaro: ‘fore aetione"/actien pe pap" wet El atributo formnovalidate stibte anal el aibutenoveldste de fore eemante ! formmovalidate atibuto se puede war con Sypes"subnit ae 26000 ‘Un formuaro con ds Botnes de envio (conv sin validacén) on etineactinne te) ‘inp typecsutmie™ volute" Suone™> cer» El atributo formtarget Sorntanees atu especies un nombre o una palabra clive que india dénde mostrarln respuesta que se recive depute de enviar formule 1 forntareesatbuto arin el abuts de caste dl Forse names nput type"tare™ anee"frae”> input eypee'sutmte” vues" Sub a8 Roret”> “input typer'stmie” fowtargete Aen" value'Subrit to nee winds Los atributos de alto y ancho Los atrnutas alan y idath eopecfican Is ature yl anche de un Cinut types" nage”) elemento Siempre especiqueel mato de las imigene.Siel navegador na canace sl tamato le plgina parpeders mientras se carga fas imgenes. Ejemplo ‘fina una imagen coma bot de envio, con atrbutas de altura y enchar: rage” orca" ing sub g3F" alte" = rac mig El atributo de la lista 25st atdbuto se refers 3 un 140 elemento que contene opciones predetndas pare un elemento ee0xo Ejemplo ‘Un elemento con valores pregefiidos en un Los atributos min y max to sn enecicn os were mine ym pre litemens Los atributs min y max funlonan con ls siguientes tips de entrada: nimero,rango, fecha, fecha-hera lca, mes, hore y Ejemplo Elements eon valores min ymax El atributo multiple ! multiple atrbut especiica que el usuario puede igresar més de un valor ene El atributo de marcador de posicin paacehonsaratbut espace un peta que describe al valor erperac de un campo de entrada (un valor de moasra (una breve deserizn dl formate) La pst se musctra an el campo de entrada antes de que el usuario ingree un valor Bl pascal atrbute funciona cones siguertes tpoe de etrad: tanto, blsgueds, url tl, cateseecrinica 26000 Fjemplo Un campo de entrada con un texto de mareador de pos: El atributo requerido et reve rus epee que se dbeconpletar un campo de entra ets deer frm E! reeuired atributo funciona cn os sigulentes tines de entrada: texto, bisqueds, ur tefono, coreoelectrénc, contasehe, sletores de fecha, nim, caila de verfencion, reo y archive, Ejemplo Un campo de eneada requerio: El atributo de paso £1 rapa enact ln arvana lagna ira un apt ler, empl: si step los nimeros lagales poian ser -3, 0, 3,6 ee Consejo: El avibute de paso ot puede usb unto cen los atbutes muime y minime pare crest un ranga de valores legaes Estep seb funciona con bs sgulertes pes. errada! rere, range, fecha echa-or lca. ma, hort sma eeee0 Ejemplo Ls campo de entrada con un nim de tril el epecend Ejercicios HTML Ree Nate kane ascend jercicio: eee were rey repens eee ne ees Sms ‘comiance alia Formulario HTML y elementos de entrada ae Description ‘form Defines an HTML frm forsee input siete Defines an input entra! Para obtener una sta completa de todas ls tquetas HTML disponibles, vce nesta eferencia de eiguetas HTML . nos 0 ome mona cs Fo scene Los mejores tutoriales Referencias principales Mejores ejemplos Certficados web TO Toa Aeterna ene HTM ccna HM Cerne ace ema rae nso ends ‘le haa ino en ‘So tearm ‘Sas Stent SL ton ane on tra was htenes bye aay exe hess tat Crt tec css Geo bores ‘tranny areca