Diferencia entre revisiones de «Usuario:Juanda/javascript/Formularios»

De WikiEducator
Saltar a: navegación, buscar
(Propiedades y eventos de los formularios)
(Propiedades y eventos de los formularios)
Línea 41: Línea 41:
 
===Propiedades y eventos de los formularios===
 
===Propiedades y eventos de los formularios===
 
*Propiedades:
 
*Propiedades:
'''type''': Indica el tipo de elemento del que se trata:<br>
+
:'''type''': Indica el tipo de elemento del que se trata:<br>
'''text, button, checkbox, select-one, select-multiple, textarea'''<br>
+
:'''text, button, checkbox, select-one, select-multiple, textarea'''<br>
'''value''': obtiene el texto que se muestra en un botón o en las cajas de texto (text o textarea)...<br>
+
:'''value''': obtiene el texto que se muestra en un botón o en las cajas de texto (text o textarea)...<br>
'''name''': se obtiene el valor del atributo name.<br>
+
:'''name''': se obtiene el valor del atributo name.<br>
'''form''': para referirse al formulario de un elemento:<br>
+
:'''form''': para referirse al formulario de un elemento:<br>
document.getElementById("id_del_elemento").form
+
:document.getElementById("id_del_elemento").form
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
  
 
*Eventos más habituales:
 
*Eventos más habituales:
'''onclick'''
+
:'''onclick'''
'''onchange''': al cambiar el valor de un elemento y perder el foco
+
:'''onchange''': al cambiar el valor de un elemento y perder el foco
'''onfocus''' – '''onblur''': cuando el elemento tiene o pierde el foco.
+
:'''onfocus''' – '''onblur''': cuando el elemento tiene o pierde el foco.
  
 
</div>
 
</div>
 
</div>
 
</div>

Revisión de 06:14 3 oct 2012



Formularios

DOM y acceso al formulario

  • Mediante el array forms del document y su array de elementos:
document.forms[0]; //primer formulario de la página web
document.forms[0].elements[0]; //elemento 0 del formulario
document.forms[0].elements[document.forms[0].elements.length-1]; //último elemento
  • Inconvenientes:
Sintaxis a veces poco concisa
Alteración del orden de los formularios en un entorno tan cambiante como la Web.

Mejor mediante el atributo name de los elementos:

var formularioPrincipal = document.formulario;
var primerElemento = document.formulario.elemento;
 <form name="formulario">
  	<input type="text" name="elemento" />
</form>

O mediante el atributo id:

var formularioPrincipal = document.getElementById("formulario");
var primerElemento = document.getElementById("elemento");
<form name="formulario" id="formulario" >
  	<input type="text" name="elemento" id="elemento" />
</form>

Propiedades y eventos de los formularios

  • Propiedades:
type: Indica el tipo de elemento del que se trata:
text, button, checkbox, select-one, select-multiple, textarea
value: obtiene el texto que se muestra en un botón o en las cajas de texto (text o textarea)...
name: se obtiene el valor del atributo name.
form: para referirse al formulario de un elemento:
document.getElementById("id_del_elemento").form
  • Eventos más habituales:
onclick
onchange: al cambiar el valor de un elemento y perder el foco
onfocusonblur: cuando el elemento tiene o pierde el foco.