Propiedades y métodos del objeto form

Vamos a ver ahora el objeto form por si solo, para destacar sus propiedades y métodos.

Propiedades del objeto form

Tiene unas cuantas propiedades para ajustar sus atributos mediante Javascript.

action
Es la acción que queremos realizar cuando se submite un formulario. Se coloca generalmente una dirección de correo o la URL a la que le mandaremos los datos. Corresponde con el atributo ACTION del formulario.

elements array
La matriz de elementos contiene cada uno de los campos del formulario.

encoding
El tipo de codificación del formulario

length
El número de campos del formulario.

method
El método por el que mandamos la información. Corresponde con el atributo METHOD del formulario.

name
El nombre del formulario, que corresponde con el atributo NAME del formulario.

target
La ventana o frame en la que está dirigido el formulario. Cuando se submita se actualizará la ventana o frame indicado. Corresponde con el atributo target del formulario.

Ejemplos de trabajo con las propiedades

Con estas propiedades podemos cambiar dinámicamente con Javascript los valores de los atributos del formulario para hacer con él lo que se desee dependiendo de las exigencias del momento.

Por ejemplo podríamos cambiar la URL que recibiría la información del formulario con la instrucción.

document.miFormulario.action = "miPágina.asp"

O cambiar el target para submitir un formulario en una posible ventana secundaria llamada mi_ventana.

document.miFormulario.target = "mi_ventana"

Métodos del objeto form

Estos son los métodos que podemos invocar con un formulario.

submit()
Para hacer que el formulario se submita, aunque no se haya pulsado el botón de submit.

reset()
Para reinicializar todos los campos del formulario, como si se hubiese pulsado el botón de reset. (Javascript 1.1)

Ejemplo de trabajo con los métodos

Vamos a ver un ejemplo muy sencillo sobre cómo validar un formulario para submitirlo en caso de que esté relleno. Para ello vamos a utilizar el método submit() del formulario.

El mecanismo es el siguiente: en vez de colocar un botón de submit colocamos un botón normal (<INPUT type="button">) y hacemos que al pulsar ese botón se llame a una función que es la encargada de validar el formulario y, en caso de que esté correcto, submitirlo.

El formulario quedaría así.

<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="button" value="Enviar" onclick="validaSubmite()">
</form>

Nos fijamos en que no hay botón de submit, sino un botón normal con una llamada a una función que podemos ver a continuación.

function validaSubmite(){
    if (document.miFormulario.campo1.value == "")
       alert("Debe rellenar el formulario")
    else
       document.miFormulario.submit()
}

En la función se comprueba si lo que hay escrito en el formulario es un string vacío. Si es así se muestra un mensaje de alerta que informa que se debe rellenar el formulario. En caso de haya algo en el campo de texto submite el formulario utilizando el método submit del objeto form.