jueves, 12 de abril de 2012

24. Controles FORM, BUTTON y TEXT.

Hasta ahora hemos visto como crear un formulario con controles de tipo BUTTON. Agregamos un control de tipo TEXT (permite al operador cargar caracteres por teclado).

Ahora veremos la importancia de definir un NAME a todo control de un formulario.

Con un ejemplo veremos estos controles: Confeccionar un formulario que permita ingresar el nombre y edad de una persona: 

<html>
<head></head>
<body>

<script language="JavaScript">
function mostrar()
{
  var nom=document.form1.nombre.value;
  var ed=document.form1.edad.value;
  alert('Ingreso el nombre:' + nom);
  alert('Y la edad:' + ed);
}
</script>
<form name="form1">
  Ingrese su nombre:
  <input type="text" name="nombre"><br>
  Ingrese su edad:
  <input type="text" name="edad"><br>
  <input type="button" value="Confirmar" onClick="mostrar()">
</form>
</body>
</html>

En este problema tenemos cuatro controles: 1 FORM, 1 BUTTON, 2 TEXT. El evento que se dispara al presionar el botón se llama mostrar.

La función 'mostrar' accede a los contenidos de los dos controles de tipo TEXT:

var nom=document.form1.nombre.value;
  var ed=document.form1.edad.value;
 
Para hacer más clara la función guardamos en dos variables auxiliares los contenidos de los controles de tipo TEXT. Hay que tener en cuenta que a nuestra página la accedemos por medio del objeto: document, luego, al formulario que hemos creado, lo accedemos por el NAME que le dimos al formulario, en este caso: form1, luego, a cada control que contiene el formulario, lo accedemos nuevamento por su NAME, es decir: nombre y edad respectivamente. Por último, para acceder a las cadenas cargadas debemos indicar la propiedad value.

  
PROBLEMAS

1 - Crear un programa que permita cargar un entero en un text y al presionar un botón nos muestre dicho valor elevado al cubo (emplear la función alert).

2 - Cargar dos números en objetos de tipo text y al presionar un botón, mostrar el mayor.

3 - Cargar un nombre y un apellido en sendos text. Al presionar un botón, concatenarlos y mostrarlos en un tercer text (Tener en cuenta que podemos modificar la propiedad value de un objeto TEXT cuando ocurre un evento).

No hay comentarios:

Publicar un comentario

Nota: solo los miembros de este blog pueden publicar comentarios.