Skjemakontroller: input-typer, select og textarea
Bruk tekst-, e-post-, tall-, dato-, avkrysningsboks-, radio-, område-, fil- og fargeinndata sammen med select- og textarea-elementer.
Skjemakontroller: input-typer, select og textarea er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 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.
Hele spekteret av inputtyper
HTML5 introduserte mange spesialiserte inputtyper utover tekst. Hver type forteller nettleseren hva slags data den kan forvente, og muliggjør innebygd validering, passende tastaturer på mobile enheter og plattformtilpassede brukergrensesnittkontroller.
Tekst-, søke- og URL-input
type="text" er reservealternativet for ren tekst. type="search" signaliserer et søkeoptimalisert tastatur og viser ofte en knapp for å tømme feltet. type="url" validerer URL-formatet og viser et URL-tastatur på mobile enheter.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">E-post og telefon
type="email" validerer e-postformatet og viser et e-postoptimalisert tastatur med @-tast. type="tel" viser et numerisk telefontastatur (validerer ikke formatet siden telefonformater varierer fra land til land).
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Tall-, område- og datotyper
type="number" med min/max/step for numeriske data. type="range" for glidebrytere. type="date", type="time", type="datetime-local" for tidsdata med innebygde velgere.
<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">Avmerkingsbokser og radioknapper
Avmerkingsbokser er uavhengige brytere. Radioknapper i samme gruppe (med samme name) tillater bare ett valg. Hver av dem må ha en tilhørende label.
<fieldset>
<legend>Notification preferences</legend>
<label><input type="checkbox" name="email_notif" value="1"> Email</label>
<label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Farge, fil og skjult
type="color" viser en innebygd fargevelger. type="file" åpner en fildialog; bruk accept-attributtet til å begrense filtypene. type="hidden" sender inn data uten en brukergrensesnittkontroll.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Nedtrekkslister med select
Elementet <select> oppretter en nedtrekksliste. Bruk multiple for flervalg (sjelden god brukeropplevelse). Grupper alternativer med <optgroup> for lange lister.
<select name="country">
<option value="">Select a country...</option>
<optgroup label="Europe">
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
</optgroup>
</select>Textarea
<textarea> oppretter et tekstfelt med flere linjer. Bruk rows og cols for startstørrelsen, eller CSS for mer kontroll. Avslutningstaggen er obligatorisk, og alt innhold mellom taggene blir standardverdien.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — alternativer for autofullføring
<datalist> gir en liste med forslag for en input uten å begrense fri tekst. Koble inputen til datalist med attributtene list og id.
<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
<option value="JavaScript">
<option value="TypeScript">
<option value="Python">
<option value="Rust">
</datalist>Attributtene value og name
name er nøkkelen som sendes inn med skjemadataene. value angir startverdien. For avmerkingsbokser og radioknapper er value det som sendes inn når kontrollen er valgt. For tekstinput er value det forhåndsutfylte innholdet.
Størrelse på input og placeholder
placeholder viser hjelpetekst når inputen er tom. Den forsvinner når feltet får fokus, og er ikke en erstatning for en synlig label. size angir den synlige bredden i tegn; foretrekk CSS for størrelsesjustering.
Kort sjekk
Hvilken inputtype viser et numerisk tastatur på mobile enheter og validerer at den angitte verdien er et gyldig tall?
Oppsummering: Skjemakontroller
Bruk semantiske inputtyper: email for e-post, number for tall og date for datoer. Bruk select for faste valg, datalist for foreslått autofullføring og textarea for tekst med flere linjer. Inkluder alltid name-attributter for innsending og value-attributter der det er relevant.
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 «Skjemakontroller: input-typer, select og textarea» gratis?
Ja – hele teksten i «Skjemakontroller: input-typer, select og textarea» 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 «Skjemakontroller: input-typer, select og textarea»?
Bruk tekst-, e-post-, tall-, dato-, avkrysningsboks-, radio-, område-, fil- og fargeinndata sammen med select- og textarea-elementer. 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 1 av 4.
Hvor lang tid tar leksjonen «Skjemakontroller: input-typer, select og textarea»?
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
- Skjemakontroller: input-typer, select og textarea
- ARIA og tilgjengelighet: label, role og aria-*
- Semantisk HTML5: semantiske elementer kontra div-suppe
- Attributter for skjemavalidering