Lectura de valores de entrada
Acceda a los valores de campos de texto, casillas de verificación y selectores.
Lectura de valores de entrada es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Trabajar con datos de formularios
Los formularios recopilan la entrada del usuario mediante campos como cuadros de texto, casillas de verificación, botones de opción y menús desplegables. Cada uno expone sus datos de una manera ligeramente distinta.
input.value
Los campos de entrada similares a texto exponen su contenido actual mediante la propiedad value, que siempre es una cadena.
const name = document.querySelector("#name");
console.log(name.value);value siempre es una cadena
Incluso los campos numéricos devuelven una cadena. Realice una conversión explícita cuando necesite un número.
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
Los campos numéricos y de fecha ofrecen valueAsNumber, que devuelve directamente un número (o NaN si está vacío o no es válido).
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
Las casillas de verificación indican su estado mediante la propiedad booleana checked, no mediante value.
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or falseBotones de opción
En un grupo de botones de opción, busque el que esté marcado. La propiedad checked identifica la opción seleccionada.
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");select.value
Un menú desplegable de selección única expone la opción elegida mediante value.
const country = document.querySelector("#country");
console.log(country.value);Selección múltiple
En una selección múltiple, lea selectedOptions y obtenga sus valores mediante un mapeo.
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);El evento input
Escuche el evento input para reaccionar a cada pulsación de tecla o cambio en tiempo real.
name.addEventListener("input", (e) => {
console.log(e.target.value);
});El evento change
El evento change se dispara cuando un campo pierde el foco después de que su valor haya cambiado, o inmediatamente en el caso de las casillas de verificación y los menús de selección.
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
FormData recopila de una vez todos los campos con nombre de un formulario, lo que resulta ideal para enviarlos a un servidor.
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));Comprobación rápida
Lea correctamente la casilla de verificación.
Resumen
Lea las entradas de texto mediante value (siempre una cadena; use valueAsNumber para los números), las casillas de verificación y los botones de opción mediante checked, y los menús desplegables mediante value o selectedOptions. Reaccione con el evento input (cada cambio) o con el evento change (al confirmar), y recopile todo de una vez con FormData.
Preguntas frecuentes
¿La lección «Lectura de valores de entrada» es gratis?
Sí — el texto completo de «Lectura de valores de entrada» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Lectura de valores de entrada»?
Acceda a los valores de campos de texto, casillas de verificación y selectores. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Lectura de valores de entrada»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Lectura de valores de entrada
- El evento submit
- Validación en el cliente
- La API Constraint Validation