JavaScript Academy · Lektion

Läsa inmatningsvärden

Åtkom värden från textfält, kryssrutor och select-fält.

Lektion 1 av 413 steg

Läsa inmatningsvärden är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Arbeta med formulärdata

Formulär samlar in användarindata genom fält som textrutor, kryssrutor, radioknappar och rullgardinsmenyer. Varje fälttyp tillhandahåller sina data på ett något annorlunda sätt.

input.value

Textliknande inmatningsfält tillhandahåller sitt aktuella innehåll via egenskapen value, som alltid är en sträng.

const name = document.querySelector("#name");
console.log(name.value);

value är alltid en sträng

Även numeriska inmatningsfält returnerar en sträng. Konvertera uttryckligen när Ni behöver ett tal.

const age = document.querySelector("#age");
const n = Number(age.value);

valueAsNumber

Numeriska inmatningsfält och datumfält tillhandahåller valueAsNumber, som returnerar ett tal direkt (eller NaN om värdet är tomt eller ogiltigt).

const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);

checkbox.checked

Kryssrutor rapporterar sitt tillstånd via den booleska egenskapen checked, inte via value.

const agree = document.querySelector("#agree");
console.log(agree.checked); // true or false

Radioknappar

För en grupp radioknappar hittar Ni den markerade knappen. Egenskapen checked identifierar det valda alternativet.

const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");

select-värde

En rullgardinsmeny där ett alternativ kan väljas tillhandahåller det valda alternativet via value.

const country = document.querySelector("#country");
console.log(country.value);

Flerval

För ett flervalsfält läser Ni selectedOptions och mappar alternativen till värden.

const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);

input-händelsen

Lyssna efter input-händelsen för att reagera på varje tangenttryckning eller förändring i realtid.

name.addEventListener("input", (e) => {
  console.log(e.target.value);
});

change-händelsen

change-händelsen utlöses när ett fält förlorar fokus efter att dess värde har ändrats, eller omedelbart för kryssrutor och select-fält.

country.addEventListener("change", (e) => {
  console.log("chose " + e.target.value);
});

FormData

FormData samlar samtidigt in alla namngivna fält i ett formulär, vilket är idealiskt när data ska skickas till en server.

const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));

Snabb kontroll

Läs av kryssrutan på rätt sätt.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Läs textfält via value (alltid en sträng; använd valueAsNumber för tal), kryssrutor och radioknappar via checked samt rullgardinsmenyer via value eller selectedOptions. Reagera med input-händelsen (varje förändring) eller change-händelsen (när ändringen bekräftas), och samla in allt samtidigt med FormData.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Läsa inmatningsvärden” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Läsa inmatningsvärden”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Läsa inmatningsvärden”?

Åtkom värden från textfält, kryssrutor och select-fält. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Läsa inmatningsvärden”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy