Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Sfida: Creare un Modulo con Input ed Etichette | Moduli HTML e Input Utente
HTML Definitivo

bookSfida: Creare un Modulo con Input ed Etichette

Obiettivo

Migliorare l'esperienza utente del sito web creando un modulo interattivo che richieda l'inserimento di nome, email e password, ciascuno con le relative etichette.

Attività

Aggiungere un modulo semplice e intuitivo alla pagina. Seguire questi requisiti:

  1. Campo nome
    • Utilizzare un campo di testo.
    • Impostare il placeholder su John.
    • Rendere il campo attivo di default (autofocus).
  2. Campo email
    • Utilizzare un campo email.
    • Impostare il placeholder su example@gmail.com.
    • Contrassegnare il campo come obbligatorio.
  3. Campo password
    • Utilizzare un campo password.
    • Rendere questo campo obbligatorio.
index.html

index.html

index.css

index.css

copy
  1. autofocus: mette automaticamente a fuoco il campo di input al caricamento della pagina.
  2. required: contrassegna il campo di input come obbligatorio, impedendo l'invio del modulo se lasciato vuoto.
  3. placeholder: fornisce un suggerimento o un testo di esempio per il campo di input.
  4. for e id: associa un'etichetta a un campo di input per una migliore accessibilità.
  5. type: specifica il tipo di dati attesi nel campo di input (ad esempio, text, email, password).
index.html

index.html

index.css

index.css

copy
Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 6

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you explain how the form validation works in this example?

What happens if a required field is left empty?

How can I further customize the appearance of the form?

bookSfida: Creare un Modulo con Input ed Etichette

Scorri per mostrare il menu

Obiettivo

Migliorare l'esperienza utente del sito web creando un modulo interattivo che richieda l'inserimento di nome, email e password, ciascuno con le relative etichette.

Attività

Aggiungere un modulo semplice e intuitivo alla pagina. Seguire questi requisiti:

  1. Campo nome
    • Utilizzare un campo di testo.
    • Impostare il placeholder su John.
    • Rendere il campo attivo di default (autofocus).
  2. Campo email
    • Utilizzare un campo email.
    • Impostare il placeholder su example@gmail.com.
    • Contrassegnare il campo come obbligatorio.
  3. Campo password
    • Utilizzare un campo password.
    • Rendere questo campo obbligatorio.
index.html

index.html

index.css

index.css

copy
  1. autofocus: mette automaticamente a fuoco il campo di input al caricamento della pagina.
  2. required: contrassegna il campo di input come obbligatorio, impedendo l'invio del modulo se lasciato vuoto.
  3. placeholder: fornisce un suggerimento o un testo di esempio per il campo di input.
  4. for e id: associa un'etichetta a un campo di input per una migliore accessibilità.
  5. type: specifica il tipo di dati attesi nel campo di input (ad esempio, text, email, password).
index.html

index.html

index.css

index.css

copy
Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 6
some-alt