Propiedades y MÃ©todos de Formularios

Los formularios y controles, como <input>, tienen muchos eventos y propiedades especiales.

Trabajar con formularios serÃ¡ mucho mÃ¡s conveniente cuando los aprendamos.

NavegaciÃ³n: Formularios y elementos

Los formularios del documento son miembros de la colecciÃ³n especial document.forms.

Esa es la llamada â€œColecciÃ³n nombradaâ€: es ambas cosas, nombrada y ordenada. Podemos usar el nombre o el nÃºmero en el documento para conseguir el formulario.

          document.forms.my; // el formulario con name="my"
document.forms[0]; // el primer formulario en el documento
        

Cuando tenemos un formulario, cualquier elemento se encuentra disponible en la colecciÃ³n nombrada form.elements.

Por ejemplo:

<form name="my">
  <input name="one" value="1">
  <input name="two" value="2">
</form>

<script>
  // obtenciÃ³n del formulario
  let form = document.forms.my; // elemento <form name="my">

  // get the element
  let elem = form.elements.one; // elemento <input name="one">

  alert(elem.value); // 1
</script>

Puede haber mÃºltiples elementos con el mismo nombre. Esto es tÃpico en el caso de los botones de radio y checkboxes.

En ese caso form.elements[name] es una colecciÃ³n. Por ejemplo:

<form>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>

<script>
let form = document.forms[0];

let ageElems = form.elements.age;

alert(ageElems[0]); // [object HTMLInputElement]
</script>

Estas propiedades de navegaciÃ³n no dependen de la estructura de las etiquetas. Todos los controles, sin importar quÃ© tan profundos se encuentren en el formulario, estÃ¡n disponibles en form.elements.

Un formulario puede tener uno o varios elementos <fieldset> dentro. Estos tambiÃ©n tienen la propiedad elements que lista los controles del formulario dentro de ellos.

Por ejemplo:

<body>
  <form id="form">
    <fieldset name="userFields">
      <legend>info</legend>
      <input name="login" type="text">
    </fieldset>
  </form>

  <script>
    alert(form.elements.login); // <input name="login">

    let fieldset = form.elements.userFields;
    alert(fieldset); // HTMLFieldSetElement

    // podemos obtener el input por su nombre tanto desde el formulario como desde el fieldset
    alert(fieldset.elements.login == form.elements.login); // true
  </script>
</body>

Hay una notaciÃ³n corta: podemos acceder el elemento como form[index/name].

En otras palabras, en lugar de form.elements.login podemos escribir form.login.

Esto tambiÃ©n funciona, pero tiene un error menor: si accedemos un elemento, y cambiamos su name, se mantendrÃ¡ disponible mediante el nombre anterior (asÃ como mediante el nuevo).

Esto es fÃ¡cil de ver en un ejemplo:

<form id="form">
  <input name="login">
</form>

<script>
  alert(form.elements.login == form.login); // true, el mismo <input>

  form.login.name = "username"; // cambiamos el nombre el <input>

  // form.elements actualiza el nombre:
  alert(form.elements.login); // undefined
  alert(form.elements.username); // input

  // form permite ambos nombres: el nuevo y el viejo
  alert(form.username == form.login); // true
</script>

Esto usualmente no es un problema, porque raramente se cambian los nombres de los elementos de un formulario.

Referencia inversa: element.form

Para cualquier elemento, el formulario estÃ¡ disponible como element.form. AsÃ que un formulario referencia todos los elementos, y los elementos referencian el formulario.

AquÃ la imagen:

Por ejemplo:

<form id="form">
  <input type="text" name="login">
</form>

<script>
  // form -> element
  let login = form.login;

  // element -> form
  alert(login.form); // HTMLFormElement
</script>

Elementos del formulario

Hablemos de los controles de los formularios.

input y textarea

Podemos acceder sus valores como input.value (cadena) o input.checked (booleano) para casillas de verificaciÃ³n (checkboxes) y botones de opciÃ³n (radio buttons).

De esta manera:

          input.value = "New value";
textarea.value = "New text";

input.checked = true; // para checkboxes o radios
        

Observa que incluso aunque <textarea>...</textarea> contenga su valor como HTML anidado, nunca deberÃamos usar textarea.innerHTML para acceder a Ã©l.

Esto solo guarda el HTML que habÃa inicialmente en la pÃ¡gina, no su valor actual.

select y option

Un elemento <select> tiene 3 propiedades importantes:

select.options â€“ la colecciÃ³n de subelementos <option>,
select.value â€“ el valor del <option> seleccionado actualmente, y
select.selectedIndex â€“ el nÃºmero del <option> seleccionado actualmente.

Ellas proveen tres formas diferentes de asignar un valor para un elemento <select>:

Encontrar el elemento <option> correspondiente (por ejemplo entre select.options) y asignar a su option.selected un true.
Si conocemos un nuevo valor: Asignar tal valor a select.value.
Si conocemos el nuevo nÃºmero de opciÃ³n: Asignar tal nÃºmero a select.selectedIndex.

AquÃ hay un ejemplo de los tres mÃ©todos:

<select id="select">
  <option value="apple">Apple</option>
  <option value="pear">Pear</option>
  <option value="banana">Banana</option>
</select>

<script>
  // las tres lÃneas hacen lo mismo
  select.options[2].selected = true;
  select.selectedIndex = 2;
  select.value = 'banana';
  // Recuerda que las opciones comienzan en cero, asÃ que index 2 significa la tercera opciÃ³n.
</script>

A diferencia de la mayorÃa de controles, <select> permite seleccionar mÃºltiples opciones a la vez si tiene el atributo multiple. Esta caracterÃstica es raramente utilizada.

En ese caso, necesitamos usar la primera forma: AÃ±ade/elimina la propiedad selected de los subelementos <option>.

Podemos obtener su colecciÃ³n como select.options, por ejemplo:

<select id="select" multiple>
  <option value="blues" selected>Blues</option>
  <option value="rock" selected>Rock</option>
  <option value="classic">Classic</option>
</select>

<script>
  // obtener todos los valores seleccionados del multi-select
  let selected = Array.from(select.options)
    .filter(option => option.selected)
    .map(option => option.value);

  alert(selected); // blues,rock
</script>

La especificaciÃ³n completa del elemento <select> estÃ¡ disponible en la especificaciÃ³n https://html.spec.whatwg.org/multipage/forms.html#the-select-element.

new Option

En la especificaciÃ³n hay una sintaxis muy corta para crear elementos <option>:

option = new Option(text, value, defaultSelected, selected);

Esta sintaxis es opcional. Podemos usar document.createElement('option') y asignar atributos manualmente. AÃºn puede ser mÃ¡s corta, aquÃ los parÃ¡metros:

text â€“ el texto dentro del option,
value â€“ el valor del option,
defaultSelected â€“ si es true, entonces se le crea el atributo HTML selected,
selected â€“ si es true, el option se selecciona.

La diferencia entre defaultSelected y selected es que defaultSelected define si el atributo HTML (el que obtenemos con option.getAttribute('selected')), mientras que selected define si el option estÃ¡ seleccionado o no en el DOM.

En la prÃ¡ctica, uno deberÃa usualmente establecer ambos valores en true o false. O simplemente omitirlos, quedarÃ¡n con el predeterminado false.

Por ejemplo, aquÃ creamos un nuevo Option â€œunselectedâ€:

          let option = new Option("Text", "value");
// crea <option value="value">Text</option>
        

El mismo elemento, pero seleccionado:

let option = new Option("Text", "value", true, true);

Los elementos Option tienen propiedades:

option.selected: Es el option seleccionado.
option.index: El nÃºmero del option respecto a los demÃ¡s en su <select>.
option.text: El contenido del option (visto por el visitante).

Referencias

EspecificaciÃ³n: https://html.spec.whatwg.org/multipage/forms.html.

Resumen

NavegaciÃ³n de formularios:

document.forms: Un formulario estÃ¡ disponible como document.forms[name/index].
form.elements: Los elementos del formulario estÃ¡n disponibles como form.elements[name/index], o puedes usar solo form[name/index]. La propiedad elements tambiÃ©n funciona para los <fieldset>.
element.form: Los elementos referencian a su formulario en la propiedad form.

El valor estÃ¡ disponible con input.value, textarea.value, select.value etc. Para checkboxes y radios, usa input.checked para determinar si el valor estÃ¡ seleccionado.

Para <select> tambiÃ©n podemos obtener el valor con el Ãndice select.selectedIndex o a travÃ©s de la colecciÃ³n de opciones select.options.

Esto es lo bÃ¡sico para empezar a trabajar con formularios. Conoceremos muchos ejemplos mÃ¡s adelante en el tutorial.

En el siguiente capÃtulo vamos a hablar sobre los eventos focus y blur que pueden ocurrir en cualquier elemento, pero son manejados mayormente en formularios.

Propiedades y MÃ©todos de Formularios

NavegaciÃ³n: Formularios y elementos

Referencia inversa: element.form

Elementos del formulario

input y textarea

select y option

new Option

Referencias

Resumen

Tareas

AÃ±ade una opciÃ³n al select

Comentarios

CapÃtulo

NavegaciÃ³n de lecciÃ³n

CapÃ­tulo

NavegaciÃ³n de lecciÃ³n

CapÃtulo