Menu
Coddy logo textTech

Riepilogo - Moduli #2

Fa parte della sezione Fondamenti del percorso HTML di Coddy. Lezione 47 di 60.

challenge icon

Sfida

Facile

Creiamo un semplice modulo di registrazione, proprio come quello nell’immagine qui sotto!

Ecco cosa includere:

  1. Un tag <form> per racchiudere tutto.
  2. Un campo Username con un’etichetta e un input di testo. L’etichetta dovrebbe riportare "Username:" e usare for="username". L’input dovrebbe avere id="username", name="username", type="text" e il segnaposto "Enter your username".
  3. Un campo Email con un’etichetta e un input email. L’etichetta dovrebbe riportare "Email:" e usare for="email". L’input dovrebbe avere id="email", name="email", type="email" e il segnaposto "Enter your email".
  4. Un campo Password con un’etichetta e un input password. L’etichetta dovrebbe riportare "Password:" e usare for="userpassword". L’input dovrebbe avere id="userpassword", name="userpassword", type="password" e il segnaposto "Enter your password".
  5. Un gruppo di pulsanti di opzione che permetta agli utenti di selezionare il proprio tipo: "Student" o "Teacher". Aggiungi un paragrafo o un’intestazione che riporti "User Type:" sopra i pulsanti di opzione. Il pulsante di opzione "Student" dovrebbe avere id="student", name="usertype", value="student" e un’etichetta che riporti "Student". Il pulsante di opzione "Teacher" dovrebbe avere id="teacher", name="usertype", value="teacher" e un’etichetta che riporti "Teacher". Ricorda: entrambi i pulsanti di opzione devono avere lo stesso attributo name ("usertype") in modo che se ne possa selezionare solo uno alla volta.
  6. Un gruppo di caselle di controllo che permetta agli utenti di scegliere i propri interessi: "Sports", "Music" e "Technology". Aggiungi un paragrafo o un’intestazione che riporti "Interests:" sopra le caselle di controllo. La casella di controllo "Sports" dovrebbe avere id="sports", name="interests", value="sports" e un’etichetta che riporti "Sports". La casella di controllo "Music" dovrebbe avere id="music", name="interests", value="music" e un’etichetta che riporti "Music". La casella di controllo "Technology" dovrebbe avere id="technology", name="interests", value="technology" e un’etichetta che riporti "Technology". Ricorda: tutte le caselle di controllo dovrebbero avere lo stesso attributo name ("interests") poiché fanno parte dello stesso gruppo.
  7. Un pulsante Sign Up e un pulsante Clear alla fine del modulo. Il pulsante Sign Up dovrebbe avere type="submit" e il pulsante Clear dovrebbe avere type="reset". Il pulsante Sign Up dovrebbe mostrare il testo "Sign Up" e il pulsante Clear dovrebbe mostrare il testo “Clear”.

Assicurati di includere etichette e titoli appropriati per offrire un’esperienza intuitiva!

Ricorda, gli input dovrebbero includere questi attributi importanti: type, id, name e value.

Provalo tu

<!DOCTYPE html>
<html>
    <body>
        <!-- Scrivi il codice qui -->
    </body>
</html>

Tutte le lezioni di Fondamenti

Esercitati da solo: Playground Web