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

De WikiEducator
Saltar a: navegación, buscar
(Propiedades y eventos de los formularios)
Línea 40: Línea 40:
 
<div class="slide">
 
<div class="slide">
 
===Propiedades y eventos de los formularios===
 
===Propiedades y eventos de los formularios===
'''type''': Indica el tipo de elemento del que se trata:
+
*Propiedades:
'''text, button, checkbox, select-one, select-multiple, textarea'''
+
'''type''': Indica el tipo de elemento del que se trata:<br>
'''value''': obtiene el texto que se muestra en un botón o en las cajas de texto (text o textarea)...
+
'''text, button, checkbox, select-one, select-multiple, textarea'''<br>
'''name''': se obtiene el valor del atributo name.
+
'''value''': obtiene el texto que se muestra en un botón o en las cajas de texto (text o textarea)...<br>
'''form''': para referirse al formulario de un elemento:
+
'''name''': se obtiene el valor del atributo name.<br>
 +
'''form''': para referirse al formulario de un elemento:<br>
 
document.getElementById("id_del_elemento").form
 
document.getElementById("id_del_elemento").form
 +
</div>
 +
<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

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.