FORM HTML

html5I Form servono per raccogliere input dell’Utente. Per utilizzare a pieno i Form, ovvero per poter operare con l’input utente, è necessaria una struttura di backend. Analizzeremo nel dettaglio l’implementazione di questa con Django. In questo articolo ci concentreremo sulla struttura dei Form in HTML, necessaria per poter comprendere a pieno il funzionamento lato server! L’elemento HTML viene utilizzato per creare un modulo HTML per l’input dell’utente. La figura sotto riportata rappresenta un Form HTML di iscrizione. Una volta compilati i campi lato frontend questi alla pressione del tasto submit verranno inviati al server di backend ed elaborati, e se necessario saranno memorizzati in un database.

Esempio di Form HTML

ATTRIBUTI DEI FROM

  • L’attributo action definisce l’azione da eseguire quando il modulo viene inviato. Di solito, i dati del modulo vengono inviati al server quando l’utente fa clic sul pulsante di invio (submit)
  • L’attributo method specifica il metodo HTTP da utilizzare quando si inviano i dati del form. I dati del modulo possono essere inviati come variabili URL (con method=”get”) o come transazione post HTTP (con method=”post”). Il metodo HTTP predefinito quando si inviano i dati del form è GET
  • L’attributo autocomplete specifica se un form deve avere il completamento automatico attivato o disattivato. Quando autocomplete è attivo, il browser completa automaticamente i valori in base ai valori immessi in precedenza dall’utente
  • L’attributo novalidate è un attributo booleano. Quando presente, specifica che i dati del form (input) non devono essere convalidati al momento dell’invio.

METODO HTTP GET

Aggiunge i dati del form all’URL, in coppie nome/valore. NON utilizzare MAI GET per inviare dati sensibili! (i dati del modulo inviato sono visibili nell’URL!). La lunghezza di un URL è limitata (2048 caratteri) . GET è utile per l’invio di form in cui un utente desidera aggiungere il risultato ai segnalibri, inoltre usiamo GET per i dati non protetti, come le stringhe di query in Google.

METODO HTTP POST

Aggiunge i dati del form all’interno del corpo della richiesta HTTP (i dati del form inviato non vengono visualizzati nell’URL). POST non ha limiti di dimensione e può essere utilizzato per inviare grandi quantità di dati. Gli invii di form con POST non possono essere aggiunti ai segnalibri.

Attributi Action e Method

TAG DI INPUT

L’elemento HTML <input> è l’elemento del form più utilizzato. Un elemento <input> può essere visualizzato in molti modi, a seconda dell’attributo type. Il tag <label> definisce un’etichetta per molti elementi del modulo. L’elemento <label> aiuta anche gli utenti che hanno difficoltà a fare clic su regioni molto piccole (come pulsanti di opzione o caselle di controllo), perché quando l’utente fa clic sul testo all’interno dell’elemento <label>, attiva il pulsante di opzione/casella di controllo. L’attributo for del tag <label> dovrebbe essere uguale all’attributo id dell’elemento <input> affinché l’etichetta sia legata al field di input.

  • <input type=”text”> definisce un campo di input a riga singola per l’input di testo
  • <input type=”radio”> definisce un pulsante di opzione. I pulsanti di opzione consentono a un utente di selezionare UNA opzione tra un numero limitato di scelte
  • L’input type=”checkbox”> definisce una casella di controllo. Le caselle di controllo consentono a un utente di selezionare ZERO o PIU’ opzioni tra un numero limitato di scelte
  • <input type=”submit”> definisce un pulsante per inviare i dati del form a un gestore del form stesso. Il gestore è in genere un file sul server con uno script per l’elaborazione dei dati di input. Viene specificato nell’attributo action del form
  • <input type=”password”> definisce un campo password
  • <input type=”reset”> definisce un pulsante di ripristino che reimposterà tutti i valori del form ai valori predefiniti
  • <input type=”button”> definisce un pulsante
  • <input type=”color”> viene utilizzato per i campi di input che dovrebbero contenere un colore. A seconda del supporto del browser, nel campo di input può essere visualizzato un selettore di colori
  • <input type=”date”> viene utilizzato per i campi di input che dovrebbero contenere una data. A seconda del supporto del browser, nel campo di input può essere visualizzato un selettore di date
  • <input type=”email”> viene utilizzato per i campi di input che dovrebbero contenere un indirizzo e-mail. A seconda del supporto del browser, l’indirizzo e-mail può essere convalidato automaticamente una volta inviato. Alcuni smartphone riconoscono il tipo di e-mail e aggiungono “.com” alla tastiera in modo che corrisponda all’input dell’e-mail
  • <input type=”file”> definisce un campo di selezione file e un pulsante “Sfoglia” per il caricamento dei file
  • <input type=”hidden”> definisce un campo di input nascosto (non visibile a un utente). Un campo nascosto consente agli sviluppatori Web di includere dati che non possono essere visualizzati o modificati dagli utenti quando viene inviato un modulo. Un campo nascosto spesso memorizza quale record del database deve essere aggiornato quando viene inviato il form. Nota: anche se il valore non viene mostrato all’utente nel contenuto della pagina, è visibile (e può essere modificato) utilizzando gli strumenti per sviluppatori di qualsiasi browser o la funzionalità “Visualizza sorgente”. Non utilizzare input nascosti come forma di sicurezza!
  • <input type=”number”> definisce un campo di input numerico. Puoi anche impostare restrizioni su quali numeri sono accettati settando gli attributi min e max
  • <input type=”range”> definisce un controllo per inserire un numero il cui valore esatto non è importante (come un controllo slider). L’intervallo predefinito è compreso tra 0 e 100. Tuttavia, è possibile impostare restrizioni sui numeri accettati con gli attributi min, max e step
  • <input type=”tel”> viene utilizzato per i campi di input che dovrebbero contenere un numero di telefono
  • <input type=”time”> consente all’utente di selezionare un’ora (nessun fuso orario). A seconda del supporto del browser, nel campo di input può essere visualizzato un selettore di tempo
  • <input type=”url”> viene utilizzato per i campi di input che dovrebbero contenere un indirizzo URL. A seconda del supporto del browser, il campo dell’URL può essere convalidato automaticamente una volta inviato.

GLI ELEMENTI DEI FORM HTML

  • ELEMENTO SELECT

L’elemento <select> definisce un elenco a discesa. Gli elementi <option> definiscono un’opzione che può essere selezionata. Per impostazione predefinita, è selezionato il primo elemento nell’elenco a discesa. Per definire un’opzione preselezionata, aggiungere l’attributo selected all’opzione. Utilizza l’attributo multiple sul tag select per consentire all’utente di selezionare più di un valore.

  • ELEMENTO TEXTAREA

L’elemento <textarea> definisce un campo di input multilinea (un’area di testo). L’attributo rows specifica il numero di righe visibili in un’area di testo. Mentre l’attributo cols specifica la larghezza visibile.

  • ELEMENTI FILEDSET E LEGEND

L’elemento <fieldset> viene utilizzato per raggruppare i dati correlati in un form. L’elemento <legend> definisce una didascalia per l’elemento <fieldset>.

  • ELEMENTO DATALIST

L’elemento <datalist> specifica un elenco di opzioni predefinite per un elemento <input>. Gli utenti vedranno un elenco a discesa delle opzioni predefinite mentre immettono i dati. L’attributo list dell’elemento <input>, deve fare riferimento all’attributo id dell’elemento <datalist>.

ATTRIBUTI DI INPUT HTML

  • L’attributo value specifica un valore iniziale per un campo di input
  • L’attributo input readonly specifica che un campo di input è di sola lettura. Un campo di input di sola lettura non può essere modificato (tuttavia, un utente può accedervi tramite tabulazione, evidenziarlo e copiarne il testo). Il valore di un campo di input di sola lettura verrà inviato al momento dell’invio del form!
  • L’attributo input disabled specifica che un campo di input deve essere disabilitato. Un campo di input disabled è inutilizzabile e non cliccabile. Il valore non verrà inviato al momento dell’invio del modulo!
  • L’attributo size di input specifica la larghezza visibile, in caratteri, di un campo di input. Il valore predefinito per size è 20. Nota: l’attributo size funziona con i seguenti tipi di input: text, search, tel, url, e-mail, e password
  • L’attributo input maxlength specifica il numero massimo di caratteri consentiti in un campo di input
  • Gli attributi di input min e max specificano i valori minimo e massimo per un campo di input. Gli attributi min e max funzionano con i seguenti tipi di input: number, range, date, datetime-local, month, time and week. Suggerimento: utilizza gli attributi max e min insieme per creare un intervallo di valori validi
  • L’attributo input multiple specifica che l’utente può inserire più di un valore in un campo di input. L’attributo multiple funziona con i seguenti tipi di input: e-mail e file
  • L’attributo placeholder di input specifica un breve suggerimento che descrive il valore previsto di un campo di input (un valore di esempio o una breve descrizione del formato previsto). l breve suggerimento viene visualizzato nel campo di immissione prima che l’utente immetta un valore. L’attributo placeholder funziona con i seguenti tipi di input: text, search, url, tel, e-mail, e password
  • L’attributo input required specifica che un campo di input deve essere compilato prima di inviare il form. L’attributo richiesto funziona con i seguenti tipi di input: text, search, url, tel, e-mail, password, date pickers, number, checkbox, radio, e file
  • L’attributo step di input specifica gli intervalli di numeri per un campo di input. Esempio: se step=”3″, i numeri potrebbero essere -3, 0, 3, 6, ecc. Suggerimento: questo attributo può essere utilizzato insieme agli attributi max e min per creare un intervallo di valori. L’attributo step funziona con i seguenti tipi di input: number, range, date, datetime-local, month, time and week
  • L’attributo autofocus di input specifica che un campo dovrebbe essere attivato automaticamente quando la pagina viene caricata
  • L’attributo di autocomplete specifica se un form o un campo di input deve avere il completamento automatico attivato o disattivato. autocomplete consente al browser di prevedere il valore. Quando un utente inizia a digitare in un campo, il browser dovrebbe visualizzare le opzioni per compilare il campo, in base ai valori digitati in precedenza. L’attributo autocomplete funziona con <form> e i seguenti tipi di <input>: text, search, url, tel, e-mail, password, datepickers, range, e color
Copy to Clipboard

LINK AI POST PRECEDENTI

PREVIOUS POST LINKS

LINK AL CODICE SU GITHUB

GITHUB