Form con CSS - un remake
Giovedì 13 Luglio 2006 - 09:00
di Alessandro Fulciniti
Un po’ di tempo fa in questo post ho presentato uno degli ultimi articoli di A List Apart (Pretty Accessible Forms)
e il relativo esempio, con una piccola riflessione in chiusura, ovvero se l’impiego di Javascript per il layout del form fosse adeguato e necessario.
Spinto dalla curiosità, ho trovato finalmente il tempo per vedere se il risultato fosse ottenibile solo con i CSS e magari rivedendo il markup, dato che non mi piaceva molto l’uso delle liste numerate per racchiudere elementi di form.
Ecco così il remake che ho preparato, in cui il risultato visivo è lo stesso, ma vengono impiegati solo i CSS senza l’uso di hack. La compatibilità è decisamente buona: è stato testato in IE5, IE5.5, IE6, IE7, Opera, Firefox e Safari. E se il problema che ha fatto nascere l’articolo di AlistApart è il float e l’uso del clear, in questo caso non ho usato clear e quindi non dovrebbe interferire con eventuali elementi di pagina adiacenti.
Questo mi porta a una riflessione: cercare alternative è sempre un bene nello sviluppare soluzioni, ma a volte si tende a non considerare quella più semplice e con meno variabili in gioco. In questo caso l’impiego di javascript per il layout si è rivelato superfluo.
Il CSS dell’esempio che ho preparato è piuttosto semplice, ma se tra i lettori c’è qualcuno che ha difficoltà nella sua comprensione,
preparo volentieri un post con i dettagli tecnici!
Commenti
1
si si… prepara!!
2
Bello Alessandro, complimenti!
Ovviamento lo sfondo (o meglio, l’effetto) si adatta a qualunque lunghezza del form, vero?
3
Una domanda:
come mai utilizzi un div per ogni input?ho provato inserendo solo dei br per mandare a capo gli input e il risultato è uguale (occorre modificare alcuni parametri del css per l’impatto grafico)
ma l’allineamento rimane.grazie per l’attenzione
Fa# - postato da Fabrizio - 13 Luglio 2006 - 09:52
4
Interessante…ma i forms per la loro logica non dovrebbero essere considerati un elemento di tipo tabellare e quindi da inserire in tabelle?
# - postato da Baoh - 13 Luglio 2006 - 10:08
5
bello bello.
l’unico problema dei form è che ci sono pochi tipi di campi ormai, rispetto alle esigenze. ed allora si ricorre ai calendari js, ecc…speriamo che con xforms aumentino anche i tipi di dati da spedire.
# - postato da www.mdsjack.bo.it - 13 Luglio 2006 - 10:22
6
Molto interessante l’uso del tag LABEL, confesso che non l’ho mai utilizzato (e mi riprometto di farlo al piu’ presto). Importante anche la disposizione degli elementi, ottenibile senza CSS solo con tabelle. Direi che la soluzione proposta e’ decisamente efficace
# - postato da Nicola Bortolini - 13 Luglio 2006 - 11:03
7
MMh.. remake perfetto ;)
Complimenti
8
In effetti quell’articolo mi aveva lasciato un po’ perplesso…
per Baoh:
assolutamente no.
# - postato da Andrea Paiola - 13 Luglio 2006 - 11:11
9
Ma perché nessuno si ricorda di impostare il colore di sfondo della pagina?
Il mio colore di sfondo predefinito non è il bianco ma il grigio (lavorando mi affatica di meno la vista), entrambe gli esempi (quello di A List Apart e quello presentato qui) sarebbero visivamente belli su sfondo bianco, io invece vedo blocchi più o meno bordati di bianco su uno sfondo grigio.
PS. la stessa cosa vale per questo blog: ai lati del contenuto centrale vedo le sfumature verso il bianco e poi.. il grigio!# - postato da Luciano Ghione - 13 Luglio 2006 - 11:43
10
Per Andrea….
potrei sbagliarmi ma il passaggio logico da un elemento di un form ad un altro secondo me rende i form elementi tabellari. Ora non ricordo kle fonti ma non creod di essere l’unico a pensarla così.
Invece di dire “assolutamente no” spiegatemi perchè, magari, sbaglio
# - postato da Baoh - 13 Luglio 2006 - 12:03
11
@Baoh
Io sono dell’idea che le tabelle debbano essere utilizzate solo per dati tabellari… Non per layout o disposizioni di elementi che logicamente possano essere realizzate con tabelle…
Sinceramente non piace nemmeno a me l’uso dei div… Vedrò se riesco a fare un remake del remake senza quelli ;)
12
Ha già risposto Epper… inoltre il tag form e il tag fieldset non possono avere come figlio table…
table non può avere come figlio form eccetera…
usa i marcatori giusti.
ciao,
Andrea.# - postato da Andrea Paiola - 13 Luglio 2006 - 13:40
13
Hai tralasciato nel copia incolla la label per city. :P
Complimenti…# - postato da Giovanni Battista Lenoci - 13 Luglio 2006 - 15:21
14
@Andrea: veramente il validatore W3C non da errori se una tabella è dentro il form ed il fieldset. Sei proprio sicuro?
# - postato da www.mdsjack.bo.it - 13 Luglio 2006 - 17:45
15
Ho fatto il remake del remake
La struttura di prima era
div
-label
-inputma non so perchè, non mi piaceva… Mi sembra più logica questa struttura:
label
-input
che è quella che ho utilizzato…La mia versione la trovate a questo indirizzo:
http://host.epper.org/css/form...../Ecco i problemi che ho riscontrato:
-Nel campo date Of Birth ci sono controlli associati ad una sola label… Per ora ne vedo solo 1
-Per come ho posizionato i tag di input c’è il problema con l’ultimo elemento, quello dei commenti, che esce dal formOra vedo se riesco a sistemare in modo elegante la cosa, altrimenti utilizzerò il metodo con i div ;)
16
Quanti interventi! procederò in ordine: Francesco, la prossima settimana pubblicherò un mini-tutorial qui sul blog.
Sustia: il gradiente è largo 10px, e si ripete in orizzontale: quindi, sì, l’effetto funziona x ogni larghezza del form.
Fabrizio ed Epper: i div x ogni input li ho utilizzati xchè, come ho già detto nell’altro post, non credo che le liste ordinate siano una buona scelta per contenere elementi di form, soprattutto perchè in assenza dei CSS hanno l’effetto di numerare le etichette, il che potrebbe confondere. Il div d’altronde è il contenitore generico block-level x eccellenza. Ovviamente si possono usare anche i br, qualcuno usa esclusivamente label e input, altri suggeriscono le liste di definizione.. ci sono davvero molti modi per la marcatura del form dell’esempio che possono consentire lo stesso risultato grazie ai CSS.
Baoh, ci sono pareri discordanti sull’uso delle tabelle x l layout dei form. Da una parte l’idea che le tabelle vanno bene solo per dati tabellari, dall’altra che i form, essendo rappresentabil su una struttura tabellare possano essere intabellati.
Personalmente ritengo che i form vadano vincolati alla loro struttura anche in assenza dei css, quindi br, div (e soprattutto) tabelle vanno bene se usati con intelligenza. Per le tabelle ci sono alcuni accorgimenti in più da prendere: il più importante è che vanno bene se rispettano l’ordine logico di immissione dei dati e quello tra le label e campi di input nel codice se si eliminassero virtualmente righe e celle.
Le tabelle con i form si possono usare, non è vero che sia “vietato”: basta che la tabella sia contenuta per intero all’interno di un elemento form o di un fieldset. In ogni caso, se si usano le tabelle è bene tenere gli attributi presentazionali da parte e usare un po’ di CSS per larghezze e altezze delle celle. Cmq…c’è molto più divertimento a trovare le alternative e usare un po’ di più i CSS ;-)Nicola, il tag label andrebbe sempre usato per etichettare i campi dei form, perchè consente di associarli univocamente. Se ci fai caso, nell’esempio, cliccando su una label il cursore si posiziona già pronto per l’immissione dei dati nel relativo input.
Luciano e Giovanni: grazie delle segnalazioni, l’esempio è stato aggiornato.
In conclusione, due approfondimenti su html.it : Elementi essenziali e supplementari nella costruzione di form e Impaginare i form. Li ho scritti più di due anni fa, ma se non l’avete ancora fatto, meritano una lettura.
# - postato da Alessandro Fulciniti - 13 Luglio 2006 - 19:50
17
Ritengo sia mille volte meglio utilizzare i CSS anche con i form… Quando scrivo l’html non voglio pensare a come verrà visualizzato :D
Cmq io prima ho postato un altro commento quì con un link ad un’altra versione fatta da me, basata su quella di Alessandro Fulciniti, ma che non fa uso di div…
Non vedo il mio commento, è perchè non possiamo postare link? ^o)
18
Epper, il tuo esempio è pubblicato: i commenti con i link si possono postare, come no! Solo che vanno approvati manualmente.
Per i problemi di resa del “remake del remake” ho dato uno sguardo veloce al CSS: le select si sovrappongono e la textarea sborda per via dei posizionamenti assoluti.
In quanto alla tua affermazione “Quando scrivo l’html non voglio pensare a come verrà visualizzato”: vero in generale, ma per i form il discorso è un po’ diverso, dato che la loro presentazione dovrebbe essere, come ho già detto, curata a partire da una struttura portante (realizzata vuoi con i div,br o tabelle) e imprescindibile dal CSS così da consentire una presentazione decente anche in assenza di CSS. Prova a vedere senza CSS il mio esempio con i div e quello che hai fatto tu, noterai una differenza notevole.
# - postato da Alessandro Fulciniti - 13 Luglio 2006 - 23:39
19
@Alessandro Fulciniti
Sì, i problemi sono quelli… Ma non vedo soluzioni, amen…
Riguardo alle tabelle secondo me la struttura portante è ottima già con fieldset, legend, label e controlli (div o meno) e si vede in modo abbastanza chiaro anche a CSS disabilitati…
Poi usando i fogli di stile è possibile personalizzarli maggiormente rispetto a quanto si può fare se si utilizzano le tabelle.Credo comunque che utilizzerò i div, anche perchè mi danno possibilità di personalizzazione in caso di strutture complesse…
Grazie intanto e scusa, ma non avevo pensato che dovevate approvarli i commenti ;)
20
Interessante questa variante, ed il risultato è ottimo. Anche per me le tabelle non dovrebbero essere usate per i form, una struttura come quella dell’esempio è già buona.. al limite ci possono essere delle varianti per incolonnare le coppie di label ed input, ma sono dettagli minimi.
21
Per chi fosse interessato ai dettagli: il mini-tutorial sulla costruzione del form è stato pubblicato oggi su html.it: ecco form con i CSS. Saluti!
# - postato da Alessandro Fulciniti - 25 Luglio 2006 - 20:16