Esercizio 3: Forms

Keywords: forms, inputs, requests

Esercizio precedente Esercizio successivo

Ripassiamo insieme:

L'elemento HTML form viene utilizzato per creare un modulo o una sezione di un modulo all'interno di una pagina web, consentendo agli utenti di inserire e inviare dati. All'interno dell'elemento form, gli sviluppatori possono aggiungere campi di input come campi di testo, caselle di controllo, pulsanti di opzione e altro ancora, insieme ad un pulsante di invio per permettere agli utenti di inviare i dati inseriti. Quando un utente invia un modulo, i dati vengono raccolti e inviati al server web specificato nell'attributo "action" dell'elemento form, tramite una richiesta GET o POST. Vediamo un esempio con una action di prova.

Form

<form action="https://www.fabiovitali.it/TW/DHDK/doResponse.php" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<input type="submit" value="Subscribe!">
</div>
</form>

Input types

Esistono molti tipi diversi di input: date, colori, numeri, range... Per una lista comprensiva, rimandiamo ad MDN.

Ogni tipologia di input consente di inserire una specifica informazione. Vediamo alcuni esempi:

  • Checkbox (chiamato anche flag). Un bottone "booleano".

Esercizi di oggi

Usiamo Codepen (o anche un forms.html locale, a scelta).

Creiamo diverse tipologie di form insieme, cercando le giuste tipologie di input caso per caso. Utilizziamo la documentazione di MDN.

  • Esercizio 1.

    Form per prenotare un volo da un luogo all'altro (POST). Crea degli input per (minimo) i seguenti campi:

    • Nome
    • Cognome
    • Email
    • Luogo di partenza
    • Luogo di arrivo
    • Data (non prima della data odierna!)
    • Accompagnamento o no
  • Esercizio 2.

    Form per iscriversi ad una newsletter (POST). Crea degli input per (minimo) i seguenti campi:

    • Nome
    • Cognome
    • Email
    • Se voglio ricevere notizie quotidianamente, una volta a settimana o una volta al mese
    • Se accetto il trattamento dei dati
  • Esercizio 3.

    Form per creare una figura geometrica colorata (GET). L'utente può scegliere una figura (cerchio, quadrato, triangolo equilatero). Ci serviranno:

    • Opzioni per la figura: cerchio, quadrato, triangolo
    • Opzioni per diametro/lunghezza del lato
    • Colore dello sfondo
    • Spessore del bordo
    • Colore del bordo

© Andrea Schimmenti & Fabio Vitali. TW 2022-2023.