Form, ininformatica, il termine (letteralmenteformulario,modulo)^[1] indica la parte diinterfaccia utente di un'applicazione web che consente all'utenteclient di inserire e inviare alweb server/application server uno o piùdati liberamente digitati dallo stesso sullatastiera attraverso l'uso di componenti grafici dettiwidget 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 unapagina web: ad esempio, lecaselle di testo e imenù a tendina di una pagina di registrazione o dilogin costituiscono un form.

Più in particolare, l'elemento HTML <FORM> è usato per realizzareform in unapagina web. InHTML sono considerati parte del form anche i pulsanti ripristina o cancella e invia. Di solito i form vengono utilizzati per inviare dati ad undatabase server oppure per inviaree-mail.

Si tratta dunque di un elemento che inserisce contenutiinterattivi per l'utente nella pagina web o in un'applicazione web inserendosi nel contesto delweb dinamico. Tutti i dati di un form una volta inviati dalweb browser delclient al web server devono essere trattati o elaborati da unapagina web dinamicalato server.

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

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 delfile system;
• pulsanti diinvio ereset.

<form>...</form>

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

<method=post action="url">

L'attributomethod specifica con il suo valore che i dati saranno inviati al server col metodoPost dell'HTTP puntando, tramite l'attributoaction, alla rispettiva pagina di elaborazione diURL specificato; questo elemento è tipicamente sempre presente.

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

Crea una casella di testo a linea singola. L'attributoName con il suo valore assegnato identifica il nome della variabile passata alla parte di elaborazione, mentre l'attributoValue con il valore assegnato popola il campo con un valore assegnato; l'attributo opzionaleSize imposta con il suo valore la lunghezza della casella, mentre l'attributo opzionaleMaxlength 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 ilfile upload ovvero il caricamento del file sul browser del client per l'invio al server; l'attributoName 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 unapassword con valori digitati/visualizzatioscurati per preservarne laconfidenzialità;

<textarea>...</textarea>

Crea un'area di testo multilinea impostasta dagli attributicols (colonne) erows (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'attributoValue.

<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 ha introdotto nuovi elementi ai form^[2]:

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

• search: un campo di ricerca.
• tel: controllo per la modifica di un numero telefonico. È possibile utilizzare gli attributipattern emaxlength per limitare i valori immessi dall'utente.
• url: controllo per la modifica di unURL.
• email: controllo per la modifica di un indirizzo email.

• 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 tipotext,tel,search,url, edemail.
• form: Una stringa che indica a quale elemento<form> è figlio l'input.
• formmethod: Una stringa che indica il metodoHTTP (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 perFirefox).

• 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'attributofor per specificare una relazione tra un elemento<output> e altri elementi del documento (input o parametri).

Attributo<placeholder>

<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>.

• L'attributorequired nell'elemento<input>,<select> e<textarea> indica che il campo deve essere compilato.
• L'attributopattern nell'elemento<input> stabilisce il valore in modo che corrisponda una specifica cifra.
• Gli attributimin emax nell'elemento<input> specifica il valore minimo e massimo che può essere immesso.
• L'attributostep nell'elemento<input> vincola i valori che possono essere immessi.
• L'attributomaxlength negli elementi<input> e<textarea> stabilisce il numero massimo di caratteri che l'utente può immettere.
• I valoriurl eemail nell'attributotype restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.

Al di là degli specifici impieghi descritti sopra, in informatica (in generale: nelle informazioni digitilizzate) per form s'intende unamaschera (omodulo) 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).

I form vengono formattati attraverso iCSS che permettono di dare un aspetto professionale e accattivante ai moduli rispetto all' HTML puro^[3][4]. Esempio:

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

Ilsociallogin è una forma disingle sign-on che utilizza le informazioni esistenti di un servizio di social network comeFacebook,Twitter oGoogle, per accedere a unsito web di terze parti^[5] 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^[6].

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 diautenticazione rispetto ai metodi di registrazione online più tradizionali^[7]. 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.
• Collegamentodell'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.

Il rischio principale legato all'uso dei form è il furto dei propri dati mentre lo si compila^[8][9]. 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^[10].

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^[11].

Lo stesso argomento in dettaglio:CAPTCHA.

Con l'acronimo ingleseCAPTCHA si denota nell'ambito dell'informatica untest fatto di una o più domande e risposte per determinare se l'utente sia un umano e non uncomputer o, più precisamente, unbot.

Lo stesso argomento in dettaglio:Accessibilità (web), Accessibilità (design) e WAI-ARIA.

Esempio di codice con tag appositiWAI-ARIA per l'accessibilità^[12]:

<formid="send-comment"aria-label="Add a comment"><labelfor="username">Username</label><inputid="username"name="username"autocomplete="nickname"autocorrect="off"type="text"><labelfor="email">Email</label><inputid="email"name="email"autocomplete="email"autocapitalize="off"autocorrect="off"spellcheck="false"type="text"><labelfor="comment">Comment</label><textareaid="comment"name="comment"></textarea><inputvalue="Comment"type="submit"></form>

Lo stesso argomento in dettaglio:Content management system.

I form neiCMS si inseriscono attraverso degli appositiplugin^[13][14][15] oppure dei pezzi di codice (API) generalmente inPHP oASP.NET^[16][17].

Esempio di form in ASP.NET

@{if(IsPost){stringnomeazienda=Request["nomeazienda"];stringnomeazienda=Request["nomeazienda"];<p>Youentered:<br/>Nomeazienda:@nomeazienda<br/>Contatto:@contatto</p>}else{<formmethod="post"action="">CompanyName:<br/><inputtype="text"name="Nome azienda"value=""/><br/>ContactName:<br/><inputtype="text"name="Contatto"value=""/><br/><br/><inputtype="submit"value="Submit"class="Invia"/></form>}}

Esempio di form in PHP:

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

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

• Wikibooks contiene testi o manuali sulform
• Wikizionario contiene il lemma di dizionario «form»
• Wikimedia Commons contiene immagini o altri file sulform

• Form, suVocabolario Treccani, Neologismi,Istituto dell'Enciclopedia Italiana, 2021.
• (EN)Form nei documenti HTML, pagina di specificheW3C per i form in HTML 4.
• jotform.com.

Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica

• Interazione uomo-computer
• Interfaccia utente

• P5844 letta da Wikidata