Gli amanti della documentazione avranno sicuramente notato che nella versione 4.6 di Bootstrap , tra gli esempi della sezione esperimenti si trovava l'utilizzo dello pseudo-element :placeholder-shown per creare un floating label, ossia una textbox con una label con l'effetto placeholder che si rimpiccioliva e si posizionava all'interno del controllo.
Dalla versione 5.0, l'interazione con i componenti è stata migliorata in quanto la transazione della label parte già al click sull'input e sono stati allineati i feedback di validazione. Tutto ciò è possibile utilizzando una sola classe: form-floating.
<div class="form-floating mb-3"> <input type="email" class="form-control" id="email" placeholder="email@email.com"> <label for="email">Email</label> </div>
Analizzando il codice si nota come la label venga posizionata sotto il controllo, questo perchè l'animazione è effettuata utilizzando solo CSS tramite il selettore ~.
La floating label presenta ancora alcuni problemi con i controlli textarea; problemi che il team di Bootstrap si è promesso di risolvere con i prossimi rilasci.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Stop alle password con Azure Managed Identity
Gestione delle scrollbar dinamiche in HTML e CSS
Interagire con Azure DevOps tramite MCP Server
Abilitare .NET 10 su Azure App Service e Azure Functions
Introduzione a GitHub Copilot CLI
Mischiare codice server side e client side in una query LINQ con Entity Framework
Filtrare i dati in ASP.NET Core usando OpenTelemetry su Azure Monitor
Effettuare la ricerca di testo nascosto in una pagina web con Javascript
DevSecOps per .NET: dalla teoria alla pratica
Integrazione di Copilot in .NET Aspire
Utilizzare ExecuteUpdate per aggiornare colonne JSON in Entity Framework
Usare i generics di C# con la clausola nameof in modo semplificato


