Moduli

Esempi e linee guida di utilizzo per gli stili di controllo dei moduli, le opzioni di layout e i componenti personalizzati per la creazione di un’ampia varietà di moduli.

Panoramica

I controlli del modulo di Bootstrap si espandono sui nostri stili di modulo riavviati con le classi. Utilizzare queste classi per scegliere i loro display personalizzati per un rendering più coerente tra browser e dispositivi.

Assicurarsi di utilizzare un attributotype appropriato su tutti gli input (ad es.,, email per l’indirizzo e-mail o number per informazioni numeriche) per sfruttare i controlli di input più recenti come la verifica della posta elettronica, la selezione del numero e altro ancora.

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

controlli per Formulario

assicuratevi di esplorare i nostri moduli personalizzati per ulteriori style <select>.

Per i file di input, swap .form-control per .form-control-file.,

Dimensionamento

Imposta altezze usando classi come .form-control-lge .form-control-sm.

Readonly

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

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Readonly testo normale

Se si desidera avere <input readonly> elementi di un form in stile come testo normale, utilizzare il .form-control-plaintext classe per rimuovere il modulo predefinito campo di stile e di preservare la corretta margin e padding.

Ingressi Range

Imposta gli ingressi range scorrevoli orizzontalmente usando .form-control-range.,

Caselle di controllo e radio

Le caselle di controllo e le radio predefinite vengono migliorate con l’aiuto 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 sono per la selezione di una o più opzioni in un elenco, mentre le radio sono per la selezione di un’opzione da molti.

Sono supportate caselle di controllo e radio disabilitate. L’attributodisabled applicherà un colore più chiaro per indicare lo stato dell’input.,

Le caselle di controllo e l’uso delle radio sono create per supportare la convalida dei moduli basata su HTML e fornire etichette concise e accessibili. Come tale, i nostri<input>s e<label>s sono elementi fratelli in contrapposizione a un<input> all’interno di un<label>. Questo è leggermente più dettagliato in quanto è necessario specificare id e for attributi per mettere in relazione <input> e <label>.,

Default (stacked)

Per impostazione predefinita, qualsiasi numero di caselle di controllo e radio che sono fratelli immediati saranno impilati verticalmente e opportunamente distanziati con.form-check.

Linea

il Gruppo di checkbox o radio sulla stessa riga orizzontale aggiungendo .form-check-inline per qualsiasi .form-check.,

Senza etichette

Aggiungi .position-static per ingressi all’interno di .form-check che non hanno alcuna etichetta di testo. Ricordarsi di fornire ancora una qualche forma di etichetta per le tecnologie assistive (ad esempio, utilizzando aria-label).,

Layout

Poiché Bootstrap applicadisplay: block e width: 100% a quasi tutti i nostri controlli di modulo, i moduli si impileranno per impostazione predefinita verticalmente. È 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 messaggistica di convalida del modulo., Per impostazione predefinita applica solomargin-bottom, ma raccoglie stili aggiuntivi in.form-inline se necessario. Usalo con <fieldset>s, <div>s, o quasi qualsiasi altro elemento.

Form grid

Forme più complesse possono essere costruite usando le nostre classi grid. Utilizzarli per i layout dei moduli che richiedono più colonne, larghezze variabili e opzioni di allineamento aggiuntive.,

Form row

Puoi anche scambiare.rowper.form-row, una variante della nostra riga griglia standard che sostituisce le grondaie di colonna predefinite per layout più stretti e compatti.

È anche possibile creare layout più complessi con il sistema a griglia.

Modulo orizzontale

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

A volte, forse è necessario utilizzare le utilità margin o padding per creare l’allineamento perfetto di cui hai bisogno. Ad esempio, abbiamo rimosso il padding-top sulla nostra etichetta ingressi radio impilati per allineare meglio la linea di base del testo.,

Orizzontale, forma, etichetta dimensionamento

ridimensionamento di Colonna

Come mostrato negli esempi precedenti, il nostro sistema di griglia permette di inserire un qualsiasi numero di .colall’interno di un .row o .form-row. Divideranno equamente la larghezza disponibile tra di loro. Puoi anche scegliere un sottoinsieme delle tue colonne per occupare più o meno spazio, mentre il restante .coldivide equamente il resto, con classi di colonne specifiche come .col-7.,

Auto-dimensionamento

L’esempio seguente utilizza un’utilità flexbox per centrare verticalmente il contenuto e modificare .colin .col-auto in modo che le colonne occupino solo lo spazio necessario. In altre parole, la colonna si dimensiona in base al contenuto.

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

E naturalmente sono supportati i controlli dei moduli personalizzati.,

Moduli inline

Utilizzare la classe .form-inline per visualizzare una serie di etichette, controlli modulo e pulsanti su una singola riga orizzontale. I controlli dei moduli all’interno dei moduli in linea variano leggermente dai loro stati predefiniti.

• I controlli sono display: flex, comprimendo qualsiasi spazio bianco HTML e consentendo di fornire il controllo di allineamento con spaziatura e utilità flexbox.
• I controlli e i gruppi di input ricevonowidth: auto per sovrascrivere il Bootstrap predefinitowidth: 100%.,
• I controlli appaiono solo in linea nelle finestre larghe almeno 576px per tenere conto delle finestre strette sui dispositivi mobili.

Potrebbe essere necessario indirizzare manualmente la larghezza e l’allineamento dei singoli controlli del modulo con le 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 screenreader con.sr-only.

Sono supportati anche controlli e selezioni di moduli personalizzati.,

Testo di aiuto

Il testo di aiuto a livello di blocco nei moduli può essere creato utilizzando.form-text(precedentemente noto come.help-block in 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 di aiuto sotto gli input può essere stilizzato con .form-text. Questa classe include display: block e aggiunge un margine superiore per una facile spaziatura dagli input sopra.,

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

Moduli disabilitati

Aggiungi l’attributo booleano disabled su un input per prevenire le interazioni dell’utente e renderlo più chiaro.,

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

Aggiungi l’attributo disabled a un <fieldset> per disabilitare tutti i controlli all’interno.

Convalida

Fornisci un feedback prezioso e fruibile ai tuoi utenti con la convalida del modulo HTML5–disponibile in tutti i nostri browser supportati. Scegli tra il feedback di convalida predefinito del browser o implementa messaggi personalizzati con le nostre classi incorporate e JavaScript iniziale.,

Come funziona

Ecco come funziona la convalida dei moduli con Bootstrap:

• La convalida dei moduli HTML viene applicata tramite le due pseudo-classi CSS, :invalide :valid. Si applica agli elementi<input>,<select> e<textarea>.,
• Gli ambiti di Bootstrap :invalid e :valid stili alla classe padre .was-validated, di solito applicata alla <form>. In caso contrario, qualsiasi campo obbligatorio senza un valore viene visualizzato come non valido al caricamento della pagina. In questo modo, puoi scegliere quando attivarli (in genere dopo il tentativo di invio del modulo).
• Per ripristinare l’aspetto del modulo (ad esempio, nel caso di invio di moduli dinamici utilizzando AJAX), rimuovere la classe .was-validateddal <form> dopo l’invio.,
• Come fallback, le classi.is-invalide.is-valid possono essere utilizzate al posto delle pseudo-classi per la convalida lato server. Non richiedono una classe genitore.was-validated.
• A causa di vincoli nel modo in cui funziona CSS, non possiamo (al momento) applicare stili a un<label> che viene prima di un controllo del modulo nel DOM senza l’aiuto di JavaScript personalizzato.
• Tutti i browser moderni supportano l’API di convalida dei vincoli, una serie di metodi JavaScript per convalidare i controlli dei moduli.,
• I messaggi di feedback possono utilizzare i valori predefiniti del browser (diversi per ciascun browser e non modificabili tramite CSS) o i nostri stili di feedback personalizzati con HTML e CSS aggiuntivi.
• È possibile 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, le classi opzionali lato server e le impostazioni predefinite del browser.,

Stili personalizzati

Per i messaggi di convalida del modulo Bootstrap personalizzato, è necessario aggiungere l’attributo booleanonovalidate al<form>. Ciò disabilita i suggerimenti di feedback predefiniti del browser, ma fornisce comunque l’accesso alle API di convalida del modulo in JavaScript. Prova a inviare il modulo sottostante; il nostro JavaScript intercetterà il pulsante di invio e ti invierà un feedback. Quando si tenta di inviare, vedrai gli stili :invalid e :valid applicati ai controlli del modulo.,

Stili di feedback personalizzati applica colori, bordi, stili di messa a fuoco e icone di sfondo personalizzati per comunicare meglio il feedback. Le icone di sfondo per <select>sono disponibili solo con.custom-selecte non.form-control.

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, è possibile utilizzare 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.,

Mentre questi stili di feedback non possono essere stilizzati con CSS, è comunque possibile personalizzare il testo di feedback tramite JavaScript.

Lato server

Si consiglia di utilizzare la convalida lato client, ma nel caso in cui si richieda la convalida lato server, è possibile indicare campi modulo non validi e validi con .is-invalide .is-valid. Si noti che .invalid-feedback è supportato anche con queste classi.,

Supportato elementi

Convalida stili sono disponibili per i seguenti controlli modulo e componenti:

Tooltip

Se il vostro layout del modulo permette, è possibile scambiare il .{valid|invalid}-feedback classi per .{valid|invalid}-tooltip classi per visualizzare la convalida feedback in stile tooltip. Assicurati di avere un genitore con position: relative su di esso per il posizionamento del suggerimento. Nell’esempio seguente, le nostre classi di colonne lo hanno già, ma il tuo progetto potrebbe richiedere una configurazione alternativa.,

Personalizzazione

Gli stati di convalida possono essere personalizzati tramite Sass con la mappa $form-validation-states. Situato nel nostro file_variables.scss, questa mappa Sass viene eseguita in loop per generare gli stati di convalidavalid/invalid. È inclusa una mappa nidificata per personalizzare il colore e l’icona di ogni stato. Mentre nessun altro stato è supportato dai browser, coloro che utilizzano stili personalizzati possono facilmente aggiungere feedback modulo più complesso.,

Si noti che non è consigliabile personalizzare questi valori senza modificare anche il mixinform-validation-state.

Moduli personalizzati

Per una maggiore personalizzazione e coerenza cross browser, utilizza i nostri elementi del modulo completamente personalizzati per sostituire i valori predefiniti del browser. Sono costruiti in cima al markup semantico e accessibile, quindi sono sostituti solidi per qualsiasi controllo del modulo predefinito.,

Caselle di controllo e radio

Ogni casella di controllo e radio<input> e<label> accoppiamento è avvolto in un<div> per creare il nostro controllo personalizzato. Strutturalmente, questo è lo stesso approccio del nostro default.form-check.

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

Nascondiamo il valore predefinito <input> con opacity e usiamo il .custom-control-label per costruire un nuovo indicatore di modulo personalizzato al suo posto con ::before e ::after. Sfortunatamente non possiamo costruirne uno personalizzato solo da<input> perché CSScontent non funziona su quell’elemento.,

Negli stati selezionati, utilizziamo le icone SVG incorporate base64 da Open Iconic. Questo ci fornisce il miglior controllo per lo styling e il posizionamento tra browser e dispositivi.

Caselle di controllo

Le caselle di controllo personalizzate possono anche utilizzare la pseudo classe :indeterminate quando vengono impostate manualmente tramite JavaScript (non è disponibile alcun attributo HTML per specificarlo).,

Se si sta utilizzando jQuery, qualcosa di simile a questo dovrebbe bastare:

$('.your-checkbox').prop('indeterminate', true)

Radio

Linea

Disabili

Custom checkbox e radio può anche essere disattivato., Aggiungi l’attributo booleanodisabled all’attributo<input> e l’indicatore personalizzato e la descrizione dell’etichetta verranno automaticamente stilizzati.

Interruttori

Un interruttore ha il markup di una casella di controllo personalizzata ma utilizza la classe .custom-switch per eseguire il rendering di un interruttore a levetta. Gli switch supportano anche l’attributodisabled.,

Selezionare menu

Personalizzato <select>menu bisogno solo di una classe personalizzata, .custom-select per attivare gli stili personalizzati. Gli stili personalizzati sono limitati all’aspetto iniziale di <select>e non possono modificare <option>a causa delle limitazioni del browser.

Puoi anche scegliere tra selezioni personalizzate piccole e grandi per abbinare i nostri input di testo di dimensioni simili.,

multiple attributo è supportato anche:

è il size attributo:

Gamma

Creare personalizzato <input type="range"> controlli .custom-range. La traccia (lo sfondo) e il pollice (il valore) sono entrambi in stile per apparire uguali tra i browser. Poiché solo IE e Firefox supportano” riempiendo ” la loro traccia da sinistra o destra del pollice come mezzo per indicare visivamente i progressi, al momento non lo supportiamo.,

<label for="customRange1">Example range</label><input type="range" class="custom-range">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label><input type="range" class="custom-range" min="0" max="5">

By default, range inputs “snap” to integer values., Per modificare questo, è possibile specificare un valorestep. Nell’esempio seguente, raddoppiamo il numero di passaggi utilizzando step="0.5".

<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5">

File browser

L’input del file è il più nodoso del gruppo e richiede JavaScript aggiuntivo se si desidera collegarli con il functional Choose file text e il testo del nome del file selezionato.

Nascondiamo il file predefinito <input>tramite opacitye invece lo stile <label>. Il pulsante viene generato e posizionato con ::after. Infine, dichiariamo un widtheheightsul<input> per una corretta spaziatura per il contenuto circostante.,

Tradurre o personalizzare le stringhe con SCSS

La pseudo-classe:lang() viene utilizzata per consentire la traduzione del testo “Sfoglia” in altre lingue. Sovrascrivi 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., Per esempio, ecco come si potrebbe aggiungere una traduzione in spagnolo (spagnolo lingua di codice es):

$custom-file-text: ( en: "Browse", es: "Elegir");

lang(es) in azione sul file di input per una traduzione in spagnolo:

avrete bisogno di impostare la lingua del documento, o sottostruttura di esso) correttamente in modo che il testo corretto per essere mostrato., Questo può essere fatto usando l’attributolang sull’elemento<html> o l’intestazione HTTPContent-Language, tra gli altri metodi.

Tradurre o personalizzare le stringhe con HTML

Bootstrap fornisce anche un modo per tradurre il testo” Sfoglia ” in HTML con l’attributodata-browse che può essere aggiunto all’etichetta di input personalizzata (esempio in olandese):