Curso de JavaScript

javaScript

Tutorial para desarrollar en Web mediante JavaScript

Introducción | Elementos del lenguaje | DOM  | Eventos  | Formularios  | Expresiones regulares

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 onfocus – onblur: cuando el elemento tiene o pierde el foco.