Esercizio sui tag form

.

🧩 Parte 1 – Struttura e intestazione

  1. Inserisci un <title> personalizzato: “Modulo iscrizione corso RIM”.
  2. Crea un <header> con il nome della scuola e un breve slogan.
  3. Aggiungi un <h1> con il titolo del modulo e un’emoji decorativa.
  4. Inserisci un paragrafo introduttivo che spieghi lo scopo del form.
  5. Aggiungi un’immagine decorativa o il logo della scuola in cima.

🧾 Parte 2 – Dati anagrafici

  1. Crea un <fieldset> con <legend> “Dati personali”.
  2. Inserisci i campi: nome, cognome, email, telefono.
  3. Imposta l’attributo required sui campi obbligatori.
  4. Aggiungi placeholder esplicativi per ogni campo.
  5. Crea un campo date per la data di nascita.
  6. Inserisci un campo number per indicare l’età.
  7. Crea un menu <select> per la “Regione di provenienza” (almeno 5 regioni).
  8. Aggiungi un campo url per indicare un eventuale sito personale.
  9. Inserisci un campo email con controllo di formato.

🗂 Parte 3 – Scelte e preferenze

  1. Crea un gruppo di radio button per il “Genere” (Maschio, Femmina, Altro).
  2. Aggiungi un gruppo di checkbox per gli “Interessi” (es. economia, marketing, lingue, informatica).
  3. Crea un campo color per far scegliere il colore preferito.
  4. Inserisci un campo range per valutare il livello di conoscenza informatica (0–10).
  5. Crea un campo search per cercare corsi disponibili.
  6. Aggiungi un <datalist> collegato con almeno 5 opzioni di corsi.
  7. Crea un campo select per indicare il “Corso scelto” con almeno 3 opzioni.
  8. Crea un secondo <select multiple> per “Lingue conosciute” (es. Italiano, Inglese, Spagnolo, Francese).
  9. Aggiungi un <textarea> per “Motivazioni dell’iscrizione” (almeno 4 righe).

💾 Parte 4 – File e dati tecnici

  1. Inserisci un campo file per caricare un documento d’identità.
  2. Limita i tipi accettati con accept=".pdf,.jpg,.png".
  3. Aggiungi un campo hidden con un codice utente fisso.
  4. Inserisci un campo number per “Anni di esperienza scolastica”.
  5. Crea un campo month per indicare il “Mese di inizio corso”.
  6. Aggiungi un campo week per indicare la “Settimana di frequenza”.
  7. Inserisci un campo time per indicare l’orario preferito delle lezioni.
  8. Aggiungi un campo datetime-local per la data e ora di iscrizione.
  9. Inserisci un campo tel per un secondo recapito telefonico.
  10. Crea un campo url per un eventuale profilo LinkedIn.

📤 Parte 5 – Pulsanti e chiusura

  1. Inserisci un pulsante di tipo submit con etichetta “Invia iscrizione”.
  2. Aggiungi un pulsante di tipo reset con etichetta “Cancella dati”.
  3. Inserisci un pulsante di tipo button con testo “Verifica dati” (senza JavaScript).
  4. Crea un <fieldset> separato con titolo “Conferma finale”.
  5. Inserisci una checkbox con testo “Confermo di aver letto l’informativa privacy”.
  6. Aggiungi un campo output (vuoto) per eventuali risultati calcolati.
  7. Inserisci un <footer> con il nome dell’autore e la data di creazione del file.

👉 Consegna:
Salva il file come modulo_iscrizione.html e assicurati che tutti i campi e gli attributi funzionino correttamente nel browser.
Valore complessivo: 40 punti (1 punto per ogni richiesta).


Questa voce è stata pubblicata in Senza categoria. Contrassegna il permalink.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *