Formulärkontroller: input-typer, select och textarea
Använd text-, e-post-, nummer-, datum-, kryssrute-, radio-, intervall-, fil- och färginmatning tillsammans med select- och textarea-element.
Formulärkontroller: input-typer, select och textarea är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Hela paletten av inputtyper
HTML5 introducerade många specialiserade inputtyper utöver text. Varje typ talar om för webbläsaren vilken sorts data som förväntas, vilket möjliggör inbyggd validering, lämpliga tangentbord på mobila enheter och plattformsanpassade UI-kontroller.
Text-, sök- och URL-fält
type="text" är standardalternativet för vanlig text. type="search" antyder ett sökoptimerat tangentbord och visar ofta en rensningsknapp. type="url" validerar URL-formatet och visar ett URL-tangentbord på mobila enheter.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">E-post och telefon
type="email" validerar e-postformatet och visar ett e-postoptimerat tangentbord med @-tangent. type="tel" visar ett numeriskt telefontangentbord (validerar inte formatet eftersom telefonformat varierar mellan länder).
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Tal-, intervall- och datumtyper
type="number" används med min/max/step för numeriska data. type="range" används för reglage. type="date", type="time", type="datetime-local" används för tidsrelaterade data med inbyggda väljare.
<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">Kryssrutor och radioknappar
Kryssrutor är oberoende växlar. Radioknappar i samma grupp (med samma name) tillåter bara ett val. Varje kontroll behöver en tillhörande 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>Färg-, fil- och dolda fält
type="color" visar en inbyggd färgväljare. type="file" öppnar en fildialog; använd attributet accept för att begränsa filtyperna. type="hidden" skickar data utan en UI-kontroll.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Select-rullgardinsmenyer
Elementet <select> skapar en rullgardinsmeny. Använd multiple för flerval (sällan bra för användarupplevelsen). Gruppera alternativ med <optgroup> för långa listor.
<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> skapar ett textfält med flera rader. Använd rows och cols för den ursprungliga storleken eller CSS för bättre kontroll. Sluttaggen krävs, och allt innehåll mellan taggarna blir standardvärdet.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — Alternativ för autocomplettering
<datalist> tillhandahåller en lista med förslag för ett inputfält utan att begränsa fri text. Koppla inputfältet till datalist med attributen list och 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>Attributen value och name
name är nyckeln som skickas i formulärinskickningen. value anger startvärdet. För kryssrutor och radioknappar är value det som skickas när kontrollen är markerad. För textfält är value det förifyllda innehållet.
Storlek på input och placeholder
placeholder visar hjälptext när inputfältet är tomt. Den försvinner vid fokus och ersätter inte en synlig label. size anger den synliga bredden i antal tecken; föredra CSS för storleksangivelse.
Snabb kontroll
Vilken inputtyp visar ett numeriskt tangentbord på mobilen och validerar att det angivna värdet är ett giltigt tal?
Sammanfattning: formulärkontroller
Använd semantiska inputtyper: email för e-post, number för tal och date för datum. Använd select för fasta val, datalist för föreslagen autocomplettering och textarea för text med flera rader. Inkludera alltid name-attribut för inskickning och value-attribut där det är lämpligt.
Lär dig HTML 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
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Formulärkontroller: input-typer, select och textarea” gratis?
Ja – hela texten till ”Formulärkontroller: input-typer, select och textarea” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Formulärkontroller: input-typer, select och textarea”?
Använd text-, e-post-, nummer-, datum-, kryssrute-, radio-, intervall-, fil- och färginmatning tillsammans med select- och textarea-element. Ni övar på Frontend 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 Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend 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 ”Formulärkontroller: input-typer, select och textarea”?
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 Frontend Academy-lektionen?
Ja. Varje Frontend 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
- Formulärkontroller: input-typer, select och textarea
- ARIA och tillgänglighet: label, role och aria-*
- Semantisk HTML5: semantik kontra div-soppa
- Attribut för formulärvalidering