Moduli

Esempi e linee guida di utilizzo per stili di controllo modulo, opzioni di layout e componenti personalizzati per la creazione di unampia varietà di moduli.

Panoramica

I controlli del modulo di Bootstrap si espandono sui nostri stili di modulo riavviati con le classi. Utilizza queste classi per attivare le loro visualizzazioni personalizzate per un rendering più coerente tra browser e dispositivi.

Assicurati di utilizzare un attributo type appropriato su tutti gli input (ad es. , email per indirizzo email o number per informazioni numeriche) per sfruttare i nuovi controlli di input come la verifica dellemail, la selezione del numero e altro.

Ecco un rapido esempio per dimostrare gli stili di form di Bootstrap. Continua a leggere per la documentazione sulle classi richieste, sul layout del modulo e altro ancora.

Controlli del modulo

Assicurati di esplorare i nostri moduli personalizzati per definire ulteriormente lo stile <select> s.

Per gli input di file, scambia .form-control con .form-control-file.

Dimensionamento

Imposta le altezze utilizzando classi come .form-control-lg e .form-control-sm.

Sola lettura

Aggiungi readonly attributo booleano su un input per impedire la modifica del valore dellinput. Gli input di sola lettura appaiono più chiari (proprio come gli input disabilitati), ma mantengono il cursore standard.

Testo normale di sola lettura

Se desideri che gli elementi <input readonly> nel modulo siano in formato testo normale, utilizza .form-control-plaintext class per rimuovere lo stile del campo modulo predefinito e mantenere il margine e il riempimento corretti.

Caselle di controllo e radio

Predefinito le caselle di controllo e le radio vengono migliorate con laiuto di .form-check, una singola classe per entrambi i tipi di input che migliora il layout e il comportamento dei loro elementi HTML. Le caselle di controllo servono per selezionare una o più opzioni in un elenco, mentre le radio servono per selezionare unopzione da molte.

Le caselle di controllo e le radio disattivate sono supportate, ma per fornire un not-allowed al passaggio del mouse del <label> principale, dovrai aggiungere lattributo disabled a .form-check-input. Lattributo disabilitato applicherà un colore più chiaro per aiutare a indicare lo stato dellinput.

Le caselle di controllo e luso delle radio sono progettati per supportare la convalida dei moduli basata su HTML e fornire etichette concise e accessibili. Pertanto, i nostri <input> e <label> sono elementi di pari livello rispetto a un <input> allinterno di un <label>. Questo è leggermente più dettagliato in quanto devi specificare gli attributi id e for per mettere in relazione gli attributi <input> e <label>.

Predefinito (in pila)

Per impostazione predefinita, qualsiasi numero di caselle di controllo e radio che sono di pari livello immediatamente verrà impilato verticalmente e opportunamente spaziato con .form-check.

Inline

Raggruppa le caselle di controllo o le radio sulla stessa riga orizzontale aggiungendo .form-check-inline a qualsiasi .form-check.

Senza etichette

Aggiungi .position-static agli input allinterno di .form-check che non hanno testo di etichetta. Ricorda di fornire comunque una qualche forma di etichetta per le tecnologie assistive (ad esempio, utilizzando aria-label).

Layout

Poiché Bootstrap applica display: block e width: 100% a quasi tutti i nostri controlli del modulo , i moduli verranno impilati verticalmente per impostazione predefinita. È possibile utilizzare classi aggiuntive per variare questo layout in base al modulo.

Gruppi di moduli

La classe .form-group è il modo più semplice per aggiungere una struttura ai moduli. Fornisce una classe flessibile che incoraggia il corretto raggruppamento di etichette, controlli, testo della guida opzionale e messaggi di convalida dei moduli. Per impostazione predefinita, applica solo margin-bottom, ma raccoglie stili aggiuntivi in .form-inline secondo necessità. Usalo con <fieldset> s, <div> so quasi qualsiasi altro elemento.

Form grid

Form più complessi possono essere costruiti usando le nostre classi grid. Usali per layout di modulo che richiedono più colonne, larghezze variabili e opzioni di allineamento aggiuntive.

Riga del modulo

Puoi anche sostituire .row con .form-row, una variazione della nostra riga della griglia standard che sostituisce i margini interni delle colonne predefiniti per layout più stretti e compatti.

Layout più complessi possono essere creati anche con il sistema a griglia.

Modulo orizzontale

Crea moduli orizzontali con la griglia aggiungendo la classe .row per formare gruppi e utilizzando la .col-*-* per specificare la larghezza delle etichette e dei controlli. Assicurati di aggiungere .col-form-label anche ai tuoi <label> in modo che siano centrati verticalmente con i controlli del modulo associati.

A volte, forse è necessario utilizzare utilità di margine o riempimento per creare lallineamento perfetto di cui hai bisogno. Ad esempio, abbiamo rimosso padding-top sulletichetta degli ingressi radio in pila per allineare meglio la linea di base del testo.

Etichetta modulo orizzontale dimensionamento

Dimensionamento colonna

Come mostrato negli esempi precedenti, il nostro sistema a griglia consente di posizionare un numero qualsiasi di .col s allinterno di .row o .form-row. Divideranno la larghezza disponibile equamente tra di loro. Puoi anche scegliere un sottoinsieme delle colonne per occupare più o meno spazio, mentre i restanti .col suddividono equamente il resto, con classi di colonna specifiche come .col-7.

Ridimensionamento automatico

Lesempio seguente utilizza unutilità flexbox per centrare verticalmente i contenuti e le modifiche .col a .col-auto in modo che le colonne occupino solo lo spazio necessario. In altre parole, la colonna si dimensiona da sola in base al contenuto.

Puoi quindi remixarlo ancora una volta con classi di colonna specifiche per dimensione.

E naturalmente sono supportati i controlli dei moduli personalizzati.

Moduli incorporati

Utilizza .form-inline class per visualizzare una serie di etichette, controlli del modulo e pulsanti su una singola riga orizzontale. I controlli del modulo allinterno dei moduli incorporati variano leggermente rispetto ai loro stati predefiniti.

• I controlli sono display: flex, comprimono qualsiasi spazio vuoto HTML e consentono di fornire il controllo dellallineamento con utilità di spaziatura e flexbox.
• I controlli e i gruppi di input ricevono width: auto per sostituire limpostazione predefinita di Bootstrap width: 100%.
• I controlli vengono visualizzati in linea solo nelle finestre con una larghezza di almeno 576 px per tenere conto delle aree ristrette sui dispositivi mobili.

Potrebbe essere necessario definire manualmente la larghezza e lallineamento dei singoli controlli del modulo con utilità di spaziatura (come mostrato di seguito). Infine, assicurati di includere sempre un <label> con ogni controllo del modulo, anche se devi nasconderlo ai visitatori non lettori di schermo con .sr-only .

Sono supportati anche controlli e selezioni di moduli personalizzati.

Testo della guida

Il testo della guida a livello di blocco nei moduli può essere creato utilizzando .form-text (precedentemente noto come .help-block nella v3). Il testo della guida in linea può essere implementato in modo flessibile utilizzando qualsiasi elemento HTML in linea e classi di utilità come .text-muted.

Il testo della guida sotto gli input può essere abbinato a .form-text. Questa classe include display: block e aggiunge un po di margine superiore per una facile spaziatura dagli input precedenti.

Il testo inline può utilizzare qualsiasi tipico elemento HTML inline (sia esso un <small>, <span> o qualcosaltro) con nientaltro che una classe di utilità.

Moduli disabilitati

Aggiungi lattributo booleano disabled su un input per impedire le interazioni dellutente e farlo apparire più leggero.

Aggiungi disabled attributo a un <fieldset> per disabilitare tutti i controlli allinterno.

Convalida

Fornisci feedback prezioso e utilizzabile ai tuoi utenti con la convalida del modulo HTML5, disponibile in tutti i nostri browser supportati. Scegli dal feedback di convalida predefinito del browser o implementa messaggi personalizzati con le nostre classi incorporate e JavaScript di avvio.

Come funziona

Ecco come funziona la convalida del modulo con Bootstrap:

• La convalida del modulo HTML viene applicata tramite le due pseudo-classi del CSS, :invalid e :valid. Si applica agli elementi <input>, <select> e <textarea>.
• Bootstrap definisce gli stili :invalid e :valid per la classe genitore .was-validated, solitamente applicato <form>. In caso contrario, qualsiasi campo obbligatorio senza un valore risulta non valido al caricamento della pagina. In questo modo, puoi scegliere quando attivarli (in genere dopo aver tentato linvio del modulo).
• Come riserva, .is-invalid e .is-valid possono essere usate classi al posto delle pseudo-classi per la convalida lato server. Non richiedono una .was-validated classe genitore.
• A causa dei vincoli nel funzionamento dei CSS, non possiamo (al momento) applicare stili a un <label> che viene prima di un controllo del modulo nel DOM senza laiuto di JavaScript personalizzato.
• Tutti i browser moderni supportano lAPI di convalida dei vincoli, una serie di metodi JavaScript per la convalida dei controlli del modulo.
• I messaggi di feedback possono utilizzare le impostazioni predefinite del browser (diverse per ogni browser e non stilabili tramite CSS) o i nostri stili di feedback personalizzati con HTML e CSS aggiuntivi.
• Puoi fornire messaggi di validità personalizzati con setCustomValidity in JavaScript.

Con questo in mente, considera le seguenti demo per i nostri stili di convalida dei moduli personalizzati, classi lato server opzionali e impostazioni predefinite del browser.

Stili personalizzati

Per i messaggi di convalida del modulo Bootstrap personalizzati, dovrai aggiungere lattributo booleano novalidate al tuo <form>. Ciò disabilita i suggerimenti di feedback predefiniti del browser, ma fornisce comunque laccesso alle API di convalida dei moduli in JavaScript. Prova a inviare il modulo sottostante; il nostro JavaScript intercetterà il pulsante di invio e ti inoltrerà il feedback.

Quando tenti di inviare, vedrai :invalid e :valid stili applicati ai controlli del modulo.

Impostazioni predefinite del browser

Non sei interessato ai messaggi di feedback di convalida personalizzati o alla scrittura di JavaScript per modificare i comportamenti dei moduli? Tutto bene, puoi usare le impostazioni predefinite del browser. Prova a inviare il modulo sottostante. A seconda del browser e del sistema operativo, vedrai uno stile di feedback leggermente diverso.

Sebbene questi stili di feedback non possano essere abbinati a CSS, puoi comunque personalizzare il testo del feedback tramite JavaScript.

Lato server

Consigliamo di utilizzare la convalida lato client, ma nel caso in cui richieda il lato server, puoi indicare campi modulo non validi e validi con .is-invalid e .is-valid. Tieni presente che .invalid-feedback è supportato anche con queste classi.

Elementi supportati

I nostri moduli di esempio mostrano i <input> testuali nativi sopra, ma sono disponibili stili di convalida dei moduli anche per i nostri controlli modulo personalizzati.

Tooltips

Se il layout del modulo lo consente, puoi scambiare il .{valid|invalid}-feedback classi per .{valid|invalid}-tooltip per visualizzare il feedback di convalida in un suggerimento con stile. Assicurati di avere un genitore con position: relative per il posizionamento della descrizione comando. Nellesempio seguente, le nostre classi di colonne lo hanno già, ma il tuo progetto potrebbe richiedere una configurazione alternativa.

Moduli personalizzati

Per una personalizzazione ancora maggiore e incrociata coerenza del browser, utilizza i nostri elementi del modulo completamente personalizzati per sostituire le impostazioni predefinite del browser. Sono costruiti sulla base di markup semantico e accessibile, quindi sono solidi sostituti per qualsiasi controllo di modulo predefinito.

Caselle di controllo e radio

Ogni casella di controllo e radio è racchiusa in un <div> con un fratello <span> per creare il nostro controllo personalizzato e un <label> per il testo di accompagnamento. Strutturalmente, questo è lo stesso approccio del nostro .form-check.

Usiamo il selettore di pari livello (~) per tutti i nostri <input> stati, come :checked, per definire correttamente lo stile del nostro indicatore del modulo personalizzato. Se combinato con la classe .custom-control-label, possiamo anche definire lo stile del testo per ogni elemento in base allo stato di <input>.

Nascondiamo il valore predefinito <input> con opacity e utilizziamo .custom-control-label per creare un nuovo indicatore di modulo personalizzato al suo posto con ::before e ::after. Purtroppo non possiamo crearne uno personalizzato solo dal <input> perché content CSS non funziona su quellelemento.

Negli stati selezionati, usiamo icone SVG incorporate in base64 da Open Iconic. Questo ci fornisce il miglior controllo per lo stile e il posizionamento su browser e dispositivi.

Caselle di controllo

Caselle di controllo personalizzate può anche utilizzare la pseudo classe :indeterminate se impostata manualmente tramite JavaScript (non è disponibile un attributo HTML per specificarla).

Se utilizzi jQuery, dovrebbe essere sufficiente qualcosa di simile:

Radio

Inline

Disattivata

Anche le caselle di controllo e le radio personalizzate possono essere disabilitate. Aggiungi lattributo booleano disabled a <input> e lindicatore personalizzato e la descrizione delletichetta avranno uno stile automatico.

Seleziona menu

Personalizza <select> i menu richiedono solo una classe personalizzata, .custom-select per attivare gli stili personalizzati.

Puoi anche scegliere tra selezioni personalizzate piccole e grandi per corrisponde ai nostri input di testo di dimensioni simili.

È supportato anche lattributo multiple:

Come lattributo size:

Browser di file

Linput di file è il più complicato del gruppo e richiede JavaScript aggiuntivo se desideri collegarli con Scegli file funzionale … e testo del nome file selezionato.

Nascondiamo il file predefinito <input> tramite e applica invece uno stile a <label>. Il pulsante viene generato e posizionato con ::after. Infine, dichiariamo width e height su <input> per la corretta spaziatura dei contenuti circostanti .

Tradurre o personalizzare le stringhe

La pseudo-classe :lang() viene utilizzata per consentire la traduzione del testo “Browse” in altri lingue. Sostituisci o aggiungi voci alla variabile Sass $custom-file-text con il tag della lingua pertinente e le stringhe localizzate. Le stringhe inglesi possono essere personalizzate allo stesso modo.Ad esempio, ecco come si potrebbe aggiungere una traduzione spagnola (il codice della lingua spagnola è es):

Ecco lang(es) in azione sullinput del file personalizzato per una traduzione spagnola:

Dovrai impostare correttamente la lingua del tuo documento (o della sua sottostruttura) affinché venga visualizzato il testo corretto. Questa operazione può essere eseguita utilizzando lattributo lang sullelemento <html> o lintestazione HTTP Content-Language , tra gli altri metodi.