Guida Completa sui Controlli dei Form di Bootstrap per i Principianti

Ciao a tutti, futuri sviluppatori web! Sono entusiasta di intraprendere questo viaggio con voi mentre esploriamo il meraviglioso mondo dei controlli dei form di Bootstrap. Come qualcuno che ha insegnato scienze informatiche per più di un decennio, posso assicurarvi che padroneggiare questi concetti sarà un cambiamento di gioco nella vostra carriera di sviluppatori web. Allora, entriamo nel dettaglio!

Introduzione ai Controlli dei Form di Bootstrap

Prima di iniziare, permettetemi di condividere una breve storia. Una volta ho avuto uno studente che aveva difficoltà a creare form. Passava ore cercando di allineare gli input e renderli presentabili. Poi, ha scoperto i controlli dei form di Bootstrap, e sembrava che una lampadina si accendesse above la sua testa! Questa è la potenza di Bootstrap - rende il complesso semplice.

I controlli dei form di Bootstrap sono elementi pre-stilizzati che permettono agli utenti di inserire dati sulla vostra pagina web. Sono reattivi, personalizzabili e incredibilmente facili da usare. Esploriamo ciascun tipo in dettaglio.

Dimensionamento

Una delle prime cose che vorrete imparare è come dimensionare i vostri controlli dei form. Bootstrap offre tre dimensioni: piccola, predefinita e grande.

<input class="form-control form-control-lg" type="text" placeholder="Input grande">
<input class="form-control" type="text" placeholder="Input predefinito">
<input class="form-control form-control-sm" type="text" placeholder="Input piccolo">

In questo esempio, abbiamo creato tre campi di input di diverse dimensioni. La classe form-control è la classe di base per tutti i controlli dei form in Bootstrap. Aggiungere form-control-lg lo rende grande, mentre form-control-sm lo rende piccolo.

Testo del Form

A volte, è necessario fornire ulteriori informazioni su un campo del form. È qui che il testo del form diventa utile.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
La tua password deve essere lunga 8-20 caratteri, contenere lettere e numeri, e non deve contenere spazi, caratteri speciali o emoji.
</div>

Qui, abbiamo aggiunto del testo utile sotto l'input della password. La classe form-text stilizza questo testo in modo appropriato, facendolo emergere come informazione aggiuntiva.

Disabilitato

Ci possono essere situazioni in cui si desidera disabilitare determinati controlli dei form. Bootstrap rende questa operazione semplice:

<input class="form-control" type="text" placeholder="Input disabilitato" aria-label="Input esempio disabilitato" disabled>
<textarea class="form-control" placeholder="Area di testo disabilitata" aria-label="Area di testo esempio disabilitata" disabled></textarea>

Aggiungendo l'attributo disabled, abbiamo reso questi controlli dei form non modificabili. Appariranno sfocati, indicando all'utente che non possono essere modificati.

Solo Lettura

Gli input in sola lettura sono simili a quelli disabilitati, ma possono essere messi a fuoco e selezionati.

<input class="form-control" type="text" value="Input in sola lettura qui..." aria-label="Input esempio in sola lettura" readonly>

L'attributo readonly rende l'input non modificabile ma ancora selezionabile.

Testo in Sola Lettura

A volte, si desidera visualizzare le informazioni come parte di un form senza renderle un campo modificabile. È qui che entra in gioco il testo in sola lettura:

<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>

La classe form-control-plaintext rimuove lo stile predefinito del campo del form, facendolo apparire come testo semplice.

Input del File

Gli input dei file permettono agli utenti di caricare file. Ecco come creare uno:

<div class="mb-3">
<label for="formFile" class="form-label">Esempio di input file predefinito</label>
<input class="form-control" type="file" id="formFile">
</div>

Questo crea un campo di input dei file stilizzato coerentemente con altri controlli dei form di Bootstrap.

Dimensionamento dell'Input del File

Come altri controlli dei form, anche gli input dei file possono essere dimensionati:

<div class="mb-3">
<label for="formFileSm" class="form-label">Esempio di input file piccolo</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Esempio di input file grande</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Utilizziamo le stesse classi di dimensionamento come prima: form-control-sm e form-control-lg.

Attributi dell'Input del File

È possibile personalizzare gli input dei file utilizzando attributi:

<div class="mb-3">
<label for="formFileMultiple" class="form-label">Esempio di input file multipli</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

L'attributo multiple permette agli utenti di selezionare più di un file.

Colore

Bootstrap supporta anche gli input dei colori:

<label for="exampleColorInput" class="form-label">Selettore colore</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Scegli il tuo colore">

Questo crea un selettore di colore stilizzato coerentemente con altri controlli dei form di Bootstrap.

Datalists

Le datalist forniscono una lista di opzioni predefinite per un campo di input:

<label for="exampleDataList" class="form-label">Esempio di datalist</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Scrivi per cercare...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>

Questo crea un campo di input con suggerimenti di completamento automatico dalle opzioni della datalist.

Riepilogo dei Metodi dei Controlli dei Form di Bootstrap

Ecco una tabella che riassume i metodi che abbiamo coperto:

Metodo	Descrizione
Dimensionamento	Regola la dimensione dei controlli dei form utilizzando classi come form-control-lg e form-control-sm
Testo del form	Aggiungi testo aggiuntivo ai controlli dei form utilizzando la classe form-text
Disabilitato	Rendi i controlli dei form non modificabili utilizzando l'attributo disabled
Solo lettura	Rendi i controlli dei form non modificabili ma selezionabili utilizzando l'attributo readonly
Testo in sola lettura	Visualizza le informazioni come testo semplice utilizzando la classe form-control-plaintext
Input del file	Crea input per il caricamento dei file utilizzando type="file"
Dimensionamento dell'input del file	Regola la dimensione degli input dei file utilizzando le classi di dimensionamento
Attributi dell'input del file	Personalizza gli input dei file con attributi come multiple
Colore	Crea selettori di colore utilizzando type="color"
Datalists	Fornisci suggerimenti di completamento automatico per un campo di input utilizzando l'elemento <datalist>

Ecco fatto! Avete appena imparato i dettagli dei controlli dei form di Bootstrap. Ricordate, la pratica fa la perfezione. Prova a integrare questi elementi nei tuoi progetti, e presto sarai in grado di creare form bellissimi e reattivi con facilità.

Buon codice, futuri sviluppatori web!

Credits: Image by storyset