{"id":5640,"date":"2013-06-11T09:41:25","date_gmt":"2013-06-11T14:41:25","guid":{"rendered":"http:\/\/webirix.com\/?p=5640"},"modified":"2013-06-11T09:41:25","modified_gmt":"2013-06-11T14:41:25","slug":"propiedades-basicas-de-formularios-y-elementos-de-javascript","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/propiedades-basicas-de-formularios-y-elementos-de-javascript\/","title":{"rendered":"Basic properties of JavaScript forms and elements"},"content":{"rendered":"

JavaScript dispone de numerosas propiedades y funciones que facilitan la programaci\u00f3n de aplicaciones que manejan formularios. En primer lugar, cuando se carga una p\u00e1gina web, el navegador crea autom\u00e1ticamente un array llamado\u00a0<\/span>forms<\/code>\u00a0y que contiene la referencia a todos los formularios de la p\u00e1gina.<\/span><\/h1>\n

Para acceder al array\u00a0forms<\/code>, se utiliza el objeto\u00a0document<\/code>, por lo que\u00a0document.forms<\/code>\u00a0es el array que contiene todos los formularios de la p\u00e1gina. Como se trata de un array, el acceso a cada formulario se realiza con la misma sintaxis de los arrays. La siguiente instrucci\u00f3n accede al primer formulario de la p\u00e1gina:<\/p>\n

\n
document.forms[0];<\/pre>\n<\/div>\n
Adem\u00e1s del array de formularios, el navegador crea autom\u00e1ticamente un array llamado\u00a0elements<\/code>por cada uno de los formularios de la p\u00e1gina. Cada array\u00a0elements<\/code>\u00a0contiene la referencia a todos los elementos (cuadros de texto, botones, listas desplegables, etc.) de ese formulario. Utilizando la sintaxis de los arrays, la siguiente instrucci\u00f3n obtiene el primer elemento del primer formulario de la p\u00e1gina:<\/p>\n
\n
document.forms[0].elements[0];<\/pre>\n<\/div>\n
La sintaxis de los arrays no siempre es tan concisa. El siguiente ejemplo muestra c\u00f3mo obtener directamente el \u00faltimo elemento del primer formulario de la p\u00e1gina:<\/p>\n
\n
document.forms[0].elements[document.forms[0].elements.length-1];<\/pre>\n<\/div>\n
Aunque esta forma de acceder a los formularios es r\u00e1pida y sencilla, tiene un inconveniente muy grave. \u00bfQu\u00e9 sucede si cambia el dise\u00f1o de la p\u00e1gina y en el c\u00f3digo HTML se cambia el orden de los formularios originales o se a\u00f1aden nuevos formularios? El problema es que\u00a0“el primer formulario de la p\u00e1gina”<\/em>\u00a0ahora podr\u00eda ser otro formulario diferente al que espera la aplicaci\u00f3n.<\/p>\n
En un entorno tan cambiante como el dise\u00f1o web, es muy dif\u00edcil confiar en que el orden de los formularios se mantenga estable en una p\u00e1gina web. Por este motivo, siempre deber\u00eda evitarse el acceso a los formularios de una p\u00e1gina mediante el array\u00a0document.forms<\/code>.<\/p>\n
Una forma de evitar los problemas del m\u00e9todo anterior consiste en acceder a los formularios de una p\u00e1gina a trav\u00e9s de su nombre (atributo\u00a0name<\/code>) o a trav\u00e9s de su atributo\u00a0id<\/code>. El objeto\u00a0document<\/code>permite acceder directamente a cualquier formulario mediante su atributo\u00a0name<\/code>:<\/p>\n
\n
var formularioPrincipal = document.formulario;\r\nvar formularioSecundario = document.otro_formulario;\r\n\r\n<form name=\"formulario\" >\r\n  ...\r\n<\/form>\r\n\r\n<form name=\"otro_formulario\" >\r\n  ...\r\n<\/form><\/pre>\n<\/div>\n
Accediendo de esta forma a los formularios de la p\u00e1gina, el script funciona correctamente aunque se reordenen los formularios o se a\u00f1adan nuevos formularios a la p\u00e1gina. Los elementos de los formularios tambi\u00e9n se pueden acceder directamente mediante su atributo\u00a0name<\/code>:<\/p>\n
\n
var formularioPrincipal = document.formulario;\r\nvar primerElemento = document.formulario.elemento;\r\n\r\n<form name=\"formulario\">\r\n  <input type=\"text\" name=\"elemento\" \/>\r\n<\/form><\/pre>\n<\/div>\n
Obviamente, tambi\u00e9n se puede acceder a los formularios y a sus elementos utilizando las funciones DOM de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual funci\u00f3ndocument.getElementById()<\/code>\u00a0para acceder de forma directa a un formulario y a uno de sus elementos:<\/p>\n
\n
var formularioPrincipal = document.getElementById(\"formulario\");\r\nvar primerElemento = document.getElementById(\"elemento\");\r\n\r\n<form name=\"formulario\" id=\"formulario\" >\r\n  <input type=\"text\" name=\"elemento\" id=\"elemento\" \/>\r\n<\/form><\/pre>\n<\/div>\n
Independientemente del m\u00e9todo utilizado para obtener la referencia a un elemento de formulario, cada elemento dispone de las siguientes propiedades \u00fatiles para el desarrollo de las aplicaciones:<\/p>\n
    \n
  • type<\/code>: indica el tipo de elemento que se trata. Para los elementos de tipo\u00a0<input><\/code>\u00a0(text<\/code>,button<\/code>,\u00a0checkbox<\/code>, etc.) coincide con el valor de su atributo\u00a0type<\/code>. Para las listas desplegables normales (elemento\u00a0<select><\/code>) su valor es\u00a0select-one<\/code>, lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es\u00a0select-multiple<\/code>. Por \u00faltimo, en los elementos de tipo\u00a0<textarea><\/code>, el valor de\u00a0type<\/code>\u00a0es\u00a0textarea<\/code>.<\/li>\n
  • form<\/code>: es una referencia directa al formulario al que pertenece el elemento. As\u00ed, para acceder al formulario de un elemento, se puede utilizardocument.getElementById(\"id_del_elemento\").form<\/code><\/li>\n
  • name<\/code>: obtiene el valor del atributo\u00a0name<\/code>\u00a0de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar.<\/li>\n
  • value<\/code>: permite leer y modificar el valor del atributo\u00a0value<\/code>\u00a0de XHTML. Para los campos de texto (<input type=\"text\"><\/code>\u00a0y\u00a0<textarea><\/code>) obtiene el texto que ha escrito el usuario. Para los botones obtiene el texto que se muestra en el bot\u00f3n. Para los elementos\u00a0checkbox<\/em>\u00a0y\u00a0radiobutton<\/em>no es muy \u00fatil, como se ver\u00e1 m\u00e1s adelante<\/li>\n<\/ul>\n
    Por \u00faltimo, los eventos m\u00e1s utilizados en el manejo de los formularios son los siguientes:<\/p>\n
      \n
    • onclick<\/code>: evento que se produce cuando se pincha con el rat\u00f3n sobre un elemento. Normalmente se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type=\"button\"><\/code>,\u00a0<input type=\"submit\"><\/code>,\u00a0<input type=\"image\"><\/code>).<\/li>\n
    • onchange<\/code>: evento que se produce cuando el usuario cambia el valor de un elemento de texto (<input type=\"text\"><\/code>\u00a0o\u00a0<textarea><\/code>). Tambi\u00e9n se produce cuando el usuario selecciona una opci\u00f3n en una lista desplegable (<select><\/code>). Sin embargo, el evento s\u00f3lo se produce si despu\u00e9s de realizar el cambio, el usuario\u00a0pasa<\/em>\u00a0al siguiente campo del formulario, lo que t\u00e9cnicamente se conoce como que\u00a0“el otro campo de formulario ha perdido el foco”<\/em>.<\/li>\n
    • onfocus<\/code>: evento que se produce cuando el usuario selecciona un elemento del formulario.<\/li>\n
    • onblur<\/code>: evento complementario de\u00a0onfocus<\/code>, ya que se produce cuando el usuario hadeseleccionado<\/em>\u00a0un elemento por haber seleccionado otro elemento del formulario. T\u00e9cnicamente, se dice que el elemento anterior\u00a0“ha perdido el foco”<\/em>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
      JavaScript has many properties and functions that make it easy to program applications that handle forms. First, when a web page is loaded, the browser automatically creates an array called forms and that contains the reference to all the forms on the page. To access the forms array, the document object is used, so document.forms is the ...<\/p>","protected":false},"author":9,"featured_media":5644,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-5640","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2013\/06\/javascript.jpg","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/5640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=5640"}],"version-history":[{"count":1,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/5640\/revisions"}],"predecessor-version":[{"id":5645,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/5640\/revisions\/5645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/5644"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=5640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=5640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=5640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}