H. index.html


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Servicio que procesa un formulario</title>
10
11	</head>
12
13	<body>
14
15	<h1>Servicio que procesa un formulario</h1>
16
17	<form onsubmit="procesaForm(event) ">
18
19	<p>
20	<label>
21	Saludo:
22	<!-- Como este input tiene name="saludo", su valor se recupera en el
23	servidor con leeTexto("saludo") -->
24	<input name="saludo">
25	</label>
26	</p>
27
28	<p>
29	<label>
30	Nombre:
31	<!-- Como este input tiene name="nombre", su valor se recupera en el
32	servidor con leeTexto("nombre") -->
33	<input name="nombre">
34	</label>
35	</p>
36
37	<p><button type="submit">Procesa</button></p>
38
39	</form>
40
41	<script type="module">
42
43	import { muestraError } from "./lib/js/muestraError.js"
44	import { submitForm } from "./lib/js/submitForm.js"
45
46	/**
47	* @param {Event} event
48	*/
49	async function procesaForm(event) {
50	try {
51	const respuesta =
52	await submitForm(
53	"srv/procesa.php", event)
54	alert(respuesta.body)
55	} catch (error) {
56	muestraError(error)
57	}
58	}
59	// Permite que los eventos de html usen la función.
60	window["procesaForm"] = procesaForm
61
62	</script>
63
64	</body>
65
66	</html>