Form
parte di interfaccia utente di un'applicazione web Da Wikipedia, l'enciclopedia libera
parte di interfaccia utente di un'applicazione web Da Wikipedia, l'enciclopedia libera
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.
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.
Tra i sottoelementi possibili di un form abbiamo:
<form>...</form><method=post action="url"><input type="text" name="nome" value="valore" size="dimensione"><input type="file" name="nome"><input type="password"><textarea>...</textarea>cols (colonne) e rows (righe). Il testo tra i tag apparirà nell'area di testo al caricamento della pagina.<select name="foo">...</select><option>...</option><input type="radio"><input type="checkbox"><input type="radio"><input type='button....></input> oppure <button></button><input type="submit" value="NAME"><input type="image" border=0 name="NAME" src="name.gif"><input type="reset">HTML 5 ha introdotto nuovi elementi ai form[2]:
<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.<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).<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>
<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>.
required nell'elemento <input>, <select> e <textarea> indica che il campo deve essere compilato.pattern nell'elemento <input> stabilisce il valore in modo che corrisponda una specifica cifra.min e max nell'elemento <input> specifica il valore minimo e massimo che può essere immesso.step nell'elemento <input> vincola i valori che possono essere immessi.maxlength negli elementi <input> e <textarea> stabilisce il numero massimo di caratteri che l'utente può immettere.url e email nell'attributo type 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 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).
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}
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].
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:
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].
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.
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>
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
