Form

Form reso da Opera (cliccando sull'immagine si troverà il codice HTML usato per generarlo). I sottoelementi, dall'alto in basso, sono: casella di testo, selezione singola, menù a tendina, checkbox, text area, pulsante di invio, il tutto inserito in una tabella.

In informatica, il termine form (letteralmente formulario, modulo) indica la parte di interfaccia utente di un'applicazione web che consente all'utente client di inserire e inviare al web server/application server uno o più dati liberamente digitati dallo stesso sulla tastiera attraverso l'uso di componenti grafici detti widget presenti sull'interfaccia stessa; per descriverlo può essere utile la metafora della "scheda da compilare" per l'inserimento di dati. Nella maggior parte dei casi il termine è riferito a form contenuti in una pagina web: ad esempio, le caselle di testo e i menù a tendina di una pagina di registrazione o di login costituiscono un form.

Descrizione

Più in particolare, l'elemento HTML <FORM> è usato per realizzare form in una pagina web. In HTML sono considerati parte del form anche i pulsanti ripristina o cancella e invia. Di solito i form vengono utilizzati per inviare dati ad un database server oppure per inviare e-mail.

Si tratta dunque di un elemento che inserisce contenuti interattivi per l'utente nella pagina web o in un'applicazione web inserendosi nel contesto del web dinamico. Tutti i dati di un form una volta inviati dal web browser del client al web server devono essere trattati o elaborati da una pagina web dinamica lato server.

Il termine è usato, in senso più esteso, nell'ambiente di sviluppo Visual Basic per indicare una finestra principale dell'applicazione, in cui possono essere inseriti elementi visuali come pulsanti o caselle di testo.

Sottoelementi o widget

Esempio di casella di testo

Esempio di checkbox

Esempio di combo box

Esempio di list box

Esempio di radio button

Tra i sottoelementi possibili di un form abbiamo:

• caselle di testo (text box);
  • casella password;
• aree di testo (text area);
• selezione singola (radio button);
• casella di spunta (checkbox);
• menù a tendina:
  • list box;
  • combo box;
  • lista a cascata;
• upload di file del file system;
• pulsanti di invio e reset.

Sintassi HTML 4

Esempio di drop-down list

<form>...</form>

Crea un modulo dove all'interno possono essere contenuti (annidati) uno o più elementi sottoelencati.

<method=post action="url">

L'attributo method specifica con il suo valore che i dati saranno inviati al server col metodo Post dell'HTTP puntando, tramite l'attributo action, alla rispettiva pagina di elaborazione di URL specificato; questo elemento è tipicamente sempre presente.

<input type="text" name="nome" value="valore" size="dimensione">

Crea una casella di testo a linea singola. L'attributo Name con il suo valore assegnato identifica il nome della variabile passata alla parte di elaborazione, mentre l'attributo Value con il valore assegnato popola il campo con un valore assegnato; l'attributo opzionale Size imposta con il suo valore la lunghezza della casella, mentre l'attributo opzionale Maxlength imposta con il suo valore il numero massimo di caratteri inseribili (può essere più grande di Size);

<input type="file" name="nome">

Crea casella per il file upload ovvero il caricamento del file sul browser del client per l'invio al server; l'attributo Name con il suo valore assegnato identifica il nome della variabile passata alla parte di elaborazione;

<input type="password">

Crea una casella di testo a linea singola per l'inserimento di una password con valori digitati/visualizzati oscurati per preservarne la confidenzialità;

<textarea>...</textarea>

Crea un'area di testo multilinea impostasta dagli attributi cols (colonne) e rows (righe). Il testo tra i tag apparirà nell'area di testo al caricamento della pagina.

<select name="foo">...</select>

Crea un menù ad elenco dal quale l'utente può scegliere una sola voce. Può essere visualizzato come un menù a cascata.

<option>...</option>

Crea una voce all'interno del menù.

<input type="radio">

Crea una casella di scelta singola di tipo radio button.

<input type="checkbox">

Crea una casella di spunta per controllare il contenuto dell'input(checkbox).

<input type="radio">

Crea un pulsante radio; se più pulsanti radio hanno lo stesso nome, l'utente potrà selezionarne solo uno.

<input type='button....></input> oppure <button></button>

Crea un bottone

<input type="submit" value="NAME">

Crea un pulsante d'invio di tutti i dati del form con nome visualizzato pari al valore dell'attributo Value.

<input type="image" border=0 name="NAME" src="name.gif">

Create un pulsante d'invio di tutti i dati del form utilizzando un'immagine.

<input type="reset">

Crea un pulsante di reset dei dati inseriti che ripristina i valori del modulo a quelli iniziali.

HTML 5

HTML 5 ha introdotto nuovi elementi ai form:

Elemento <input>

L'elemento <input> ha nuovi valori per l'attributo type.

• search: un campo di ricerca.
• tel: controllo per la modifica di un numero telefonico. È possibile utilizzare gli attributi pattern e maxlength per limitare i valori immessi dall'utente.
• url: controllo per la modifica di un URL.
• email: controllo per la modifica di un indirizzo email.

Nuovi attributi di <input>

• list: l'ID di un elemento <datalist> il cui contenuto, che consiste in elementi <option>, dovrà essere utilizzato come suggerimento.
• pattern: Un'espressione regolare usata negli <input> di tipo text, tel, search, url, ed email.
• form: Una stringa che indica a quale elemento <form> è figlio l'input.
• formmethod: Una stringa che indica il metodo HTTP (GET o POST) da usare per l'invio dei dati al server.
• x-m-errormessage: Contiene un messaggio quando il campo non supera la validazione (solo per Firefox).

Elemento <form>:

• novalidate: Questo nuovo attributo fa in modo che il form non richieda la validazione all'utente.

Elemento <datalist>

<datalist> racchiude una lista di elementi <option> da suggerire all'utente durante la compilazione di un <input>.

Elemento <output>

<output> rappresenta il risultato di un calcolo. Si usa l'attributo for per specificare una relazione tra un elemento <output> e altri elementi del documento (input o parametri).

Attributo <placeholder>

Esempio di form HTML 5 con autofocus (il primo modulo in alto evidenziato appena l'utente visualizza il form)

<placeholder> si applica agli elementi <input> e <textarea>, fornendo all'utente un suggerimento su cosa dovrebbe immettere nel campo.

Attributo <autofocus>

<autofocus> evidenzia un campo. Può essere assegnato ad un solo campo per ciascun form. Si applica agli elementi <input>, <button>, <select> e <textarea>.

Vincoli di validazione

• L'attributo required nell'elemento <input>, <select> e <textarea> indica che il campo deve essere compilato.
• L'attributo pattern nell'elemento <input> stabilisce il valore in modo che corrisponda una specifica cifra.
• Gli attributi min e max nell'elemento <input> specifica il valore minimo e massimo che può essere immesso.
• L'attributo step nell'elemento <input> vincola i valori che possono essere immessi.
• L'attributo maxlength negli elementi <input> e <textarea> stabilisce il numero massimo di caratteri che l'utente può immettere.
• I valori url e email nell'attributo type restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.

Altri utilizzi

Al di là degli specifici impieghi descritti sopra, in informatica (in generale: nelle informazioni digitilizzate) per form s'intende una maschera (o modulo) ovvero un'area, solitamente strutturata in righe e colonne (i cui bordi o sfondi possono anche essere non visibili) e con dei campi che fungono da etichette descrittive, nella quale occorre inserire informazioni (dati, valori, comandi, espressioni, ecc) da parte dell'utilizzatore della relativa applicazione software. Le informazioni possono anche essere già precompilate e quindi l'utente deve scegliere (per ciascuna cella o riquadro) il valore preferito (menù a tendina, elenco selezionabile, bottone, ecc).

Per essere precisi il form è il modulo non compilato: quando è compilato allora diventa l'informazione documentata output (una prenotazione, un ordine, una valutazione, un questionario, una dichiarazione, ecc).

Formattazione

Esempio di modulo formattato con i CSS

I form vengono formattati attraverso i CSS che permettono di dare un aspetto professionale e accattivante ai moduli rispetto all' HTML puro. Esempio:

input[type=text], select, textarea {
  width: 100%; 
  padding: 12px;  
  border: 1px solid #ccc; 
  border-radius: 4px;  
  box-sizing: border-box;  */
  margin-top: 6px;  
  margin-bottom: 16px; 
  resize: vertical}

Accesso social

Il social login è una forma di single sign-on che utilizza le informazioni esistenti di un servizio di social network come Facebook, Twitter o Google, per accedere a un sito web di terze parti invece di creare un nuovo account di accesso specifico per quel sito web. È progettato per semplificare gli accessi per gli utenti finali e per fornire informazioni demografiche sempre più affidabili agli sviluppatori web.

Esempio di form che permette l'accesso social

Vantaggi

Gli studi hanno dimostrato che i moduli di registrazione del sito Web sono inefficienti in quanto molte persone forniscono dati falsi, dimenticano le informazioni di accesso al sito o semplicemente rifiutano di registrarsi in primo luogo. Uno studio condotto nel 2011 da Janrain e Blue Research ha rilevato che il 77% dei consumatori preferiva l'accesso social come mezzo di autenticazione rispetto ai metodi di registrazione online più tradizionali. Ulteriori vantaggi sono:

• Contenuto mirato: i siti Web possono ottenere un profilo e dati del grafico sociale per indirizzare contenuti personalizzati all'utente.
• Identità multiple: gli utenti possono accedere a siti Web con più identità sociali, consentendo loro di controllare meglio la propria identità online.
• Dati di registrazione: molti siti Web utilizzano i dati del profilo restituiti dall'accesso social invece di consentire agli utenti di inserire manualmente le proprie informazioni di identificazione personale)nei moduli. Questo accelera la registrazione o il processo di iscrizione.
• Email pre-convalidata: impedisce all'utente di fornire un indirizzo e-mail inventato durante il processo di registrazione.
• Collegamento dell'account: molti siti Web consentono agli utenti precedenti di collegare l'account del sito preesistente al proprio account di accesso social senza forzare la nuova registrazione.

Rischi

Il rischio principale legato all'uso dei form è il furto dei propri dati mentre lo si compila. Inoltre gli accessi sociali sono spesso implementati in modo insicuro. Gli utenti, in questo caso, devono fidarsi di ogni applicazione che ha implementato questa funzione per gestire il proprio identificatore in modo confidenziale.

Inoltre, facendo affidamento su un account utilizzabile su molti siti Web, l'accesso social crea un unico punto di errore, aumentando così notevolmente il danno che sarebbe causato se l'account venisse violato.

Possibili soluzioni

Un captcha

Con l'acronimo inglese CAPTCHA si denota nell'ambito dell'informatica un test fatto di una o più domande e risposte per determinare se l'utente sia un umano e non un computer o, più precisamente, un bot.

Accessibilità

Esempio di codice con tag appositi WAI-ARIA per l'accessibilità:

<form id="send-comment" aria-label="Add a comment">
<label for="username">Username</label>
  <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text">

  <label for="email">Email</label>
  <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text">

  <label for="comment">Comment</label>
  <textarea id="comment" name="comment"></textarea>

  <input value="Comment" type="submit">
</form>

Plugin per CMS

I form nei CMS si inseriscono attraverso degli appositi plugin oppure dei pezzi di codice (API) generalmente in PHP o ASP.NET.

Esempio di form in ASP.NET

@{
if (IsPost) { 
string nomeazienda = Request["nomeazienda"]; 
string nomeazienda = Request["nomeazienda"]; 
<p>You entered: <br />
Nome azienda: @nomeazienda <br />
Contatto: @contatto </p>
}
else
{
<form method="post" action="">
Company Name:<br />
<input type="text" name="Nome azienda" value="" /><br />
Contact Name:<br />
<input type="text" name="Contatto" value="" /><br /><br />
<input type="submit" value="Submit" class="Invia" />
</form>
}
}

Esempio di form in PHP:

Nome: <input type="text" name="nome" value="<?php echo $nome;?>">
E-mail: <input type="text" name="email" value="<?php echo $email;?>">
Sito web: <input type="text" name="website" value="<?php echo $website;?>">
Commento: <textarea name="commento" rows="5" cols="40"><?php echo $commento;?></textarea>
Gender:
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="femmina") echo "checked";?>
value="femmina">femmina
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="maschio") echo "checked";?>
value="maschio">maschio
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="altro") echo "checked";?>
value="altro">altro

Voci correlate

• Checkbox
• Button
• Radio button
• FileUpload
• Web dinamico

Altri progetti

Altri progetti

• Wikibooks
• Wikimedia Commons

• Wikibooks contiene testi o manuali su form
• Wikimedia Commons contiene immagini o altri file su form

Collegamenti esterni

• (EN) Form nei documenti HTML, pagina di specifiche W3C per i form in HTML 4.
• jotform.com.