Formularios en JavaScript
El mostrador del té tiene un vale. El formulario es #slip. Lleva un campo de texto #guest cuyo name también es guest, un campo numérico #cups cuyo name también es cups, y un botón #send con type="submit". Debajo, #note dice blank.
Un formulario junta campos con nombre. Lo escrito está en value, y eso es siempre texto, aunque el type sea number. Enviar es el evento submit del formulario. Sin preventDefault, el navegador abre la dirección del formulario y esta página se va. Este vale llama a preventDefault para que la nota siga leyéndose. La página pone lida, pone 2, pulsa send una vez, y la línea queda lida / 2 / stayed.
No es la tira de tickets
La tira puso un listener de clic en el padre y leyó event.target. Su línea era red / blue / gold / 1, sin preventDefault. La placa sí lo llamó, en un enlace. Su línea era click / seal / plaque / true / quiet. Este vale no es ninguno de los dos. No hay botón gold ni currentTarget. El evento se llama submit. Importan lida y el texto 2.
getElementById("guest") encuentra el campo por id. slip.elements.guest lo encuentra por el name, a través del formulario. Aquí id y name son la misma palabra. Otra lección mirará si el campo está vacío. Esta página no. Un invitado vacío también se envía.
Qué anota el vale
La nota empieza en blank. Invitado y tazas empiezan vacíos. El botón sigue diciendo send. Lee las filas en orden. Cada fragmento parte del vale vacío, salvo la fila de la página, que es la demo de abajo. Esa demo pulsa send una vez.
📊 Qué anota el vale
| Momento | Qué lees | Nota | Fácil de confundir |
|---|---|---|---|
| invitado en lida | guest.value |
lida | leer el id guest |
| tazas en 2 | cups.value |
2, y es texto | esperar el número 2 |
| clic en send, la función escribe stayed | la nota | stayed | llamar a slip.submit(), que se salta el listener |
| los dos nombres, por el formulario | elements.guest y elements.cups |
lida 2 | leer elements.slip |
| script de la página | la línea | lida / 2 / stayed | red / blue / gold / 1 |
value no convierte un campo numérico en número. Tras guardar 2, cups.value son los caracteres 2. typeof cups.value es "string". Si luego quieres un número, lo conviertes tú. Esta línea no lo hace.
send.click() dispara submit porque el type del botón es submit. slip.submit() es otra llamada: envía el formulario y no ejecuta tu listener, así que preventDefault no llega a correr. Esta página usa el clic.
Dos caminos al mismo campo
getElementById("cups") usa el id. slip.elements.cups usa el name, y solo cuando ya tienes el formulario. Aquí los dos atributos coinciden. Si el name fuera count y el id siguiera siendo cups, no existiría elements.cups y el campo sería elements.count.
El nombre del invitado
El campo empieza vacío. El script guarda lida en value y vuelve a leer esa propiedad en la nota. Todavía no se envía nada.
let guest = document.getElementById("guest");
let note = document.getElementById("note");
guest.value = "lida";
note.textContent = guest.value;
console.log(note.textContent);
El registro es lida. El id es guest. La nota no es la palabra guest. Es el texto que hay en value.
Cuántas tazas
Vale nuevo. El campo de tazas es type="number". Guarda 2, lee value y pregunta typeof.
let cups = document.getElementById("cups");
let note = document.getElementById("note");
cups.value = "2";
note.textContent = cups.value + " " + typeof cups.value;
console.log(note.textContent);
El registro es 2 string. La caja parece numérica y el script recibe texto. Guarda el número 2 sin comillas y la propiedad vuelve como el texto "2".
El botón de enviar
Vale nuevo. El listener está en el formulario, para submit. Llama a preventDefault y escribe stayed. Luego la página pulsa send. No llama a slip.submit().
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function pour(event) {
event.preventDefault();
note.textContent = "stayed";
}
slip.addEventListener("submit", pour);
document.getElementById("send").click();
console.log(note.textContent);
El registro es stayed. El listener corrió, así que el navegador no se fue. Si llamas a slip.submit() en lugar del clic, pour no corre. La nota sigue en blank.
Los nombres en el vale
Vale nuevo, sin listener. El script escribe los dos campos por slip.elements, con el name, y los junta en la nota.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
note.textContent = slip.elements.guest.value + " " + slip.elements.cups.value;
console.log(note.textContent);
El registro es lida 2. elements.guest es el input cuyo name es guest, no un elemento con id slip. El espacio solo separa la nota. La línea de la página usa luego /.
La línea bajo el vale
El script está al final del body, después del formulario y de los párrafos. mark empieza en left. El listener evita el envío normal, copia los dos valores en la nota y pone mark en stayed. Luego llena lida y 2 y pulsa send una vez. La línea se escribe después de ese clic.
<!DOCTYPE html>
<html>
<head>
<title>forms — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let mark = "left";
function pour(event) {
event.preventDefault();
note.textContent =
slip.elements.guest.value + " / " + slip.elements.cups.value;
mark = "stayed";
}
slip.addEventListener("submit", pour);
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent =
note.textContent + " / " + mark;
</script>
</body>
</html>
La línea es lida / 2 / stayed. La primera palabra es el invitado, la segunda las tazas como texto, la última mark. El listener corrió, así que es stayed y no left. La nota termina en lida / 2. blank ya no está. La línea de los tickets es otra página. Este vale no comprueba que los campos estén llenos.
En el mostrador
- Guarda lida en el invitado y lee
value. La nota es lida. - Guarda 2 en las tazas y lee
valuecontypeof. La nota es 2 string. - Escucha submit, llama a
preventDefaulty pulsa send. La nota es stayed. - Lee los dos campos con
slip.elements. Luego la línea: lida / 2 / stayed.
Tropiezos en el mostrador
Las etiquetas siguen siendo guest, cups y send. La nota no es la palabra slip.
- Tomar
cups.valuepor el número 2 - Llamar a
slip.submit()y esperar apour - Olvidar
preventDefault, y el navegador abre la dirección - Leer el id guest cuando querías
value - Buscar
slip.elements.slip - Comprobar campos vacíos o patrones en esta página
- Leer la línea como red / blue / gold / 1
Quédate con esto
- Tras guardar lida,
guest.valuees lida cups.valuees el texto 2 ytypeofes"string"send.click()ejecuta el listener de submit;slip.submit()nopreventDefaultes la razón de que la página siga aquí y la nota pueda decir stayedslip.elements.guestyslip.elements.cupsleen los campos con nombre- La línea es lida / 2 / stayed
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior