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
Eliminare record doppi in Sql Server
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Controllare la velocità di spostamento su una pagina HTML
Abilitare il rolling update su Azure Functions flex consumption
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
Utilizzare Container Queries nominali
Gestire gli errori nelle Promise JavaScript con try()
Integrare LLM alle nostre applicazioni in .NET con MCP
Definire il metodo di rilascio in .NET Aspire
Utilizzare WebJobs su Linux con Azure App Service
Utilizzare i variable font nel CSS
Configurare automaticamente un webhook in Azure DevOps
I più letti di oggi
- Inserire le news di Punto Informatico nel proprio sito
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps
- Esaminare documenti XML con namespace utilizzando LINQ to XML
- Alleggerire le applicazioni WPF sfruttando gli oggetti Freezable
- Effetto turnstile su tutte le pagine con il Windows Phone Toolkit
- Le DirectInk API nella Universal Windows Platform
- Sfruttare una CDN con i bundle di ASP.NET
- Gli oggetti CallOut di Expression Blend 4.0


