Form

I moduli web permettono all'utente di inviare dati all'applicazione...

Costruire un form

Vogliamo costruire un form con tre campi di testo e un bottone:

Per prima cosa dobbiamo usare un elemento <form>, che di fatto è un contenitore per tutti gli altri elementi (name, email, message...):

Troviamo due attributi molto importanti:

  • action: definisce l'URL al quale devono essere spediti i dati
  • method: specifica come devono essere inviati i dati: GET o POST

Ora utilizzeremo tre nuovi elementi:

  • <input>: un campo di testo su una sola riga
  • <label>: l'etichetta di testo che compare vicino al campo di testo
  • <textarea>: un campo di testo su più righe

Notiamo che:

  • gli elementi sono stati inseriti in una lista non ordinata <ul>: questo permetterà di applicare in modo semplice gli stili
  • le <label> hanno un attributo for che fa riferimento all'attributo id del relativo campo di testo
  • negli elementi <input> troviamo un attributo molto importante: type, che dice come l'elemento dovrà apparire e che tipo di dati dovrà accettare... ad esempio l'email non è un semplice testo...
  • la struttura di <textarea> è un po' diversa, perché a differenza degli <input> non è un elemento vuoto

 

Definire i valori di default

Possiamo fare in modo che il form appaia precompilato inserendo dei valori di default:

 

 

L'elemento button

L'elemento <button> permette all'utente di inviare i dati del form all'URL specificato dall'attributo action:

L'elemento button ha anche un attributo type che può avere tre valori:

  • submit: invia i dati
  • reset: ripristina i valori di default del form
  • button: per definire bottoni personalizzati, ad esempio negli shopping online per ricalcolare il totale del carrello dopo aver modificato le quantità

Esercizio: Prenotazione panini

Crea una pagina prenotazione.html contenente un form con i seguenti campi:

  • cognome: text input
  • nome: text input
  • email: email input
  • telefono: tel input
  • data di consegna: date input
  • ora di consegna iniziale: time input
  • ora di consegna finale: time input
  • luogo di consegna: bordo strada / piano terra / primo piano: radio input
  • temperatura delle bibite: range input tra 5 e 20 gradi centigradi
  • colore della confezione: color input
  • ordine urgente: checkbox input
  • ricevuta di pagamento: file input

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

  • panino: select input tra vegetariano, sfizioso, viennese, portoghese, umbro
  • contorno: select input tra nessuno, patatine, crocchette di patate, medaglioni di pollo
  • bibita: select input tra nessuna, acqua, coca cola, fanta, birra

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

  • note: textarea

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

I dati del form devono essere inviati con metodo POST alla pagina salva_prenotazione.php

 

  • HTML

CFP CNOS-FAP DON BOSCO - via XIII Martiri, 86 - 30027 San Donà di Piave (VE) - tel. 0421 338 980 - Organismo di Formazione accreditato dalla Regione del Veneto