13 gennaio 2008  24

La formattazione dei controlli all'interno di un form HTML: il tag INPUT

W3C logo cube Una delle attività più impegnative associate alla creazione di una pagina HTMLW è senz'altro quella dedicata all'impostazione del layout (inteso come aspetto grafico e posizionamento degli oggetti) di un modulo (o form) interattivo.

Un modulo è una sezione di una pagina HTML contenente sia del testo formattato mediante i tag (o marcatori) tipici del medesimo linguaggio ipertestuale, che elementi speciali chiamati controlli (caselle di spunta, pulsanti, pulsanti radio, menu, caselle di testo, ecc.) ed etichette associate agli stessi.

Gli utenti generalmente compilano un modulo modificandone i controlli: digitano testo, selezionano caselle di spunta o menù, ecc. Successivamente i dati contenuti nel modulo possono essere inviati ad una procedura (ospitata da un host server) che li elabora e restituisce un risultato che di norma è costituito da una nuova pagina HTML.

L'obiettivo di questo documento, che vuole essere il primo di una serie dedicati appunto a questa tipologia di argomento, è quello di fornire alcuni suggerimenti su come definire correttamente l'aspetto grafico ed il posizionamento del controllo input utilizzando gli strumenti messi disposizione dai fogli di stileW a cascata (CSS), dando per scontato che i lettori abbiano una conoscenza di base sia di questi ultimi che del linguaggio HTML.

Il passato

Fino a qualche anno fà, era estremamente semplice per gli sviluppatori realizzare moduli HTML con un layout gradevole e ordinato: era sufficiente creare delle tabelle ad hoc, posizionando all'interno delle celle i controlli desiderati, assegnando loro il corretto allineamento sia verticale che orizzontale e formattandone opportunatamente gli attributi relativi all'aspetto tipografico (tipo di carattere, dimensione, colore di primo piano e di sfondo, ecc.).

L'utilizzo dei tag destinati alla rappresentazione tabellari dei dati (<table>, <th>, <tr>, <td>, ecc.) per organizzare il layout (e quindi il posizionamento) degli oggetti all'interno di una pagina è però formalmente scorretto e assolutamente deprecato dalle indicazioni del W3CW (World WideWeb Consortium). In aggiunta a ciò l'uso di tabelle per la formattazione dell'aspetto di un modulo, non consente di separare lo stesso dal suo contenuto per consentire un'agevole aggiornamento futuro del layout stesso.

Il presente

I fogli di stile a cascata consentono di superare entrambi i limiti collegati all'errato utilizzo delle tabelle per l'impostazione dell'aspetto di un modulo: ne rendono superfluo l'ausilio e consentono di separarne l'impostazione grafica dal contenuto.

Con la semplice ridefinizione delle classi associate ai controlli all'interno del foglio di stile associato ad una pagina HTML o ad un template, è possibile far assumere ad essi l'aspetto grafico desiderato in maniera semplice ed immediata.

Ad esempio, ridefinendo all'interno del CSS le classi:


input { font-size: 12px; padding: 2px; margin: 0px 5px }

textarea { font-size: 10px; padding: 2px; margin: 5px 5px }

assegneremo a tutti i controlli input e textarea presenti nella (o nelle) pagina (pagine) associate, le caratteristiche tipografiche e di marginatura indicate, senza dovere effettuare alcuna modifica al codice HTML contenuto.

Il tag <input>

Uno dei problemi maggiori che si incontrano nella definizione delle classi da associare ai controlli dei moduli è soprattutto dovuto al fatto che con il tag <input ...> è possibile definire diverse tipologie di oggetto con caratteristiche grafiche completamente diverse tra loro.

Infatti, a seconda del valore assegnato alla proprietà type, è possibile definire:

Campo di testo a riga singola <input type="text" ... />
Campo di testo nascosto (password) <input type="password" ... />
Casella di spunta <input type="checkbox" ... />
Pulsanti radio <input type="radio" ... />
Pulsante di inoltro <input type="submit" ... />
Pulsante di inoltro grafico <input type="image" ... />
Pulsante di ripristino <input type="reset" ... />
Pulsante di comando <input type="button" ... />
Campo di testo nascosto <input type="hidden" ... />
Controllo per la selezione di file <input type="file" ... />


Ciò vuol dire che, prendendo come riferimento l'esempio precedente, se all'interno delle nostre pagine sono presente dei controlli relativi a pulsanti, campi di testo, caselle di spunta, ecc., essi avranno tutti lo stesso aspetto grafico, poichè vengono ereditati gli attributi della stessa classe input.

A questo fastidioso inconveniente si può facilmente ovviare definendo delle classi specifiche per ciascuna tipologia associata a tale controllo (i nomi utilizzati sono puramente indicativi e possono essere assegnati a piacere):


input .button { font-size: 10px; padding: 2px; margin: 0px 5px; border: solid 1px #000000 }

input .checkbox { font-size: 8px; padding: 2px; margin: 5px }

input .text { font-size: 12px; padding: 2px; margin: 0px 5px; line-height: 16px }

avendo cura di andare a ridefinire gli attributi significativi per la tipologia del controllo desiderato, dato che, altrimenti, erediterebbero quelli preimpostati con la ridefinizione della classe input stessa.

Sfortunatamente questa strategia costringe ad assegnare ad ogni controllo inserito all'interno del codice HTML, la classe specifica, costringendo lo sviluppatore ad un lavoro più attento nella fase di codifica. Quindi, in riferimento all'esempio di cui sopra si dovranno inserire i relativi tag, nel seguente modo:


<input type="button" class="button" ... />

...

<input type="checkbox" class="checkbox" ... />

...

<input type="text" class="text" ... />

Nel caso in cui si debba creare un foglio di stile da applicare ex-novo ad una collezione di pagine HTML esistente, tutto il processo diventa quindi più impegnativo perchè:

  1. E' necessario agire sul sorgente HTML e verificare che i vari controlli non abbiano già delle classi assegnate: in tal caso ridefinire le stesse all'interno del CSS con le opportune personalizzazioni.
  2. Se ai controlli non sono associate classi, è necessario farlo, dopo aver definito una convenzione di denominazioni per individuare le varie casistiche.

L'attività diventa quindi più complessa e onerosa in termini di dispendio temporale. Fortunatamente, è possibile superare questo inconveniente ricorrendo ad una definizione più specifica delle classi associate ai tag, potendone specificare anche la tipologia. Per cui, l'esempio precedente può essere sostituito con:


input[type=button] { font-size: 10px; padding: 2px; margin: 0px 5px; border: solid 1px #000000 }

input[type=checkbox] { font-size: 8px; padding: 2px; margin: 5px }

input[type=text] { font-size: 12px; padding: 2px; margin: 0px 5px; line-height: 16px }

In questo modo è possibile indicare in maniera del tutto trasparente al codice HTML l'aspetto di tutti i controlli presenti in esso e relativi alle tipologie specificate, anche in presenza di definizioni di stile già assegnate agli stessi. E' interessante notare come, con questa tecnica, sia possibile assegnare classi differenti ad oggetti sostanzialmente uguali, quali possono essere i pulsanti di inoltro (submit), di ripristino (reset) o generici.

Nel caso in cui si volesse assegnare un aspetto grafico diverso per ciascun modulo utilizzato all'interno della nostra collezione di pagine è sufficiente incapsularlo in una coppia di tag <div ..> ... </div> ed assegnare a questo una classe specifica da definire opportunamente nel CSS associato.

Ipotizzando, ad esempio, di avere due form di cui uno dedicato all'invio di commenti e l'altro all'invio di una richiesta di assistenza:


<div class="comment">

...

<input type="text" ... />

...

</div>

...

<div class="contact">

...

<input type="text" ... />

...

</div>

Il CSS associato dovrebbe contenere delle definizioni simili alle seguenti:


div.comment input[type=text] { font-size: 12px; padding: 2px; margin: 0px 5px; line-height: 16px }

...

div.contact input[type=text] { font-size: 10px; padding: 2px; margin: 0px; line-height: 14px}

(eventualmente può anche essere omessa l'assegnazione della classe al tag div)

Il rovescio della medaglia: la retrocompatibilità

Sfortunatamente la metodologia descritta ha un limite: non viene correttamente riconosciuta dalle versioni di Internet Explorer precedenti alla 7.0, mentre funziona correttamente con FireFox, Opera e tutti i browser basati sui motori di rendering di questi ultimi.

In realtà è possibile far interpretare correttamente anche ad Internet Explorer 6 e precedenti la sintassi descritta, ma è necessario ricorrere ad un hack che fa uso di codice JavascriptW e, francamente, non credo che ne valga la pena (perchè ricorrere ad un escamotage per rendere compatibile un browser ad uno standard de facto definito dal W3C), anche se il parco installato della vecchia release del browser Microsoft è, purtroppo, drammaticamente ancora consistente.

Ad ogni modo è possibile trovare in rete diverse soluzioni risolutive al problema: io stesso tempo fa avevo realizzato qualcosa di simile ma preferisco indirizzare su questa soluzione (che però non ho direttamente sperimentato) chiunque voglia approfondire l'argomento.

Esprimi il tuo giudizio

Commenti (24) -

Paolo Bee
Paolo Bee
13 gen 2008 alle 19:52  01
In questo periodo sto facendo un restyling di un vecchio sito realizzato in Asp e con layout tabellare, e non puoi neanche immaginare quanto tempo si perda nella validazione di pagine obsolete, specie nelle form... quindi, caro Cristiano, mai dette parole più giuste!

A presto, Paolo.
Cristiano
Cristiano
14 gen 2008 alle 15:30  02
@ Paolo Bee:
Lavoro improbo e soprattutto estremamente faticoso: purtroppo l'uso della rappresentazione tabellare di un layout non è sempre completamente convertibile in una rappresentazione mediante elementi <div> e fogli di stile.

Traffyk
Traffyk
15 gen 2008 alle 02:03  03
Cosa dirti di più? Hai scritto tutto tu Smile Potrei scrivere nella seconda parte di questo articolo come abbellire i form rendendoli più accattivanti graficamente, come inserire delle immagini nei bottoni e così via Smile
Cristiano
Cristiano
15 gen 2008 alle 23:49  04
@ Traffyk:
Nel prossimo articolo, cercherò di essere più sintetico così avrai più spazio :-P
notoriousxl
notoriousxl
16 gen 2008 alle 23:09  05
Bell'articolo! ;)
È possibile definire, tramite CSS, la larghezza di una textarea in % o em?
Sul sito in "firma", ho inserito la ricerca di Google Custom Search che usa il codice XHTML è questo:
<input type="text" name="q" size="14" />
Te lo sto chiedendo perché, per far entrare textarea e pulsante su una riga, ho dovuto ridurre l'attributo "size" - e non penso sia permesso modificare il codice che fornisce Google...

Inoltre sto sviluppando un layout fluido, e mi piacerebbe impostare la casella di ricerca al 100% della larghezza del contenitore Tong
Cristiano
Cristiano
17 gen 2008 alle 13:40  06
@ notoriousxl:
Puoi definire la grandezza di un controllo con i CSS indipendentemente dal fatto che sia una textarea, un campo di testo (input) o altro.
L'esempio da te citato è relativo però ad un campo di input, ma il discorso è uguale.

Personalmente sconsiglio di impostare la grandezza di un controllo via CSS al 100% per motivi di compatibilità cross-browser: è meglio impostare al 98% o al 99% (si devono fare un pò di prove con tutti i browser più diffusi).

L'attributo size puoi modificarlo come vuoi: serve solo ad indicare al browser la larghezza del campo in unità di carattere. Se si applica una classe CSS al controllo il valore non viene considerato.

Cambialo a piacere: Google non si offenderà Wink
notoriousxl
notoriousxl
17 gen 2008 alle 14:57  07
Cristiano ha scritto:
@ notoriousxl:
Personalmente sconsiglio di impostare la grandezza di un controllo via CSS al 100% per motivi di compatibilità cross-browser: è meglio impostare al 98% o al 99% (si devono fare un pò di prove con tutti i browser più diffusi).

L'attributo size puoi modificarlo come vuoi: serve solo ad indicare al browser la larghezza del campo in unità di carattere. Se si applica una classe CSS al controllo il valore non viene considerato.

Cambialo a piacere: Google non si offenderà

Grazie per questi due consigli Wink (molto utile il secondo!)
Per quanto riguarda Google... sicuro che non si offende? Un mio amico tempo fa mi ha chiesto perché la sua pagina non si validava: il problema era il codice di adsense per la ricerca. Io gli ho consigliato, prima di apportare modifiche, di scrivere al supporto Google; gli hanno risposto:

1) poteva cambiare il codice per impostare il flag di default su "ricerca sul sito" piuttosto che "ricerca sul web";

2) non poteva fare altrettanto per rendere il codice XHTML valido!

Foot

Al di là di quanto questo possa avere poco senso, Google non mi è sembrato molto "accomodante" Foot
Cristiano
Cristiano
18 gen 2008 alle 14:27  08
@ notoriousxl:
Sono perplesso: al di là del fatto che Google possa o meno controllare la correttezza dei parametri passati ai suoi script, per poter verificare anche il codice XHTML (o HTML) dovrebbe effettuare ad ogni caricamento della pagina, il re-parsing della stessa ed analizzare ogni singolo TAG.
Questo è ovviamente fattibile, ma ti invito a riflettere sulle implicazioni non solo a livello di "appesantimento" del tuo hosting, ma anche di reverse-engineering del tuo codice: non sono operazioni propriamente lecite Wink  
Per questo io consiglio sempre di limitare il più possbile la presenza di script "esterni" al proprio dominio ... :-P
notoriousxl
notoriousxl
18 gen 2008 alle 15:08  09
@Cristiano
Anzitutto c'è da premettere che il codice in questione era quello relativo ad adsense per la ricerca; forse un cliente adsense è "privilegiato" e i siti su cui utilizza i codici di adsense possono essere oggetto di controlli umani... non saprei. Per questo il mio amico ha chiesto nel gruppo ufficiale di adsense (e gli è stato consigliato di fare come ho riportato sopra; anche io ci sono rimasto male, perché mai Google dovrebbe bannare l'account di adsense di chi corregge i suoi codici, al solo scopo di validare la pagina? ... o forse gli ha risposto la persona sbagliata Tong )

Proprio per questo ti ho chiesto dei CSS (e tu gentilmente hai risposto Tong ): permettono di cambiare l'aspetto dell'elemento, senza intervenire sul suo codice, e quindi senza violare il TOS di adsense (anche Google Custom Search permette di inserire annunci). ;)
notoriousxl
notoriousxl
18 gen 2008 alle 15:11  10
OT: su Opera anche alle emoticon dei commenti viene applicata la proprietà float Tong Al momento non posso testare su altri browser, ma non credo sia un effetto voluto ;)
Cristiano
Cristiano
18 gen 2008 alle 19:32  11
@ notoriousxl:
su Opera anche alle emoticon dei commenti viene applicata la proprietà float. Al momento non posso testare su altri browser, ma non credo sia un effetto voluto.

Infatti non è assolutamente voluto e si presenta anche con gli altri browser. E' un errore nel CSS che mi porto dietro da tempo e che non ho mai corretto per pigrizia.
Stimolato dalla tua segnalazione ho corretto un volta per tutte l'errore semantico. Adesso le emoticons sono correttamente inserite ed allineate all'interno del testo.

Purtroppo invece, Opera (ma solo lui) mi visualizza in maniera errata il box della navigazione tra post precedente e successivo, eliminandomi il padding al di sopra della linea di separazione.
Al momento non è risolvibile :-(
notoriousxl
notoriousxl
18 gen 2008 alle 20:35  12
@cristiano: azz... mi spiace Frown Hai provato a sentire su qualche forum specialistico?
Cristiano
Cristiano
19 gen 2008 alle 19:06  13
@ notoriousxl:
No, ma non temere: prima o poi lo risolvo Wink
Luca
Luca
13 mar 2009 alle 09:24  14
occhio che i selettori di questo tipo
input[type=button]

non vengono gestiti da IE6 e precedenti!
Cristiano
Cristiano
13 mar 2009 alle 09:33  15
@ Luca:
Nell'articolo è stato specificato, nel paragrafo:

Il rovescio della medaglia: la retrocompatibilità
hermansji
hermansji
13 mar 2009 alle 18:30  16
Commento lagnoso... e su Chrome che da errori per conto posso alzare la manina?
.:.
Cristiano
Cristiano
13 mar 2009 alle 19:54  17
@ hermansji:
Chrome non è da meno per la mancata adesione agli standard.
Dopo l'euforia iniziale, la sua quota di utilizzo è scesa molto.
Tra l'altro, quando ho scritto questo articolo, non era nemmeno stato rilasciato (è "nato" 8 mesi dopo Wink )
hermansji
hermansji
13 mar 2009 alle 22:56  18
Non facciamo più in tempo per sopprimerlo?... Chrome naturalmente non il tuo articolo ;)... il mio cervello ha gettato la spugna contro l'ineluttabilità di non riuscire a risolvere uno stupido problema che manifesta solo ISSO!!!
.:.
Cristiano
Cristiano
15 mar 2009 alle 21:07  19
@ hermansji:
Sopprimere Chrome ? Bisognerebbe prima sopprimere Google e, anche questa la vedo molto dura ... Wink

Lignano
Lignano
28 lug 2009 alle 10:24  20
Nei tag Input image ho dei problemi...
Io esempio ho 2  form nella stessa pagina, non capisco perchè anche se gli do il nome al tag image in tutti e 2 i casi, mi processa sempre il primo form, e non quello che gli ho dato il nome. Se però provo con il tag input submit funzia!!
non so dove sbattere la testa.
Alby
lignano
lignano
28 lug 2009 alle 10:30  21
Non riesco a capire perchè se ho 2 form nella sessa pagina e se invece di input submit uso il tag input image, mi processa sempre il primo form, anche se li applico il nome... come posso fare?
Cristiano
Cristiano
28 lug 2009 alle 14:45  22
@ Lignano:
Non puoi usare un tag <input type="image" ...> per effettuare in due punti differenti il submit.
E' necessario usare del codice javascript associandolo all'evento onclick di ciascun pulsante.
Lignano
Lignano
29 lug 2009 alle 10:35  23
Grazie ci provo... comunque ho risolto perche se il nome e E1 lui mette E1.x
Gentilissimo.
Alberto
enrico
enrico
16 feb 2010 alle 17:16  24
Non trovo gli attributi css che gestiscono le dimensioni della casella di un checkbox, per firefox. puoi aiutarmi?

Aggiungi Commento

biucitecode
  • Commento
  • Anteprima
Loading


| |   |  

Codice QR

Codice QR - cristianofino.net

Ultimi Commenti