Skjemaer: input, label og button
Bygg tilgjengelige HTML-skjemaer med merkede inndatafelt, ulike inndatatyper, tekstområder, select-elementer og sendeknapper.
Skjemaer: input, label og button er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hvorfor HTML-skjemaer?
Skjemaer er den viktigste måten brukere sender data til en server på: innlogging, søk, betaling og tilbakemeldinger. Nettlesere tilbyr en stor mengde innebygd funksjonalitet – validering, tastaturinndata og mobiltastaturer – som De får gratis ved å bruke innebygde skjemaelementer.
Elementet <form>
Elementet <form> omslutter alle relaterte kontroller. Attributtet action angir URL-en som mottar dataene, og method angir GET eller POST. For SPA-er hindrer De ofte standardinnsendingen og håndterer den med JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Tekst- og e-postinndata
Elementet <input> er arbeidshesten i skjemaer. Attributtet type endrer funksjonaliteten. Bruk type="text" for fritekst og type="email" for e-postadresser (validerer formatet og viser riktig mobiltastatur).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Passord, tall og andre typer
Andre nyttige inndatatyper: password (skjuler tegn), number (validerer tallverdier og viser trinnknapper), date (viser en datovelger), range (glidebryter), checkbox (boolsk av/på-valg) og radio (ett av flere valg).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">Elementet <label> — Kritisk for tilgjengelighet
Alle inndatafelt må ha en tilknyttet <label>. Etiketten forteller brukerne (og skjermlesere) hva feltet brukes til. Når De klikker på etiketten, får inndatafeltet fokus. Bruk attributtet for med samme verdi som inndatafeltets id.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea og select
Bruk <textarea> for tekst over flere linjer (for eksempel kommentarer). Bruk <select> med underordnede <option>-elementer for valg i rullegardinmenyer. Inkluder alltid et tomt standardvalg med en ledetekst som «Velg en kategori».
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Avkrysningsbokser og radioknapper
Gruppér relaterte avkrysningsbokser med en <fieldset> og <legend>. Radioknapper med samme name gjør det mulig å velge bare ett alternativ. Hver knapp trenger sin egen etikett.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Knapper: submit reset button
<button type="submit"> sender inn skjemaet. type="reset" tømmer alle felt. type="button" gjør ingenting som standard og brukes sammen med JavaScript-hendelseslyttere. Angi alltid typen — standardverdien er submit.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Gruppere inndata med <fieldset>
<fieldset> grupperer relaterte kontroller både visuelt og semantisk. Den obligatoriske <legend> fungerer som en beskrivelse. Skjermlesere leser opp legend-teksten før hver kontroll i gruppen, slik at brukeren får kontekst.
Attributtet name — hva som sendes inn
Når et skjema sendes inn, sender nettlesere name=value-paret for hver kontroll. Bare kontroller med attributtet name blir inkludert. For avkrysningsbokser sendes bare de som er krysset av.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Autofyll og autocomplete
Angi verdier for attributtet autocomplete, for eksempel email, given-name, new-password eller current-password, slik at passordbehandlere og nettleserens autofyll kan fylle ut skjemaer riktig.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Hurtigsjekk
Hva er hensikten med attributtet for på et <label>-element?
Oppsummering: tilgjengelige HTML-skjemaer
Hvert inndatafelt trenger en etikett. Velg riktig inndatatype for dataene. Gruppér relaterte kontroller med fieldset. Bruk button type=submit når skjemaet skal sendes inn. Utnytt de innebygde skjemafunksjonene — validering, tastaturnavigasjon og autofyll — før du legger til JavaScript.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Skjemaer: input, label og button» gratis?
Ja – hele teksten i «Skjemaer: input, label og button» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Skjemaer: input, label og button»?
Bygg tilgjengelige HTML-skjemaer med merkede inndatafelt, ulike inndatatyper, tekstområder, select-elementer og sendeknapper. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Skjemaer: input, label og button»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Dokumentstruktur: DOCTYPE, html, head og body
- Semantiske tagger: header, nav, main, article og footer
- Tekst, bilder, lenker og lister
- Skjemaer: input, label og button