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
Testare l'invio dei messaggi con Event Hubs Data Explorer
Introduzione alle Container Queries
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Simulare Azure Cosmos DB in locale con Docker
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Introduzione ai web component HTML
Potenziare la ricerca su Cosmos DB con Full Text Search
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
Il nuovo controllo Range di Blazor 9
Eseguire query in contemporanea con EF
I più letti di oggi
- Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
- .NET Conference Italia 2025 - Milano
- Gestione ciclo di vita in .NET Aspire
- The Agentic Day - Milano
- Gestione CSS in Blazor con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestione file Javascript in Blazor con .NET 9
- Inviare un'e-mail con ASP.NET