Quanto esposto nel presente capitolo non e' prettamente attinente ai fogli di stile, nel senso che non rientra in quanto espresso dalle raccomandazioni ufficiale del W3C in materia. Ma intendo trattarne ugualmente, seppur con la dovuta sintesi, perche' e' utile conoscere piccoli accorgimenti nella realizzazione di form HTML.
Il nuovo standard di HTML 4 ha introdotto notevoli modifiche alla precedente versione 3.2 del linguaggio di Markup piu' diffuso del mondo.
HTML 4.0 migliora la gestione dei moduli rendendoli interattivi, grazie ad eventi intrinseci, e aggiungendo supporti per i browser a sintesi vocale. Sono introdotti tre nuovi elmenti:
LABEL fornisce ai browser a sintesi vocale la possibilita' di descrivere un elemento e rende interattivi i form. Le etichette utilizzate possono essere implicite o esplicite.
BOTTON consente di creare altri bottoni oltre ai due standard (invio e reset) finora disponibili.
FIEDLSET raggruppa campi relativi in modo da fornire ai browser a sintesi vocale la possibilita' di descrivere diversi gruppi e permettere all’utente di spostarsi da un gruppo ad un altro. In
associazione all'elemento LEGEND, puo' essere usato per nominare il gruppo. Entrambi questi nuovi elementi, permettono una migliore interpretazione ed interazione.
Una nuova serie di attributi onchange-INPUT, in associazione con il supporto per i linguaggi script, permette ai form dei providers di verificare i dati inseriti dall'utente. L'elemento INPUT ha un nuovo attributo ACCEPT, che permette agli autori di specificare una lista di media o tipi di struttura per l'input.
L'attributo ACCESSKEY provvede a specificare un accesso diretto tramite tastiera ai campi del formulario.
Continuiamo col vedere alla prova alcune nuove potenzialita' relative ai moduli HTML. Come premesso non si tratta di fogli di stile "puri", ma di esempi che sfruttano congiuntamente Javascript e taluni aspetti di HTML dinamico. Ne tratto comunque solo per fornire strumenti di Web publishing avanzati.
E' oggi possibile creare dei campi SELECT all'interno dei moduli HTML che compaiano con piu' scelte gia' predefinite. Quello che segue ne e' un esempio:
Visualizza il codice di questo esempio
HTML 4.0 supporta l'attributo TITLE, che consente di visualizzare una piccola finestra quando il puntatore del mouse clicca o viene posizionato sopra un elemento. Nei browser obsoleti l'attributo TITLE non crea problemi di visualizzazione, in quanto viene ignorato e visualizzato come seplice testo.
Grazie alle potenzialita' di questo attributo e' possibile ottenere effetti simili al seguente:
Visualizza il codice di questo esempio
Questo esempio puo' essere utile per creare effetti grafici su form altrimenti piatti e noiosi. Come funziona e' presto detto: finche' non si scrive nulla all'interno dei campi del form, questi assumono un colore di default, che perderanno solo quando verra' inserito del testo o selezionate delle scelte. In questo modo il visitatore ha chiaro quali campi abbia compilato e quali lo debbano ancora essere.
Prova a scrivere qualcosa nella stringa gialla che segue:
Visualizza il codice di questo esempio
E' possibile creare elementi OPTION di diverso colore con semplice codice HTML. E’ bene precisare, pero', che gli elementi OPTION rappresentano, per il modello di oggetti dell’HTML dinamico un’eccezione, in quanto non vengono esposti nell’insieme "all" del documento. Cio' significa che l’elemento OPTION viene esposto soltanto mediante il corrispondente elemento select di livello superiore.
A prescindere da questo discorso che riguarda piu' direttamente HTML dinamico, nella pratica con l'elemento OPTION e' possibile creare voci di scelta di diversi colori, come nell'esempio che segue:
Visualizza il codice di questo esempio
L’elemento LABEL descrive e incorpora gli eventi intrinseci del form quando la pagina viene visualizzata da un browser a sintesi vocale. Le etichette possono essere implicite o esplicite, e risultano utili con caselle di controllo e pulsanti di opzione. Un’etichetta associata a un pulsante consente di selezionare e deselezionare lo stesso.
Seguendo questo principio si puo' creare un modulo all’interno del quale un elemento TEXT, se selezionato, deseleziona gli elementi RADIO presenti nel form stesso. Nell'esempio che segue e' necessario scegliere tra uno degli elementi da spuntare o la stringa bianca. Non e' possibile, almeno in questo caso, effettuare una scelta doppia.
Visualizza il codice di questo esempio
HTML 4 ha introdotto i cosidetti "controlli disattivati", che cioe' non possono essere attivati o per i quali non e' possibile modificare il contenuto. Vengono usati due attributi: DISABLED (impedisce che l'elemento riceva eventi) e READONLY (viene visualizzato quando il controllo e' conforme al contesto ma i contenuti non sono modificabili).
Visualizza il codice di questo esempio
Filtri su immagini
Effetti su testo e link