-
.
Creazione di form e controlli utenti Parte 1
I form o moduli sono uno lo strumento essenziale utilizzato nel Web per inviare dei dati a un server per effettuare delle operazioni di elaborazione predefinite.
Essi si creano attraverso l'utilizzo del tag <form>, che ha i seguenti attributi:- action: indica l'URL di destinazione dei dati inviati con il form. Generalmente punta a un file su un server web scritto con linguaggi lato server come PHP, ASP.NET, JEE ed è in grado di interpretare le informazion ottenute e elaborarle in un modo stabilito restituendo il risultato sotto forma di una pagina HTML;
- method: indica il metodo o comando HTTP da usare quando si effettua il submit del form. Può avere il valore GET inviando i dati via URL come una query strng , oppure il valore POST dove i dati sono inviati come parte della richiesta nel corpo del messaggio dopo gli header;
- target: indica dove visualizzare la risposta che si è ricevuta a seguito del submit del form. Può assumere i valori _blank, _self, _parent, _top e _iframename;
- autocomplete: indica se, per i campi di un form, devono essere memorizzati i valori precedentemente inseriti al fine di consentire la visualizzazione di un'area rettangolare entro la quale appariranno i valori memorizzati che sono coerenti con quello che si sta digitando. Se l'attributo è omesso allora il suo stato sarà su on, mentre, se si vuole evitare l'autocompletamento, bisognerà specificare l'attributo con il valore off;
- novalide: indica che i dati inseriti nei relativi campi di input non devono essere validati quando si effettuerà il submit del form;
- entype: indica in che modo i dati di un form devono essere codificati quando l'attributo method ha come valore POST. I suoi valori possono essere: application/x-www-form-urlencoded, per indicare che tutti i caratteri devono essere codificati prima di essere inviati; multipart/form-data, per indicare una modalità di codifica che permette al form di inviare dati binari o caratteri non ASCII; text/plain, per indicare che tutti i caratteri devono essere codificati prima di essere inviati.
Un form, per poter inviare informazioni al server, deve poter contenere una serie di controlli grafici di interfaccia (widget) attraverso cui inserire del testo, compiere delle scelte e così via.
Possiamo utilizzare i widget mediante questi tag e attributi:
- <input type="text">: con esso si crea unaa casella rettangolare a riga singola dove l'utente può inserire del testo.
- <input type="password">: con esso di crea uan casella rettangolare a riga singola dove l'utente può inserire i caratteri di una password che non sono mostrati in chiaro ma sono sostituiti dal carattere asterisco (*) o da un simbolo di un cerchietto pieno nero (●).
- <input type="button">: con esso si crea un comune pulsante con un'etichetta testuale cui si può essere associato, del codice da eseguire quando si fa clic su di esso.
- <input type="submit">: con esso si crea un comune pulsante con un'etichetta testuale che, quando attivato, consente di effettuare l'invio dei dati del relativo form.
- <input type="reset">: con esso si crea un comune pulsante con un'etichetta testuale che, quando attivato, consente di cancellare gli eventuali dati inseriti in tutti i campi del testo del form.
- <input type="checkbox">: con esso si crea una casella di controllo la cui interazione causa l'aggiunta o la rimozione di un segno di spunta che ne indica lo stato di attivato/disattivato.
- <input type="radio">: con esso si crea un pulsante di opzione la cui interazione causa l'aggiunta di un simbolo di selezione sul pulsante selezionato e la contestuale deselezione con la rimozione dello stesso simbolo da un altro pulsante precedentemete selezionato.
- <input type="file">: con esso si crea un controllo formato da una casella di testo a riga singola e un pulsante (di norma con valore Sfoglia) dove l'attivazione di quest'ultimo farà apparire una finestra di selezione di uno o più file.
- <input type="number">: con esso si crea un controllo formato da una casella di testo a riga singola con a fianco due pulsanti: uno con il simbolo di freccia rivolta verso l'alto e uno con il simbolo di frecca rivolta verso il basso chiamati spinner e spin box. Questi pulsanti consentono di visualizzare all'interno della casella di testo dei valori numerici.
- <input type="range">: con esso si crea un controllo, chiamato slider, formato da una barra orizzontale o verticale con un cursore il cui spostamento permette di selezionare dei valori di tipo numerico.
- <input type="color">: con esso si crea un controllo che consente di scegliere, tramite un selettore, un colore che è espresso in esadecimale nella forma RGB.
- <input type="image">: con esso si crea un pulsante che è renderizzato com un'immagine specificata.
- <input type="email">: con esso si crea una casella rettangolare a riga singola dove l'utente può inserire del testo che dovrebbe conformari al pattern utilizzato per esprimere un indirizzo di posta elettronica.
- <input type="url">: con esso si crea una casella rettangolare a riga singola dove l'utente può inserire del testo che dovrebbe conformarsi al pattern utilizzato per esprimere un URL assoluto.
- <input type="search">: con esso si crea una casella rettangolare a una riga singola dove l'utente può inserire del testo per effettuare delle ricerche.
- <input type="tel">: con esso si crea una casella rettangolare a riga singola dove l'utente può inserire del testo che dovrebbe rappresentare un numero telefonico.
- <input type="datetime">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere una data e un orario. Per la data si potrebbe visualizzare un calendario sul quale selezionarla, mentre per l'ora potrebbe apparire come uno spin box dove inserire l'ora da 0 a 23, i minuti da 0 a 59 e così via. Il formato completo per una data e un'orario sono: YYYY-MM-DDTHH:MM:SS.FFFtimezone dove la lettera T separa la parte data dalla parte orario, le lettere FFF indicano le frazioni di secondo, timezone indica l'offset del fuso orario.
- <input type="datetime-local">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere una data e un orario locale, senza considerare il fuso orario.
- <input type="date">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente una data senza un orario nel formato anno-mese-giorno (YYYY-MM-DD).
- <input type="month">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente una data espressa nel formato anno-mese, (YYYY-MM).
- <input type="week">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente una data espressa nel formato anno-settimana (YYYY-Www).
- <input type="time">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente un orario espresso nel formato ore-minuti-secondi e frazioni di secondo (HH-MM-SS.FFF).
- <textarea>: con esso si crea un box rettangolare formato da più righe dove l'utente può inserire del testo.
- <select>: con esso si crea un controllo definito drop-down list, formato da una combinazione di due elementi grafici: il primo è un rettangolo a riga singola (casella di testo) con a lato un simbolo di freccia e il secondo è un'altro rettangolo, che appare se l'utente fa clic sul simbolo della freccia o sulla casella di testo. Al suo interno troviamo una lista di voci item, definibili tramite il tag <option>, che può essere a scelta singola o multipla.
- <datalist>: con esso si crea una sorta di list box che contiene una serie di voci (<option>) mostrate come suggerimento quando un utente inizia a digitare del testo in una casella ottenuta dall'elemento input, per il quale l'attributo list è impostato con il valore dell'attributo id dell'elemento datalist.
- <keygen>: con esso si crea un controllo che consente di generare delle chiavi per un sistema crittografico.
Tutti i widgetSPOILER (clicca per visualizzare)CODICE<!DOCTYPE html>
<html>
<head>
<title>Creazione di form e controlli utenti</title>
<meta name="Keywords" content="web, html5, javascript, css" charset="utf-8">
</head>
<body>
<form autocomplete="off" action="http://serveritisdavinci.altervista.org">
<fieldset>
<legend>Input type</legend>
<table>
<tr>
<td>
<label for="name">text</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label for="name">password</label>
</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>
<label for="name">button</label>
</td>
<td>
<input type="button" value="clic">
</td>
</tr>
<tr>
<td>
<label for="name">submit</label>
</td>
<td>
<input type="submit">
</td>
</tr>
<tr>
<td>
<label for="name">checkbox</label>
</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>
<label for="name">radio</label>
</td>
<td>
<input type="radio">
</td>
</tr>
<tr>
<td>
<label for="name">file</label>
</td>
<td>
<input type="file">
</td>
</tr>
<tr>
<td>
<label for="name">number</label>
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>
<label for="name">range</label>
</td>
<td>
<input type="range">
</td>
</tr>
<tr>
<td>
<label for="name">color</label>
</td>
<td>
<input type="color">
</td>
</tr>
<tr>
<td>
<label for="name">image</label>
</td>
<td>
<input type="image">
</td>
</tr>
<tr>
<td>
<label for="name">email</label>
</td>
<td>
<input type="email">
</td>
</tr>
<tr>
<td>
<label for="name">url</label>
</td>
<td>
<input type="url">
</td>
</tr>
<tr>
<td>
<label for="name">search</label>
</td>
<td>
<input type="search">
</td>
</tr>
<tr>
<td>
<label for="name">tel</label>
</td>
<td>
<input type="tel">
</td>
</tr>
<tr>
<td>
<label for="name">datetime</label>
</td>
<td>
<input type="datetime">
</td>
</tr>
<tr>
<td>
<label for="name">datetime-local</label>
</td>
<td>
<input type="datetime-local">
</td>
</tr>
<tr>
<td>
<label for="name">date</label>
</td>
<td>
<input type="date">
</td>
</tr>
<tr>
<td>
<label for="name">month</label>
</td>
<td>
<input type="month">
</td>
</tr>
<tr>
<td>
<label for="name">week</label>
</td>
<td>
<input type="week">
</td>
</tr>
<tr>
<td>
<label for="name">time</label>
</td>
<td>
<input type="time">
</td>
</tr>
<tr>
<td>
<label for="name">textarea</label>
</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td>
<label for="name">select</label>
</td>
<td>
<select>
<option>select 1</option>
<option>select 2</option>
<option>select 3</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="name">keygen</label>
</td>
<td>
<keygen>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Esempio
N.B. Ho notato che su Chrome funziona bene ma su mozilla non fa visualizzare correttamente alcuni campi
Esempio di un moduloSPOILER (clicca per visualizzare)CODICE<!DOCTYPE html>
<html>
<head>
<title>Form e controlli utente</title>
<meta name="keywords" content="web, html5, javascript, css" charset="utf-8">
</head>
<body>
<form automplate="off" action="http://dsacco.alwaysdata.net/cgi-bin/provacgi">
<fieldset>
<legend>Dettagli: </legend>
<table>
<tr>
<td>
<label for="name">Nome: </label>
</td>
<td>
<input type="text" name="nome" id="nome" autofocus required size="50"/>
</td>
</tr>
<tr>
<td>
<label for="cognome">Cognome: </label>
</td>
<td>
<input type="text" name="cognome" id="cognome" required size="50"/>
</td>
</tr>
<tr>
<td>
<label for="psw">Password: </label>
</td>
<td>
<input type="password" name="password" id="psw" required size="50"/>
</td>
</tr>
<tr>
<td>
<label for="data">Data di nascita: </label>
</td>
<td>
<input type="date" name="data" id="data" required />
</td>
</tr>
<tr>
<td>
Sesso:
</td>
<td>
<input type="radio" name="sesso" id="maschio" value="maschio"/>
<label for="maschio">Maschio: </label>
<input type="radio" name="sesso" id="femmina" value="femmina"/>
<label for="femmina">Femmina: </label>
</td>
</tr>
<tr>
<td>
<label for="mail">Email: </label>
</td>
<td>
<input type="email" name="mail" id="mail" multiple required size="50" placeholder="Ad esempio: thp1972@gmail.com"/>
</td>
</tr>
<tr>
<td>
<label for="i_web">Indirizzo Web: </label>
</td>
<td>
<input type="url" name="i_web" id="i_web" size="50" placeholder="Ad esempio: http://www.google.com"/>
</td>
</tr>
<tr>
<td>
Materie Preferite:
</td>
<td>
<input type="checkbox" name="informatica" id="informatica" value="INF"/>
<label for="informatica">Informatica: </label>
<input type="checkbox" name="sistemi" id="sistemi" value="SIS"/>
<label for="informatica">Sistemi: </label>
<input type="checkbox" name="statistica" id="statistica" value="GRA"/>
<label for="informatica">Grafica: </label>
<input type="checkbox" name="matematica" id="matematica" value="WEB"/>
<label for="informatica">Web Design: </label>
</td>
</tr>
<tr>
<td>
<label for="n_prog">Quanti programmi hai creato? </label>
</td>
<td>
<input type="number" name="n_prog" id="n_prog" value="1"/>
</td>
</tr>
<tr>
<td>
<label for="tm_prog">Ogni quanti mesi crei un programma? </label>
</td>
<td>
<input type="range" name="tm_prog" id="tm_prog" min="1" step="1" max="12" value="1"/>
</td>
</tr>
<tr>
<td>
<label for="colore">Il tuo colore preferito? </label>
</td>
<td>
<input type="color" name="colore" id="colore"/>
</td>
</tr>
<tr>
<td>
Seleziona Sistema Operativo:
</td>
<td>
<select name="so">
<optgroup label="Famiglia BSD">
<option value="fbsd">FreeBSD</option>
<option value="obsd">OpenBSD</option>
<option value="nbsd">NetBSD</option>
</optgroup>
<optgroup label="Famiglia Windows">
<option value="windows_8">Windows 8</option>
<option value="windows_7">Windows 7</option>
<option value="windows_vista">Windows Vista</option>
<option value="windows_xp">Windows XP</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label for="lp">Scegli un linguaggio: </label>
</td>
<td>
<datalist id="lp_datasource">
<option value="Java"></option>
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JavaScript"></option>
<option value="PHP"></option>
<option value="C"></option>
<option value="C++"></option>
<option value="C#"></option>
<option value="Visual Basic"></option>
<option value="SQL"></option>
<option value="XML"></option>
<option value="jQuery"></option>
</datalist>
<input type="text" name="lp" id="lp" list="lp_datasource"/>
</td>
</tr>
<tr>
<td>
<label for="note">Note: </label>
</td>
<td>
<textarea name="note" id="note" rows="5" cols="30" maxlength="2000" wrap="soft" spellcheck="true"></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<button type="submit" id="ok"> Salva i dati</button>
<button type="reset" id="reset">Ripristina</button>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
EsempioGuida a cura di ©True Story
.
Creazione di form e controlli utenti Parte 1Guida HTML 6 |
Like
