-
+1
Like 
.Creazione di form e controlli utenti Parte 2
Oltre ai controlli visti nella scorsa guida abbiamo inoltre i seguenti tag, che pur non essendo direttamente collegati a un form perchè il suo submit non invia i relativi valori, possono essere considerati come dei widget.
- <process>: con esso si crea una barra di avanzamento o progress bar, che viene progressivamente riempita con un colore fino al compimento di una determinata operazione. L'avanzamento è tracciato attraverso il valore numerico dell'attributo value mentre tramite l'attributo max possiamo definire la scala.
- <meter>: con esso si crea una barra di avanzamento che indica un determinato ammontareriguardante la misurazione della tipologia di un oggetto che intende rappresentare. Anche qui utilizziamo value e max per definire l'avanzamento.
- <menu>: con esso si crea una struttura a menu per una lista di comandi. Se è impostato l'attributo type con il valore context, un menu contestuale; se inpostiamo il valore toolbar, una barra degli strumenti.
- <command>: con esso si crea una sorta di azione che può essere svolta dall'utente.
CodiceSPOILER (clicca per visualizzare)CODICE<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="AlterVista - Editor HTML"/>
<title></title>
</head>
<body>
<b><progress></b>
<br>
<section>
<p>Caricamento 30%: <progress max="100" value="30"></progress></p>
<p>Caricamento: <progress max="100"></progress></p>
</section>
<hr>
<br>
<b><meter></b>
<br>
<meter min="-20" value="36" max="50" low="10" optimum="22" high="32">36°</meter>
<hr>
<br>
<b><menu></b>
<br>
<div style="background:#33B6F3;border:1px solid black;padding: 10px;" contextmenu="mymenu">
<p>Premi tasto destro per vedere il menu
<menu type="context" id="mymenu">
<menuitem label="Aggiorna" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
<menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
</menu>
</menu>
</div>
<p>Questo esempio funziona solo con Firefox</p>
<br>
<hr>
<p>Per il tag <b><command></b> non è stato possibile inserire il codice in quanto non è sopportato da nessun browser</p>
</body>
</html>
Esempio
Per il tag <command> non è stato possibile inserire il codice in quanto non è sopportato da nessun browserElenchiamo ora atri attributi da poter utilizzare nei controlli:
- required: con esso si indica che il valore di un elemento di tipo input, select o textarea è obbligatoriamente richiesto per il corretto submit del form. Se l'utente non soddisfa la richiesta il browser visualizzerà un messaggio che indicherà che il campo è obbligatorio da compilare.
- formnovalidate: con esso si indica che si intende evitare il controllo di validazione sui campi di un form.
- pattern: con esso si indica un'espressione regolare che determina il corretto formato del valore da inserire in un campo di input.
- placeholder: con esso è possibile mostrare un testo all'interno della casella di testo. Questo attributo è utilizzabile per fornire un breve suggerimento all'utente sotto forma di esempio di valore da inserire o su come esso debba essere formattato.
- autocomplate: con esso è possibile decidere, per un singolo campo di testo, se la caratteristica di autocompletamento del resto del testo deve essere attiva (valore on) o no (valore off).
- autofocus: con esso è possibile assegnare a un controllo di focus automatico, che gli viene fornito quando la pagina è stata caricata. Questo attributo consente di rendere subito disponibile per un utente il controllo principale di un form, permettendogli di iniziare subito a digitare i relativi dati senza doversi preoccupare di selezionarlo manualmente.
- spellcheck: con esso si indica (valore true o false) se un campo di testo o un elemento editabile deve avere o meno un controllo ortografico.
- multiple: con esso si indica la possibilità per un controllo di tipo input o select di specificare più di un valore. Ciò può essere utile per input di tipo email per indicare più mittenti o destinatari di un messaggio oppure per un elemento di input di tipo file per indicare più file di cui effettuare l'upload.
- min, max, step: con essi si indica un valore minimo, massimo o di step da poter utilizzare all'interno di elementi di input del tipo number, date, month, time, range e i controlli quali progress (solo max) e meter (solo min e max).
- form: con esso si imposta per elementi come button, input, keygen, output, select e textarea il form di appartenenza tramite la specifica del suo id come valore.
- formaction, formenctype, formmethod, formtarget: con esso si imposta direttamente per gli elementi input o button di tipo submit i relativi attributi action, entype, method e target, generalmente specificati all'interno del tag <form>, in modo da sovrascriverli.
- height e width: specificano, in pixel, l'altezza e la larghezza di un elemento input di tipo image.
- name: indica un nome da attribuire a un controllo di un form che viene utilizzato primariamente, tramite una tecnologia lato server, per referenziarlo dopo il submit del form.
- id: indica un identificatore univoco per l'elemento cui è applicato. Il valore indicato deve: contenere al minimo un carattere; non deve contenere dei caratteri di spazio; non deve essere già stato assegnato a un altro elemento presente nello stesso documento.
- value: indica un valore che si è espressamene assegnato al relativo elemento e la cui modalità di attribuzione dipende dalla sematica dell'elemento stesso che ne determina il comportamento.
- size: specifica la larghezza del relativo controllo espresso un numero di caratteri visibili.
- maxlength: indica il numero massimo di caratteri che sono digitabili all'interno di un elemento input o textarea.
- rows e cols: indicano, rispettivamente, l'altezza e la larghezza di un elemento textarea espressi come numero di righe e di colonne o caratteri.
- wrap: indica quale comportamento deve avere una textarea quando l'utente, digitando dei caratteri, arriva alla fine di una riga. Tramite il valore hard imponiamo che si vada a capo automaticamente, e quando si fa il submit del form i ritorni a capo sono inclusi come parte del testo inviato; tramite il termine soft imponiamo che si vada a capo automanticamente, ma quando si fa il submit del form i ritorni a capo non sono inclusi come parte del testo inviato.
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 2Guida HTML 7 |
