Usar JavaScript y formularios

Javascript tiene muchos sombreros. Puede utilizar JavaScript para crear efectos especiales. Puede utilizar JavaScript para hacer que sus páginas HTML sean "más inteligentes" aprovechando sus capacidades de toma de decisiones. Y puede utilizar JavaScript para mejorar los formularios HTML. Esta última aplicación es de especial importancia. De todos los sombreros que puede usar JavaScript, sus funciones de procesamiento de formularios se encuentran entre las más buscadas y utilizadas.

Nada causa más miedo en el corazón de un editor web que estas tres letras: CGI. CGI (que significa interfaz de puerta de enlace común), es un mecanismo para transportar datos de forma segura desde un cliente (un navegador) a un servidor. Por lo general, se usa para transferir datos desde un formulario HTML al servidor.

Con JavaScript a su lado, puede procesar formularios simples sin invocar el servidor. Y cuando sea necesario enviar el formulario a un programa CGI, puede hacer que JavaScript se encargue de todos los requisitos preliminares, como validar la entrada para asegurarse de que el usuario haya marcado cada i. En esta columna, veremos de cerca la conexión de formulario de JavaScript, incluido cómo usar el objeto de formulario de JavaScript, cómo leer y configurar el contenido del formulario y cómo activar eventos de JavaScript manipulando los controles de formulario. También cubriremos cómo usar JavaScript para verificar la entrada del formulario y enviar el formulario a un programa CGI.

Aprendiendo JavaScript

Este artículo es parte del archivo de contenido técnico de JavaWorld. Puede aprender mucho sobre la programación de JavaScript leyendo artículos de la serie JavaScript , pero tenga en cuenta que es probable que parte de la información esté desactualizada. Consulte "Uso de los objetos integrados de JavaScript" y "Depuración de programas JavaScript" para obtener más información sobre la programación con JavaScript.

Creando el formulario

Existen pocas diferencias entre un formulario HTML simple y un formulario mejorado con JavaScript. El principal es que un formulario JavaScript se basa en uno o más controladores de eventos, como onClick o onSubmit. Estos invocan una acción de JavaScript cuando el usuario hace algo en el formulario, como hacer clic en un botón. Los controladores de eventos, que se colocan con el resto de los atributos en las etiquetas del formulario HTML, son invisibles para un navegador que no admite JavaScript. Debido a este rasgo, a menudo puede usar un formulario para navegadores JavaScript y no JavaScript.

Los objetos de control de formularios típicos, también llamados "widgets", incluyen lo siguiente:

  • Cuadro de texto para ingresar una línea de texto
  • Pulsador para seleccionar una acción
  • Botones de radio para hacer una selección entre un grupo de opciones
  • Casillas de verificación para seleccionar o anular la selección de una única opción independiente

No me molestaré en enumerar todos los atributos de estos controles (widgets) y cómo usarlos en HTML. La mayoría de las referencias en HTML le proporcionarán los detalles. Para su uso con JavaScript, siempre debe recordar proporcionar un nombre para el formulario en sí y cada control que use. Los nombres le permiten hacer referencia al objeto en su página mejorada con JavaScript.

La forma típica se ve así. Tenga en cuenta que he proporcionado NAME = atributos para todos los controles de formulario, incluido el formulario en sí:

 Enter something in the box:

  • FORM NAME = "myform" define y nombra el formulario. En otra parte de JavaScript, puede hacer referencia a este formulario con el nombre myform . El nombre que le dé a su formulario depende de usted, pero debe cumplir con las reglas de nomenclatura de función / variable estándar de JavaScript (sin espacios, sin caracteres extraños excepto el guión bajo, etc.).
  • ACTION = "" define cómo desea que el navegador maneje el formulario cuando se envía a un programa CGI que se ejecuta en el servidor. Como este ejemplo no está diseñado para enviar nada, se omite la URL del programa CGI.
  • METHOD = "GET" define los datos del método que se pasan al servidor cuando se envía el formulario. En este caso, el atributo es puffer ya que el formulario de ejemplo no envía nada.
  • INPUT TYPE = "texto" define el objeto de cuadro de texto. Este es el marcado HTML estándar.
  • INPUT TYPE = "botón" define el objeto de botón. Este es el marcado HTML estándar, excepto por el controlador onClick.
  • onClick = "testResults (this.form)" es un controlador de eventos - maneja un evento, en este caso haciendo clic en el botón. Cuando se hace clic en el botón, JavaScript ejecuta la expresión entre comillas. La expresión dice llamar a la función testResults en otra parte de la página y pasarle el objeto de formulario actual.

Obtener un valor de un objeto de formulario

Experimentemos obteniendo valores a partir de objetos de formulario. Cargue la página, luego escriba algo en el cuadro de texto. Haga clic en el botón y lo que escribió se mostrará en el cuadro de alerta.

Listado 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

Así es como funciona el guión. JavaScript llama a la función testResults cuando hace clic en el botón del formulario. A la función testResults se le pasa el objeto de formulario usando la sintaxis this.form (la palabra clave this hace referencia al control de botón; formulario es una propiedad del control de botón y representa el objeto de formulario). Me he dado la forma de objeto, el nombre forma dentro de la función TestResult, pero ninguna te puedo nombrar similares.

La función testResults es simple: simplemente copia el contenido del cuadro de texto en una variable llamada TestVar. Observe cómo se hizo referencia al contenido del cuadro de texto. Definí el objeto de formulario que quería usar (llamado formulario ), el objeto dentro del formulario que quería (llamado cuadro de entrada ) y la propiedad de ese objeto que quería (la propiedad del valor ).

Más de JavaWorld

¿Quieres más tutoriales de programación y novedades? Reciba el boletín informativo JavaWorld Enterprise Java en su bandeja de entrada.

Establecer un valor en un objeto de formulario

La propiedad de valor del cuadro de entrada, que se muestra en el ejemplo anterior, es legible y de escritura. Es decir, puede leer lo que esté escrito en el cuadro y puede volver a escribir datos en él. El proceso de establecer el valor en un objeto de formulario es simplemente el reverso de leerlo. Aquí hay un breve ejemplo para demostrar la configuración de un valor en un cuadro de texto de formulario. El proceso es similar al ejemplo anterior, excepto que esta vez hay dos botones. Haga clic en el botón "Leer" y la secuencia de comandos leerá lo que escribió en el cuadro de texto. Haga clic en el botón "Escribir" y el guión escribe una frase particularmente espeluznante en el cuadro de texto.

Listado 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • Cuando haces clic en el botón "Leer", JavaScript llama a la función readText, que lee y muestra el valor que ingresaste en el cuadro de texto.
  • Cuando haces clic en el botón "Escribir", JavaScript llama a la función writeText, que escribe "¡Que tengas un buen día!" en el cuadro de texto.

Leer otros valores de objeto de formulario

El cuadro de texto es quizás el objeto de formulario más común que leerá (o escribirá) usando JavaScript. Sin embargo, puede usar JavaScript para leer y escribir valores de la mayoría de los otros objetos (tenga en cuenta que JavaScript no se puede usar actualmente para leer o escribir datos usando el cuadro de texto de contraseña). Además de los cuadros de texto, JavaScript se puede utilizar con:

  • Cuadro de texto oculto (TYPE = "hidden").
  • Botón de opción (TYPE = "radio")
  • Casilla de verificación (TYPE = "casilla de verificación")
  • Área de texto ()
  • Listas ()

Usar cuadros de texto ocultos

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Las áreas de texto se utilizan para la entrada de texto de varias líneas. El tamaño predeterminado del cuadro de texto es 1 fila por 20 caracteres. Puede cambiar el tamaño utilizando los atributos COLS y ROWS. A continuación, se muestra un ejemplo típico de un área de texto con un cuadro de texto de 40 caracteres de ancho por 7 filas:

Puede utilizar JavaScript para leer el contenido del cuadro del área de texto. Esto se hace con la propiedad value. Aquí hay un ejemplo: