Christian Montoya ha presentato nel recente
Submit buttons should not look like input boxes
una riflessione che condivido, e che ho espresso tempo fa nell’articolo Impaginare
i form
: capita non di rado di vedere form di registrazione in cui il bottone di submit si presenta come i campi di input, come nell’immagine di seguito.

esempio di form da evitare

A parer mio è indice di poca cura, e il più delle volte ha l’effetto di confondere l’utente.
Le soluzioni presentate da Montoya per evitare questo problema sono sostanzialmente tre:

  1. usare classi (o, aggiungo io, id) per differenziare campi di input del tipo
    input type="text" e input type="submit"
  2. usare il tag <button> anzichè <input> per il bottone di submit
  3. usare selettori di attributo del tipo input[type="submit"]

In quanto alla terza soluzione, c’è da dire che non funziona su IE5.x e IE6 e direi
che si potrebbe escludere. A parer mio è da preferire l’uso del button. Il motivo? àˆ ben supportato e non richiede classi e/o id aggiuntivi. A tal proposito, se non l’avete
ancora fatto, merita una lettura l’articolo Push my button di cui è presente
anche la traduzione su HTML.it.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
7 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

@Luca Grazie, é proprio quello che intendevo io!!!

Romano
Romano

E' una vita che non uso più i submit Button é totalmente personalizzabile con i css e assolutamente funzionale

Riccardo Coletta
Riccardo Coletta

Gli ID (che devono essere unici!) lasciateli al DOM, meglio usare solo classi...

Andrea
Andrea

Esattamente quello che sostenevo nel commento precedente al tuo. Anch'io me ne sono accorto proprio ieri (guarda che coincidenza)! Nell'articolo non é assolutamente scritto, si cita l'image-raplacement ma non si dice che é quasi indispensabile. Ieri sera però ho trovato anche questa soluzione

BUTTON
{
  background-color:transparent;
  border:none;
}
In questo modo, anche senza l'image-raplacement si forza il browser a mostrare il pulsante piatto, senza effetto 3d. L'immagine "incollata" sopra ora é direttamente posizionata nella pagina e non sopra un pulsante.

Luca
Luca

Piuttosto che aggiungere delle classi per supportare IE, penso che userò i selettori css attraverso JQuery, naturalmente solo per elementi grafici non importanti...i poveretti con Internet Explorer e js disabilitati vedranno un form standard.

Carlo
Carlo

Ma pensa, proprio stanotte mi sono riletto quell'articolo (traduzione compresa) perché sto cercando di sostituire alcuni bottoni di tipo "input" della mia pagina web con altri di tipo "button". Concordo col fatto che la cura in questi dettagli può davvero migliorare l'esperienza dell'utente. OT: l'unico problema é che non riesco a far visualizzare solo l'immagine che voglio usare (la forma é simile ai pulsanti tondeggianti stile Mac). L'effetto che ottengo é un bottone rettangolare con un'immagine incollata sopra... :) :) :)

Romano
Romano

Questa segnalazione capita a proposito. Proprio ieri mi sono accorto che l'articolo tradotto afferma erroneamente che il tag

BUTTON
viene reso dai browser in modo "grezzo". A me sia con Firefox 2 che con IE6, viene reso come un normalissimo pulsante di submit. Nell'articolo si cita l'image-replacement ma secondo me non si sottolinea abbastanza la necessità  di "sovrascrivere" attraverso i CSS la naturale tendenza dei browser ad "incollare" il contenuto del tag (per esempio un'immagine) sopra ad un pulsante. Sia chiaro non vuole essere una critica, solo una segnalazione.

Luca
Luca