Form
![](http://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Web_form_campione.png/350px-Web_form_campione.png)
In informatica, il termine form (letteralmente formulario, modulo[1]) 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
[modifica | modifica wikitesto]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
[modifica | modifica wikitesto]![](http://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Textbox2.gif/220px-Textbox2.gif)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Checkbox_States.svg/220px-Checkbox_States.svg.png)
![](http://upload.wikimedia.org/wikipedia/commons/c/c4/Combo-box.png)
![](http://upload.wikimedia.org/wikipedia/commons/9/95/List-box.png)
![](http://upload.wikimedia.org/wikipedia/commons/7/78/Radiobutton.png)
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:
- upload di file del file system;
- pulsanti di invio e reset.
Sintassi HTML 4
[modifica | modifica wikitesto]![](http://upload.wikimedia.org/wikipedia/commons/9/9e/Dropdown.png)
<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) 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'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
[modifica | modifica wikitesto]HTML 5 ha introdotto nuovi elementi ai form[2]:
Elemento <input>
[modifica | modifica wikitesto]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 attributipattern
emaxlength
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>
[modifica | modifica wikitesto]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 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>:
[modifica | modifica wikitesto]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)](http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Form-css1.jpg/220px-Form-css1.jpg)
<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
[modifica | modifica wikitesto]- 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
emax
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
eemail
nell'attributotype
restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.
Altri utilizzi
[modifica | modifica wikitesto]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
[modifica | modifica wikitesto]![Esempio di modulo formattato con i CSS](http://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Form-css2.jpg/220px-Form-css2.jpg)
I form vengono formattati attraverso i CSS 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: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; */
margin-top: 6px;
margin-bottom: 16px;
resize: vertical}
Accesso social
[modifica | modifica wikitesto]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[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].
![Esempio di form che permette l'accesso social](http://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Form-css3.jpg/220px-Form-css3.jpg)
Vantaggi
[modifica | modifica wikitesto]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[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.
- 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
[modifica | modifica wikitesto]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].
Possibili soluzioni
[modifica | modifica wikitesto]![Un captcha](http://upload.wikimedia.org/wikipedia/commons/thumb/2/21/CaptchaExample.png/220px-CaptchaExample.png)
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à
[modifica | modifica wikitesto]Esempio di codice con tag appositi WAI-ARIA per l'accessibilità[12]:
<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
[modifica | modifica wikitesto]I form nei CMS si inseriscono attraverso degli appositi plugin[13][14][15] oppure dei pezzi di codice (API) generalmente in PHP o ASP.NET[16][17].
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
Note
[modifica | modifica wikitesto]- ^ formulario su WordReference
- ^ Forms in HTML5 - HTML: Hypertext Markup Language | MDN, su developer.mozilla.org. URL consultato il 16 febbraio 2021.
- ^ (EN) Girish Karthik Visit Website, 33 Most Beautiful CSS Forms Designed By Top Designers In 2021, su uiCookies, 15 settembre 2020. URL consultato il 16 febbraio 2021.
- ^ (EN) 80 CSS Forms, su Free Frontend. URL consultato il 16 febbraio 2021.
- ^ (EN) Third-Party Login (SSO), su Sanity.io. URL consultato il 16 febbraio 2021.
- ^ login, su silverpop.com. URL consultato il 16 febbraio 2021 (archiviato dall'url originale l'11 gennaio 2017).
- ^ Social Media Marketing: Social login or traditional website registration?, su MarketingSherpa Blog, 12 gennaio 2012. URL consultato il 16 febbraio 2021.
- ^ (EN) Hack Like a Pro: How to Crack Online Web Form Passwords with THC-Hydra & Burp Suite, su WonderHowTo. URL consultato il 16 febbraio 2021.
- ^ (EN) Hacking to Acquire Passwords from HTML Forms Password Boxes – Eli the Computer Guy, su elithecomputerguy.com. URL consultato il 16 febbraio 2021.
- ^ Antonio Tedeschi, Social Login: autenticazione coi social network | Mobile HTML.it, su HTML.it. URL consultato il 16 febbraio 2021.
- ^ social, su blog.cloudrail.com. URL consultato il 16 febbraio 2021 (archiviato dall'url originale il 17 maggio 2019).
- ^ ARIA: form role - Accessibility | MDN, su developer.mozilla.org. URL consultato il 16 febbraio 2021.
- ^ (EN) Steve Burge, The 6 Best Joomla Forms Extensions, su Joomlashack. URL consultato il 16 febbraio 2021.
- ^ (EN) 6 FREE Form Builder Plugins for WordPress in [WINTER 2021], su WPForms, 6 maggio 2019. URL consultato il 16 febbraio 2021.
- ^ (EN) Introduction to Form API, su Drupal.org, 22 ottobre 2013. URL consultato il 16 febbraio 2021.
- ^ ASP.NET Web Pages HTML Forms, su w3schools.com. URL consultato il 16 febbraio 2021.
- ^ PHP Complete Form Example, su w3schools.com. URL consultato il 16 febbraio 2021.
Voci correlate
[modifica | modifica wikitesto]Collegamenti esterni
[modifica | modifica wikitesto]- (EN) Form nei documenti HTML, pagina di specifiche W3C per i form in HTML 4.
- jotform.com.