1. Propiedades básicas

argar la página, el navegador crea una matriz de formularios que contiene referencias a los formularios completos de páginas web.

Utilizaremos el objeto de documento para acceder a la matriz de formularios, por lo que document.forms tendrá referencias a todos los formularios de la página.

Ejemplo.0: Para acceder al formulario de la primera página:

document.forms[0];

Por otro lado, para cada formulario de página, el navegador creará una matriz que almacena todos los elementos del formulario. Esta matriz será elementos.

Ejemplo: Para acceder al primer elemento del formulario.

document.forms[0].elements[0];

Ejemplo: Acceso al elemento de formulario más reciente.

document.forms[0].elements[document.forms[0].elements.length-1];

Es mejor que el anterior, o bien está pasando por el formulario o por atributos de nombre.

El objeto de documento puede acceder a cualquier forma de la página por su atributo de nombre:

var formularioPrincipal = document.formulario;var subFormulario = document.sub_formulario; <form name="formulario" > ... </form> <form name="sub_formulario" > ... </form>

Ejemplos:

var formularioPrincipal = document.formulario;

var elementoPrincipal = document.formulario.elementua;

<form name="formulario"> <input type="text" name="elemento" /></form>

document.getElementById() También se puede acceder con el elemento DOM:

var formularioPrincipal = document.getElementById("formulario");

var elementoPrincipal = document.getElementById("elemento");

<form name="formulario" id="formulario" >

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

</form>

Cualquiera que sea el modo de acceso, cada artículo tiene propiedades fácilmente disponibles:

• type: indica el tipo de elemento. Para elementos <input> (texto, botón, casilla de verificación ...) coincide con el atributo de tipo. Para los casos de lista simples (elemento <select>) su valor es select-one, en el caso de serrines multi-choice, sin embargo, select-multiple. Por último, para textarea casos, textarea.
• form: document.getElementById("id_del_elemento").form
• name: XHTML elementuaren name atributuaren balioa .
• value: valor de atributo de valor Para los campos de texto (<input type = "text"> y <textarea>), pueden acceder al contenido de texto. La casilla de verificación y el botón de radio son muy útiles.

Finalmente, los eventos más utilizados para el uso de formularios son:

• onclick: al hacer clic con el ratón sobre el elemento. En cualquier tipo de botón. (<input type="button">, <input type="submit">, <input type="image">).
• onchange: Cuando el usuario cambia el elemento de un elemento de texto cuando un evento cambia (<input type = "text"> o <text>). También ocurre cuando se selecciona la lista (desde <seleccionar>). Por otro lado, el evento se genera después de un cambio, por ejemplo, el usuario cambia al siguiente nombre de dominio.
  • onfocus: Cuando se selecciona un elemento. Técnicamente, el "ha cogido el foco".
  • onblur: onfocus event add-on, cuando el usuario suspende un elemento a otro. Técnicamente, el tema "ha perdido su enfoque".

Formas básicas de uso

1. Obtener información sobre la zona

1.1. Campos de texto

value propietatearekin lortuko dugu.

<input type="text" id="texto" />var valor = document.getElementById("texto").value; <textarea id="paragrafo"></textarea>var valor = document.getElementById("paragrafo").value;

1.2. Radiobutton

radiobutton Cuando tenemos un grupo, generalmente no queremos saber cuál es el valor atributo del valor, la roca, la acidificación, lo que es el botón gastado. La propiedad checked devuelve true al elegir un botón de radio y en caso de error. Por ejemplo:

<input type="radio" value="si" name="pregunta" id="pregunta_si"/> SI <input type="radio" value="no" name="pregunta" id="pregunta_no"/> NO <input type="radio" value="nose" name="pregunta" id="pregunta_nose"/> NS/NC

var elementos = document.getElementsByName("pregunta"); for(var i=0; i<elementos.length; i++) { alert(" Elemento: " + elementos[i].value + "\n elegido: " + elementos[i].checked); }

1.3. Checkbox

Son similares a la anterior, pero en este caso puede seleccionar una.

<input type="checkbox" value="condiciones" name="condiciones" id="condiciones"/> Lo he leído y acepto <input type="checkbox" value="privacidad" name="privacidad" id="privacidad"/> He leído la clausula de privacidad

var elemento = document.getElementById("condiciones");

alert(" Elemento: " + elemento.value + "\n Elegido: " + elemento.checked); elemento = document.getElementById("pribazitatea");

alert(" Elemento: " + elemento.value + "\n Eleccion: " + elemento.checked);

1.4. Select

(<select>) Es el más difícil de extraer los valores de las listas:

<select id="opciones" name="opciones"> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option> <option value="4">Cuarto valor</option></select>

En general, el usuario desea obtener el valor de opción (<opción>) seleccionado. Esto no es fácil, tenemos que dar los siguientes pasos:

var lista = document.getElementById("opciones"); var seleccionada = lista.selectedIndex;

var opcionSeleccionada = lista.options[seleccionada];

var textoSeleccionado = opcionSeleccionada.text;

var valorSeleccionado = opcionSeleccionada.value;

alert("Seleccionada: " + textoSeleccionado + "\n Valor seleccionada: " + valorSeleccionado);

Y acortado:

var lista = document.getElementById("opciones"); var valorSeleccionado = lista.options[lista.selectedIndex].value;

var TextoSeleccionado = lista.options[lista.selectedIndex].text;

2.2. Poner el foco en un elemento

Los elementos clave de TAB cambian el foco en nuestro sitio web (enlaces, imágenes, campos de formulario ...)

Para centrarse en un elemento XHTML, utilizaremos la función focus (). Ejemplo, centrándose en el elemento id = "primero":

document.getElementById("primera").focus(); <form id="formualrio" action="#"> <input type="text" id="primera" /></form>

Podemos centrarnos en el primer campo del primer formulario:

if(document.forms.length > 0) {

for(var i=0; i < document.forms[0].elements.length; i++) { var campo = document.forms[0].elements[i]; if(campo.type != "hidden") { campo.focus(); break; } } }