Esercizi Select HTML

Codegrind Team•Jul 16 2023

Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo del tag <select> nei moduli HTML, per creare i noti “menu a tendina”.

Esercizio 1

Crea una `select` con alcune opzioni per la scelta.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
  </head>
  <body>
    <select>
      <option value="opzione1">Opzione 1</option>
      <option value="opzione2">Opzione 2</option>
      <option value="opzione3">Opzione 3</option>
    </select>
  </body>
</html>

Esercizio 2

Crea una `select` con una opzione selezionata di default.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
  </head>
  <body>
    <select>
      <option value="opzione1">Opzione 1</option>
      <option value="opzione2" selected>Opzione 2 (predefinito)</option>
      <option value="opzione3">Opzione 3</option>
    </select>
  </body>
</html>

Esercizio 3

Crea una `select` con alcune opzioni disabilitate.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
  </head>
  <body>
    <select>
      <option value="opzione1">Opzione 1</option>
      <option value="opzione2" disabled>Opzione 2 (disabilitato)</option>
      <option value="opzione3">Opzione 3</option>
    </select>
  </body>
</html>

Esercizio 4

Crea una `select` con gruppi di opzioni.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
  </head>
  <body>
    <select>
      <optgroup label="Gruppo 1">
        <option value="opzione1">Opzione 1</option>
        <option value="opzione2">Opzione 2</option>
      </optgroup>
      <optgroup label="Gruppo 2">
        <option value="opzione3">Opzione 3</option>
        <option value="opzione4">Opzione 4</option>
      </optgroup>
    </select>
  </body>
</html>

Esercizio 5

Aggiungi attributi personalizzati alle opzioni della `select`.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
  </head>
  <body>
    <select>
      <option value="opzione1" data-info="importante">Opzione 1</option>
      <option value="opzione2" data-info="normale">Opzione 2</option>
      <option value="opzione3" data-info="opzionale">Opzione 3</option>
    </select>
  </body>
</html>

Esercizio 6

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

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
  </head>
  <body>
    <select name="scelta" id="scelta">
      <option value="opzione1">Opzione 1</option>
      <option value="opzione2">Opzione 2</option>
      <option value="opzione3">Opzione 3</option>
    </select>
  </body>
</html>

Esercizio 7

Crea una `select` con un'etichetta associata.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
  </head>
  <body>
    <label for="scelta">Seleziona una opzione:</label>
    <br />
    <select name="scelta" id="scelta">
      <option value="opzione1">Opzione 1</option>
      <option value="opzione2">Opzione 2</option>
      <option value="opzione3">Opzione 3</option>
    </select>
  </body>
</html>

Esercizio 8

Crea una `select` che permette la selezione multipla.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
  </head>
  <body>
    <select name="scelta" id="scelta" multiple>
      <option value="opzione1">Opzione 1</option>
      <option value="opzione2">Opzione 2</option>
      <option value="opzione3">Opzione 3</option>
    </select>
  </body>
</html>

Esercizio 9

Crea una `select` con un'opzione di input personalizzato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
  </head>
  <body>
    <select>
      <option value="opzione1">Opzione 1</option>
      <option value="opzione2">Opzione 2</option>
      <option value="opzione3">
        Altro: <input type="text" placeholder="Inserisci la tua opzione" />
      </option>
    </select>
  </body>
</html>

Esercizio 10

Aggiungi un testo di riempimento che scompare quando l'utente seleziona una opzione.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
  </head>
  <body>
    <select>
      <option value="" disabled selected>Scegli un'opzione</option>
      <option value="opzione1">Opzione 1</option>
      <option value="opzione2">Opzione 2</option>
      <option value="opzione3">Opzione 3</option>
    </select>
  </body>
</html>