Esercizi Area di Testo <textarea> HTML

Codegrind Team•Jul 16 2023

Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo dell’elemento <textarea> in HTML.

Esercizio 1

Crea una `textarea` per permettere all'utente di inserire del testo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
  </head>
  <body>
    <textarea></textarea>
  </body>
</html>

Esercizio 2

Crea una `textarea` con del testo predefinito all'interno.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
  </head>
  <body>
    <textarea>Questo è del testo predefinito.</textarea>
  </body>
</html>

Esercizio 3

Limita la lunghezza massima del testo che può essere inserito nella `textarea`.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
  </head>
  <body>
    <textarea maxlength="50"></textarea>
  </body>
</html>

Esercizio 4

Crea una `textarea` con dimensioni fisse.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
  </head>
  <body>
    <textarea rows="5" cols="30"></textarea>
  </body>
</html>

Esercizio 5

Crea una `textarea` con barre di scorrimento.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
  </head>
  <body>
    <textarea rows="5" cols="30" style="overflow: auto;"></textarea>
  </body>
</html>

Esercizio 6

Crea una `textarea` disabilitata in modo che l'utente non possa modificarla.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
  </head>
  <body>
    <textarea rows="5" cols="30" disabled>
Questa text area è disabilitata.</textarea
    >
  </body>
</html>

Esercizio 7

Crea una `textarea` con un nome e un ID assegnati.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
  </head>
  <body>
    <textarea rows="5" cols="30" name="comment" id="comment"></textarea>
  </body>
</html>

Esercizio 8

Crea una `textarea` con un'etichetta associata.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
  </head>
  <body>
    <label for="comment">Inserisci il tuo commento:</label>
    <br />
    <textarea rows="5" cols="30" name="comment" id="comment"></textarea>
  </body>
</html>

Esercizio 9

Aggiungi un testo di riempimento che scompare quando l'utente inizia a digitare.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
  </head>
  <body>
    <textarea
      rows="5"
      cols="30"
      placeholder="Inserisci il tuo testo qui"></textarea>
  </body>
</html>

Esercizio 10

Crea una `textarea` con stile tramite attributi.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
  </head>
  <body>
    <textarea
      rows="5"
      cols="30"
      style="background-color: lightgray; color: blue; font-size: 16px;"></textarea>
  </body>
</html>