Potresti averli visti nei campi di un forma da compilare: Etichette che sembrano galleggiare sopra il campo mentre digiti. Puoi farlo anche sul tuo sito Joomla? Certo che puoi! Brian Teeman spiega come realizzarle.
Cosa sono le etichette FLUTTUANTI?
Le etichette fluttuanti sono un modello di progettazione dell'interfaccia utente spesso utilizzato nei form in cui il testo segnaposto per un campo di input si muove o "galleggia" sopra il campo quando l'utente inizia a digitare. Questo modello è stato reso popolare dalle linee guida del Material Design di Google
Come funzionano le etichette FLUTTUANTI:
- Stato iniziale:
L'etichetta viene visualizzata come testo segnaposto all'interno del campo di input. - Stato focalizzato:
Quando l'utente fa clic o si concentra sull'input, il testo segnaposto si anima e si sposta sopra il campo di input. - Stato riempito:
Dopo che l'utente immette i dati, l'etichetta rimane sopra il campo di immissione per riproporre il contesto per i dati inseriti.
Vantaggi delle etichette FLUTTUANTI
- Efficienza nell'uso degli spazi:
Combina i ruoli delle etichette di testo e di campo segnaposto, riducendo l'ingombro e risparmiando spazio. - Miglioramento dell'usabilità:
Assicura che il contesto sia sempre disponibile (ad esempio, gli utenti possono vedere cosa rappresenta il campo anche dopo aver inserito i dati). - Aspetto visivo migliorato:
Aggiunge un aspetto lucido e moderno ai form. - Accessibilità:
Fornisce un'esperienza migliore per i lettori di schermo e migliora l'usabilità per gli utenti ipovedenti, rispetto ai segnaposto che scompaiono nel momento del focus. L'alternativa è nascondere l'etichetta usando CSS e renderla visibile solo ai lettori di schermo. (Questo è ciò che fa Joomla con il modulo di login predefinito).
Svantaggi delle etichette FLUTTUANTI
- Carico cognitivo:
Gli utenti possono inizialmente trovare la transizione che distrae, soprattutto se l'animazione è eccessiva. - Attivazione complessa:
Richiede la creazione di un override di Joomla. Le etichette fluttuanti non sono possibili con il markup Joomla predefinito per i campi. - Funzionalità Placeholder ridotta:
Le etichette galleggianti non possono fornire indicazioni dettagliate o esempi nel segnaposto stesso (ad esempio, "e.g.,Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo. "). - Comportamento incoerente:
Se non progettato bene, gli utenti potrebbero confondere l'etichetta fluttuante con i dati inseriti.
Implementazione di Joomla
Il CSS per Bootstrap 5.3 (utilizzato dal template Cassiopeia) supporta nativamente le etichette flottanti, basta aggiungere le classi CSS richieste e strutturare il markup nell'ordine richiesto.
Configurazione rapida
Includere un paio di elementi <input class="form-control"> e <label> in .form-floating per abilitare le etichette fluttuanti con i campi del modulo testuale di Bootstrap. Un »placeholder« è richiesto per ogni <input> poiché le etichette flottanti solo CSS di Bootstrap utilizzano lo pseudo-elemento:placeholder-show . Si noti inoltre che il tag <input> deve venire prima del tag <label>.
Esempio - Modulo di LOGIN
Questo è un override abbastanza facile da creare. Modificare il markup per il campo nome utente e password aggiungendo un extra <classe div="form-floating"> intorno ai campi e rimuovendo il tag class="visually-hidden" dall'etichetta. Il codice modificato dovrebbe assomigliare al codice qui sotto.
NOME UTENTE
<div class="input-group">
<div class="form-floating">
<input id="modlgn-username-<?php echo $module->id; ?>" type="text" name="username" class="form-control" autocomplete="username" placeholder="<?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?>">
<label for="modlgn-username-<?php echo $module->id; ?>"><?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
</div>
<span class="input-group-text" title="<?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?>">
<span class="icon-user icon-fw" aria-hidden="true"></span>
</span>
</div>Password
<div class="input-group">
<div class="form-floating">
<input id="modlgn-passwd-<?php echo $module->id; ?>" type="password" name="password" autocomplete="current-password" class="form-control" placeholder="<?php echo Text::_('JGLOBAL_PASSWORD'); ?>">
<label for="modlgn-passwd-<?php echo $module->id; ?>" ><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
</div>
<button type="button" class="btn btn-secondary input-password-toggle">
<span class="icon-eye icon-fw" aria-hidden="true"></span>
<span class="visually-hidden"><?php echo Text::_('JSHOWPASSWORD'); ?></span>
</button>
</div>
RISULTATO
Modulo di accesso Joomla modificato utilizzando etichette fluttuanti
Maggiori informazioni
Consulta la documentazione ufficiale di Bootstrap per informazioni su Floating Labels e maggiori esempi. Ricorda che un input deve avere un segnaposto e presentarsi prima dell'etichetta.
Alcuni articoli pubblicati sul Joomla Community Magazine rappresentano l'opinione personale o l'esperienza dell'Autore sull'argomento specifico e potrebbero non essere allineati alla posizione ufficiale del Progetto Joomla