Scribd
Cargar
19 vistas5 páginas

HTML Guia 3

Este documento explica cómo procesar datos de formularios con JavaScript. Muestra cómo crear un formulario con controles de tipo texto y botón. Explica que es importante definir un ID para cada control para poder acceder a sus valores desde JavaScript. Luego, presenta ejemplos de cómo obtener y procesar los valores ingresados en distintos controles de formulario al hacer click en un botón.

Cargado por

Andrea Castillo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
19 vistas5 páginas

HTML Guia 3

Este documento explica cómo procesar datos de formularios con JavaScript. Muestra cómo crear un formulario con controles de tipo texto y botón. Explica que es importante definir un ID para cada control para poder acceder a sus valores desde JavaScript. Luego, presenta ejemplos de cómo obtener y procesar los valores ingresados en distintos controles de formulario al hacer click en un botón.

Cargado por

Andrea Castillo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

Catedrático: Marco del Cid Desarrollo Web / Guía No.

PROCESANDO DATOS DE FORMULARIOS CON JAVASCRIP

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).

Veremos la importancia de definir un id a todo control de un formulario para luego poder


procesar, mediante el lenguaje de programación Javascrip, los datos ingresados en el
formulario.

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

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML con JavaScript</title>
</head>
<body>

<form>
<p>Ingrese su nombre:<input type="text" id="nombre"></p>
<p>Ingrese su edad:<input type="text" id="edad"></p>
<p><input type="button" value="Confirmar" onClick="mostrar()"></p>
</form>
La etiqueta <script> es el punto de inicio
<script> del código en Javascript
function mostrar() {
let nom = document.getElementById('nombre').value;
let ed = document.getElementById('edad').value;
alert('Ingresó el nombre:' + nom);
alert('Y la edad:' + ed);
}
</script>

</body>
</html>

1
Catedrático: Marco del Cid Desarrollo Web / Guía No. 3

Ejemplos:

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).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<form>
<p>Ingrese un valor:<input type="text" id="num"></p>
<p><input type="button" value="Calcular cubo" onClick="calcularCubo()"></p>
</form>

<script>
function calcularCubo() {
let v = document.getElementById('num').value;
v = parseInt(v);
let cubo = v * v * v;
alert(cubo);
}
</script>
</body>
</html>

Observación: Para tener acceso a los controles de un formulario desde Javascript, se utiliza :

document.getElementById

Dentro de paréntesis se debe incluir el nombre del control a cual deseamos acceder.

2
Catedrático: Marco del Cid Desarrollo Web / Guía No. 3

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

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<form>
Ingrese una clave:
<input type="password" id="clave">
<br>
<input type="button" value="Confirmar" onClick="verificar()">
</form>

<script>
function verificar() {
let clave = document.getElementById('clave').value;
if (clave.length < 5) {
alert('La clave no puede tener menos de 5 caracteres!!!');
} else {
alert('Largo de clave correcta');
}
}
</script>
</body>
</html>

3
Catedrático: Marco del Cid Desarrollo Web / Guía No. 3

3. Solicitar un nombre y un apellido en controles 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).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p>Ingrese nombre:<input type="text" id="nombre"></p>
<p>Ingrese apellido:<input type="text" id="apellido"></p>
<p><input type="button" value="Concatenar datos ingresados"
onClick="concatenar()"></p>
<p><input type="text" id="resultado"></p>
</form>

<script>
function concatenar() {
let nom = document.getElementById('nombre').value;
let ape = document.getElementById('apellido').value;
document.getElementById('resultado').value = nom + " " + ape;
}
</script>

</body>
</html>

4
Catedrático: Marco del Cid Desarrollo Web / Guía No. 3

Control PASSWORD

Este control HTML es una variante de la de tipo "TEXT". La diferencia fundamental es que cuando se
carga un texto en el campo de edición sólo muestra asteriscos en pantalla, es decir, es fundamental para
el ingreso de claves y para que otros usuarios no vean los caracteres que tipeamos.

La mayoría de las veces este dato se procesa en el servidor, pero podemos en el cliente (es decir en el
navegador) verificar si ha ingresado una cantidad correcta de caracteres, por ejemplo.

Ejemplo: Codificar una página que permita ingresar una password y luego muestre una ventana de
alerta si tiene menos de 5 caracteres.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<form>
Ingrese una clave:
<input type="password" id="clave">
<br>
<input type="button" value="Confirmar" onClick="verificar()">
</form>

<script>
function verificar() {
let clave = document.getElementById('clave').value;
if (clave.length < 5) {
alert('La clave no puede tener menos de 5 caracteres!!!');
} else {
alert('Largo de clave correcta');
}
}
</script>
</body>
</html>

También podría gustarte