Form e bottoni di submit

mercoledì 7 marzo 2007 - 9:09

di Alessandro Fulciniti

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.

Tags:, ,

Categoria: Web Design | Commenta

Commenti per Form e bottoni di submit

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.

# - Postato da Luca 7 marzo 2007 alle 10:38

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… :) :) :)

# - Postato da Romano 7 marzo 2007 alle 11:10

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.

# - Postato da Carlo 7 marzo 2007 alle 11:52

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.

# - Postato da Luca 7 marzo 2007 alle 11:56

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

# - Postato da Andrea 7 marzo 2007 alle 12:16

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

# - Postato da Riccardo Coletta 7 marzo 2007 alle 14:05

@Luca

Grazie, é proprio quello che intendevo io!!!

# - Postato da Romano 7 marzo 2007 alle 17:53

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>