PricingLoginStart free
HTML Academy · Lektion

Textarea för flerradig inmatning

Samla in flerradig text med textarea-elementet

Lektion 2 av 413 steg

Textarea för flerradig inmatning är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 2 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 HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.

textarea-elementet

Elementet <textarea> tar emot textinmatning över flera rader:

<label for="message">Message</label>
<textarea
  id="message"
  name="message"
  rows="5"
  cols="40"
  placeholder="Enter your message here..."
></textarea>
<!-- textarea is NOT a void element -- it has a closing tag -->
<!-- Default content goes between the tags, not in a value attribute -->

Attributen rows och cols

rows och cols anger den ursprungliga synliga storleken:

<!-- rows: height in lines (default: 2) -->
<!-- cols: width in characters (default: 20) -->
<textarea rows="6" cols="50">...</textarea>

<!-- Better: use CSS for sizing -->
<textarea style="width: 100%; height: 150px; resize: vertical;">

Ange standardinnehåll

Standardtexten placeras mellan den inledande och avslutande taggen:

<textarea name="bio">
Hello! I am a developer who loves HTML.
</textarea>
<!-- Note: whitespace inside textarea IS rendered -->
<!-- The newline after the opening tag will appear in the textarea -->
<!-- Avoid whitespace between tags if you don't want it -->

Ändra storlek med CSS

Styr om användaren kan ändra storleken med CSS-egenskapen resize:

textarea {
  resize: vertical;    /* allow only vertical resize */
  /* resize: horizontal -- only horizontal */
  /* resize: both      -- both directions (default) */
  /* resize: none      -- prevent resizing */

  width: 100%;
  min-height: 120px;
  max-height: 400px;
  padding: 0.5rem;
  box-sizing: border-box;
}

Textarea som växer automatiskt

Få en textarea att växa när användaren skriver med JavaScript:

<textarea id="auto-grow" rows="3" style="overflow: hidden;"></textarea>

<script>
const ta = document.getElementById('auto-grow');
ta.addEventListener('input', () => {
  ta.style.height = 'auto';
  ta.style.height = ta.scrollHeight + 'px';
});
</script>

maxlength och minlength

Begränsa textlängden i en textarea:

<label for="bio">Bio (max 500 characters)</label>
<textarea
  id="bio"
  name="bio"
  maxlength="500"
  minlength="10"
  rows="4"
></textarea>

<!-- Live character count: -->
<small id="char-count">0/500</small>
<script>
document.getElementById('bio').addEventListener('input', function() {
  document.getElementById('char-count').textContent =
    this.value.length + '/500';
});
</script>

Attributet spellcheck

Attributet spellcheck styr stavningskontrollen:

<!-- Enable (default for textarea) -->
<textarea spellcheck="true">...</textarea>

<!-- Disable (for code editors, technical input) -->
<textarea spellcheck="false">...</textarea>

Attributet wrap

Attributet wrap styr hur radbrytningar skickas:

<!-- wrap="soft" (default): text wraps visually but newlines not added -->
<textarea wrap="soft">...</textarea>

<!-- wrap="hard": newlines inserted at wrap points when submitted -->
<!-- Requires cols to be set -->
<textarea wrap="hard" cols="40">...</textarea>

readonly och disabled

Gör en textarea icke-redigerbar:

<!-- readonly: visible, selectable, submitted -->
<textarea readonly>This is read-only text.</textarea>

<!-- disabled: cannot interact, not submitted -->
<textarea disabled>Disabled textarea.</textarea>

Tillgänglighet för textarea

Att tänka på för textareors tillgänglighet:

  • Koppla alltid en <label> med hjälp av for/id
  • Använd aria-describedby för att koppla hjälptips eller teckenräknare
  • Meddela ändringar av teckengränsen för skärmläsare med live-regioner
<label for="comment">Comment</label>
<textarea id="comment" aria-describedby="comment-hint"></textarea>
<p id="comment-hint">Maximum 200 characters.</p>

Formge textarea

Vanlig formgivning av textarea:

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  font-family: inherit;    /* match surrounding font */
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
textarea:focus {
  outline: none;
  border-color: #0070f3;
  box-shadow: 0 0 0 3px rgba(0,112,243,0.2);
}

Snabb kontroll

Hur anger ni förifylld text i en textarea?

Besvara frågan i den interaktiva lektionen

Sammanfattning: textarea

Det viktigaste om textarea:

  • Textinmatning över flera rader med en avslutande tagg
  • Standardinnehåll mellan den inledande och avslutande taggen (inte i attributet value)
  • rows och cols anger den ursprungliga storleken; föredra CSS
  • maxlength och minlength styr längden
  • resize: vertical i CSS för kontrollerad storleksändring
  • Automatisk tillväxt: ange height: scrollHeight vid input-händelsen
Gratis att börja

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
40
Lektioner
159
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Textarea för flerradig inmatning” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Textarea för flerradig inmatning”, 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 HTML Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Textarea för flerradig inmatning”?

Samla in flerradig text med textarea-elementet Ni övar på HTML 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 HTML Academy?

Du behöver inga förkunskaper. Utbildningen i HTML 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 2 av 4.

Hur lång tid tar lektionen ”Textarea för flerradig inmatning”?

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 HTML Academy-lektionen?

Ja. Varje HTML 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

  1. Select- och option-menyer
  2. Textarea för flerradig inmatning
  3. Grupper med kryssrutor och alternativknappar
  4. Datalist för automatisk komplettering
← Tillbaka till HTML Academy