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