7/26/2019 5 Formularios Javascript 130701114235 Phpapp01

http://slidepdf.com/reader/full/5-formularios-javascript-130701114235-phpapp01 1/4

FORMULARIOS HTML - JAVA SCRIPT 1

FORMULARIOS EN HTML

1.- FORMULARIOS

Para enviar información entre p!ina" #e$ % e& "ervi'or( "e )"an &o" form)&ario"* Lo"

form)ario" "on $&o+)e" HTML( &o" c)a&e"(contienen información acerca 'e &o" 'ato" +)e "e van a

enviar( e"to" 'ato" 'ato" "e enc)entran e"tr)ct)ra'o" en otro" $&o+)e" &&ama'o" I,PUT*

Sintaxis:

<form onsubmit="">

</form>

2.- INPUTS

Lo" inp)t" "on $&o+)e" +)e permiten e& re!i"tro 'e información por parte 'e& )")ario( e"ta

información e" envia'a c)an'o e& form)&ario e" envia'o* Lo" $&o+)e" inp)t c)entan con &o"

"i!)iente" atri$)to"

type: .efine e& tipo 'e entra'a +)e "e vi")a&i/ar* Tenemo" &o" "i!)iente" tipo"

• text: e" )n campo 'e te0to 'e )na "o&a &nea*

• buttn: 'efine )n $otón*

• !"e!#bx: 'efine )n contro& c2ec3$o0*

• $i%e: 'efine )n contro& para car!ar arc2ivo"*

• "i&&en: oc)&ta e& inp)t 'e &a vi"ta 'e& )")ario*

• i'a(e: m)e"tra )na ima!en como inp)t*

• pass)*&: oc)&ta &o" caractere" +)e "e 'i!itan por )n "m$o&o*

• *a&i: 'efine )n contro& ra'io$)tton

• *eset: 'efine )n $otón +)e a& "er p)&"a'o v)e&ve &o" va&ore" va&)e a &o" pre'efini'o"*

• sub'it: envia e& form)&ario*

i&: como c)a&+)ier otro $&o+)e en HTML( "e &e p)e'e a"i!nar )na i'( en e"te ca"o e" m)% 4ti&

c)an'o "e )"a para 2acer va&i'acione" 'e"'e Java Script*

na'e: 5" e& nom$re +)e "e &e a"i!na a& campo 'e& form)&ario( e"te campo e" )"a'o por &a

 p!ina #e$ a &a +)e va 'iri!i'o e& action 'e& form)&ario para o$tener &o" va&ore" re!i"tra'o" en e&

form)&ario*

+a%ue: 5"te contiene e& va&or +)e "e 2a re!i"tra'o en e& form)&ario6'e"'e 7ava"cript8( tam$i9n

"e )"a para pre'efinir )n va&or en e& inp)t*

&isab%e&: 'e"activa e& contro& para &a e'ición c)an'o &a p!ina e" car!a'a*

si,e: e"pecifica e& anc2o*

2.1.- At*ibuts p*i+a&s

A&!)no" atri$)to" "o&o f)ncionan con 'etermina'o" tipo"6t%pe8 'e inp)t

Docente Mazuelos Saavedra, Jean 

7/26/2019 5 Formularios Javascript 130701114235 Phpapp01

http://slidepdf.com/reader/full/5-formularios-javascript-130701114235-phpapp01 2/4

FORMULARIOS HTML - JAVA SCRIPT :

a!!ept: 'efine &o" tipo" 'e fic2ero" a "er acepta'o"( "o&o 'i"poni$&e para  file*

a%t: 'efine )n te0to a&ternativo en ca"o 'e +)e &a ima!en no "ea car!a'a( "o&o 'i"poni$&e

 para image*

!"e!#e&:  'efine "i e& contro& e"t pre"e&ecciona'o( "o&o 'i"poni$&e para radio  %

checkbox *

'ax%en("t: 'efine e& tama;o &mite( en caractere"( +)e "e p)e'e permitir( 'i"poni$&e

"o&o para text  % password *

*ea&n%y: 'efine +)e e& te0to en e& inp)t "o&o p)e'e "er "e&ecciona'o ma" no po"i$&e 'e

e'itar( 'i"poni$&e para text % pass)*&*

s*!: e"pecifica &a )r& por &a c)a& "e va a car!ar &a ima!en( "o&o 'i"poni$&e para image*

2.2.- Ee'p%s:

A+)i "e &e m)e"tra a&!)no" e7emp&o"

Input &e tip text:

<input type="text" id="txtNombres" name="txtNombres" />

Input &e tip !"e!#bx p*e&e$ini&:

<input  type="checkbox"  checked="checked"  id="chkPredefinido"

name="chkPredefinido" />

Input &e% tip text !n %/'ite &e !a*a!te*es a 0:

<input type="text" id="txtNombres" name="txtNombres" maxlength="45" />

.- LA3EL

5& $&o+)e e"pecia& &a$e& "e )"a para 'efinir )n te0to i'entificativo 'e )n inp)t* Sinta0i"

<label for="txtNombres"> Nombres: </label>

5& atri$)to e"pecia& for &e permite i'entificar6por i'8 a )n inp)t( c)an'o "e 2ace c&ic en e& &a$e&

"imp&emente "e 'a e& foco a 'ic2o inp)t*

0.- USO 4E 5A6A S7RIPT

Lo" form)&ario" tienen e& evento onsubmit   &a c)a& e" 'i"para'a c)an'o "e pre"iona )n inp)t 'e&

tipo ")$mit 'entro 'e )n form)&ario* 5"te evento 'etecta e& va&or 'ev)e&to por &a f)nción 7ava"cript+)e "e e7ec)ta ')rante 'ic2o evento( c)an'o &a f)nción 'ev)e&ve )n va&or  false e& form)&ario no e"

envia'o*

Para po'er )"ar va&i'ar o interact)ar con &o" inp)t 'e &o" form)&ario" e" nece"ario

i'entificar&o"( o en ") 'efecto( i'entificar e& form)&ario % 2acer )"o 'e &a e"tr)ct)ra .OM para po'er

acce'er a &o" inp)t me'iante ") nom$re*

C)an'o "e )"a &a e"tr)ct)ra .OM( "e 'e$e )"ar e& name 'e& $&o+)e pra po'er i'entificar&o

'entro 'e& r$o&* Tenien'o e& ca"o 'e )n inp)t con name=”texto” 'entro 'e )n form)&ario "e po'ria

Docente Mazuelos Saavedra, Jean 

7/26/2019 5 Formularios Javascript 130701114235 Phpapp01

http://slidepdf.com/reader/full/5-formularios-javascript-130701114235-phpapp01 3/4

FORMULARIOS HTML - JAVA SCRIPT <

acce'er a& inp)t 'e &a "i!)iente manera

$*'.text

0.1.- Ee'p% &e i&enti$i!a!i8n p* I4.

<html>

<head>

<script language="JavaScript">

function validar(){

var txt  document.getElementById(txt!ombres)!

alert("u nombre es#  txt.value)!

return fa#se!

$

</script>

</head>

<body>

<form onsubmit="%avascript:va#idar()!"><label for="txtNombres"> Nombres: </label>

<input type="text" id="txtNombres" name="txtNombres" />

<input type="submit" value="&nviar" />

</form>

</body>

</html>

0.2.- Ee'p% &e I&enti$i!a!i8n p* na+e(a!i8n &e 9*b% 4OM:

<html>

<head>

<script language="JavaScript">

function validar(){var form  document.getElementById(form)!

alert("u nombre es#  form.txt!ombres.value)!

return fa#se!

$

</script>

</head>

<body>

<form id="form" onsubmit="%avascript:va#idar()!">

<label for="txtNombres"> Nombres: </label>

<input type="text" id="txtNombres" name="txtNombres" />

<input type="submit" value="&nviar" />

</form>

</body>

</html>

0..- Fun!ines y N&s ti%es:

A+)i "e &e" pre"enta )na &i"ta 'e f)ncione" JavaScript 4ti&e"

%en(t": e" )n no'o pre"ente en to'o &o" te0to"( in'ica e& tama;o 'e &a ca'ena 'e

te0to6en caractere"8*

!"a*At;+a* in&ex<: e" )na f)nción +)e "o&o 'ev)e&ve e& caracter +)e "e enc)entra

)$ica'o en e& n'ice index ( to'o" &o" tipo" ca'ena contienene"ta f)nción

Docente Mazuelos Saavedra, Jean 

7/26/2019 5 Formularios Javascript 130701114235 Phpapp01

http://slidepdf.com/reader/full/5-formularios-javascript-130701114235-phpapp01 4/4

FORMULARIOS HTML - JAVA SCRIPT =

.- E5ER7I7IOS

• Crear )n form)&ario HTML en e& c)a& "e m)e"tren &o" campo"có'i!o( nom$re"( ape&&i'o"(

"e0o( 'irección( te&efono( emai&*

• Va&i'ar( me'ainte 7ava"cript( +)e to'o" &o" campo" 'e& form)&ario HTML no ten!an campo"

vacio"*

• Crear )na f)nción &&ama'a contiene en 7ava"cript con 2 parámetros(argumentos)( e& primer

 parmetro conten'r )n te0to( e& "e!)n'o parmetro conten'r e& te0to a verificar( &a f)nción

'evo&vera tr)e c)an'o e& te0to a verificar conten!a a&!4n caracter 'e& primer parmetro( en

ca"o contrario 'evo&ver fa&"e*

• Va&i'ar +)e &o" campo" nom$re"( ape&&i'o" conten!an "o&o caractere" 'e te0to( &o" campo"

te&efono % có'i!o "o&o ten!an n4mero" % e& campo 'irección "o&o ten!a n4mero" % te0to( e&

campo emai& 'e$e "er va&i'a'o para +)e "e acer+)e &o m" po"i$&e a )n correo e&ectrónico

ver'a'ero*

Docente Mazuelos Saavedra, Jean