in English

Forme

Esempii è linee d'utilizazione per stili di cuntrollu di forma, opzioni di layout è cumpunenti persunalizati per creà una larga varietà di forme.

Panoramica

I cuntrolli di forma di Bootstrap si sviluppanu nantu à i nostri stili di forma riavviata cù classi. Aduprate queste classi per optà per i so schermi persunalizati per un rendering più coherente in i navigatori è i dispositi.

Assicuratevi di utilizà un typeattributu appropritatu in tutti l'inputs (per esempiu, emailper l'indirizzu email o numberper l'infurmazioni numeriche) per prufittà di i cuntrolli di input più recenti cum'è verificazione di email, selezzione di numeri, è più.

Eccu un esempiu rapidu per dimustrà i stili di forma di Bootstrap. Continua a leghje per a documentazione nantu à e classi richieste, u layout di furmulariu, è più.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Cuntrolli di forma

I cuntrolli di forma testuale - cum'è <input>s, <select>s è <textarea>s - sò stilati cù a .form-controlclasse. Includite sò stili per l'aspettu generale, u statu di focu, a dimensione, è più.

Assicuratevi di spiegà e nostre forme persunalizate per ulteriore stile <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Per l'input di file, scambià u .form-controlfor .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Misure

Definite l'altitudine usendu classi cum'è .form-control-lgè .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Solu lettura

Aghjunghjite l' readonlyattributu booleanu nantu à un input per impedisce a mudificazione di u valore di l'input. L'input di sola lettura parenu più ligeri (cum'è l'input disattivati), ma mantenenu u cursore standard.

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

Lettura solu testu chjaru

Se vulete avè <input readonly>elementi in a vostra forma stilata cum'è testu chjaru, aduprate a .form-control-plaintextclassa per sguassà u stilu di campu di forma predeterminatu è priservà u marghjenu currettu è u padding.

<form>
  <div class="form-group 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>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Ingressi di gamma

Impostate l'inputs di intervallu di scorrimentu horizontale cù .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Checkboxes è radiu

I caselle di verificazione predeterminate è i radii sò migliurati cù l'aiutu di .form-check, una sola classa per i dui tipi di input chì migliurà u layout è u cumpurtamentu di i so elementi HTML . I checkboxes sò per selezziunà una o parechje opzioni in una lista, mentre chì i radii sò per selezziunate una opzione da parechje.

I caselle di verificazione disabilitate è i radii sò supportati. L' disabledattributu applicà un culore più chjaru per aiutà à indicà u statu di l'input.

I checkboxes è i buttoni di radiu supportanu a validazione di forma basata in HTML è furnisce etichette concise è accessibili. Comu tali, i nostri <input>s è <label>s sò elementi di fratellu in uppusizione à un <input>in un <label>. Questu hè un pocu più verbose cum'è duvete specificà idè forattributi per rilancià u <input>è <label>.

Default (stacked)

Per automaticamente, ogni numeru di caselle di spunta è radiu chì sò fratelli immediati seranu impilati verticalmente è spaziati appropritamente cù .form-check.

Casella di spunta predeterminata

Casella di cuntrollu disattivata

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Radio predefinita

Seconda radio predeterminata

Radio disattivata

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

In linea

Gruppu caselle di spunta o radiu nantu à a listessa fila horizontale aghjunghjendu .form-check-inlineà qualsiasi .form-check.

3 (disabilitatu)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (disabilitatu)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Senza etichette

Aghjunghjite .position-staticà l'inputs .form-checkchì ùn anu micca testu di l'etichetta. Ricurdatevi di furnisce sempre una forma di nome accessibile per e tecnulugia di assistenza (per esempiu, usendu aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Disposizione

Siccomu Bootstrap s'applica display: blockè width: 100%à quasi tutti i nostri cuntrolli di furmulariu, e forme si stackanu per automaticamente in verticale. E classi supplementari ponu esse aduprate per varià stu layout nantu à una basa per forma.

Forma gruppi

A .form-groupclassa hè u modu più faciule per aghjunghje una struttura à e forme. Fornisce una classa flessibile chì incuraghja un raggruppamentu propiu di etichette, cuntrolli, testu d'aiutu opzionale, è messageria di validazione di forma. Per automaticamente, s'applica solu margin-bottom, ma piglia stili supplementari in .form-inlinequantu necessariu. Aduprate cù <fieldset>s, <div>s, o quasi ogni altru elementu.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Forma griglia

Forme più cumplesse ponu esse custruite cù e nostre classi di griglia. Aduprate questi per schemi di forma chì necessitanu parechje colonne, larghezze variate è opzioni di allineamentu supplementari.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Forma fila

Pudete ancu scambià .rowper .form-row, una variazione di a nostra fila di griglia standard chì annulla i canali predefiniti di a colonna per layout più stretti è più compacti.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

I layout più cumplessi ponu ancu esse creati cù u sistema di griglia.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Forma horizontale

Crea formi horizontale cù a griglia aghjunghjendu a .rowclassa per furmà gruppi è utilizendu e .col-*-*classi per specificà a larghezza di e vostre etichette è cuntrolli. Assicuratevi di aghjunghje ancu .col-form-labelà i vostri <label>s in modu chì sò centrati verticalmente cù i so cuntrolli di forma assuciati.

A volte, forse avete bisognu di utilizà l'utilità di marghjini o di padding per creà l'allineamentu perfettu chì avete bisognu. Per esempiu, avemu sguassatu l' padding-topetichetta nantu à i nostri input di radiu impilati per allineà megliu a linea di basa di testu.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Dimensione di l'etichetta in forma orizontale

Assicuratevi di utilizà .col-form-label-smo .col-form-label-lgà u vostru <label>s o <legend>s per seguità currettamente a dimensione di .form-control-lgè .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Dimensione di a colonna

Cum'è mostratu in l'esempi precedenti, u nostru sistema di griglia vi permette di mette ogni numeru di .cols in un .rowo .form-row. Divideranu a larghezza dispunibule ugualmente trà elli. Pudete ancu sceglie un sottumessu di e vostre colonne per piglià più o menu spaziu, mentre chì u restu .cols ugualmente divide u restu, cù classi di colonna specifiche cum'è .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-dimensionamento

L'esempiu quì sottu usa una utilità flexbox per centru verticalmente u cuntenutu è cambia .colin .col-autocusì chì e vostre colonne occupanu solu u spaziu quantu necessariu. In altre modu, a colonna si mette nantu à a dimensione di u cuntenutu.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Puderete allora remix chì una volta di novu cù classi di colonna specifica di dimensione.

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

E di sicuru i cuntrolli di forma persunalizati sò supportati.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Forme in linea

Aduprate a .form-inlineclassa per vede una seria di etichette, cuntrolli di forma, è buttone nantu à una sola fila horizontale. I cuntrolli di forma in forme in linea varianu ligeramente da i so stati predeterminati.

I cuntrolli sò display: flex, colapsendu ogni spaziu biancu HTML è chì vi permettenu di furnisce u cuntrollu di l' allineamentu cù spazii è utilità flexbox .
I cuntrolli è i gruppi di input ricevenu width: autoper annullà u Bootstrap predeterminatu width: 100%.
I cuntrolli appariscenu solu in linea in i vetri chì sò almenu 576px di larghezza per cuntà e viste strette in i dispositi mobili.

Pudete bisognu di indirizzà manualmente a larghezza è l'allineamentu di i cuntrolli di forma individuale cù utilità di spaziatura (cum'è mostratu quì sottu). Infine, assicuratevi di include sempre un <label>cuntrolu cù ogni forma di cuntrollu, ancu s'ellu avete bisognu di ammuccià da i visitori chì ùn sò micca screenreader cù .sr-only.

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

I cuntrolli di forma persunalizati è e selezzione sò ancu supportati.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

Alternative à l'etichette nascoste

Tecnulugie d'assistenza cum'è i lettori di schermu avarà prublemi cù i vostri formi se ùn include micca una etichetta per ogni input. Per queste forme inline, pudete ammuccià l'etichette cù a .sr-onlyclassa. Ci sò altri metudi alternativi di furnisce una etichetta per i tecnulugii assistivi, cum'è u aria-label, aria-labelledbyo titlel'attributu. Se nimu di questi sò prisenti, i tecnulugii assistivi ponu ricorrere à l'usu di l' placeholderattributu, se presente, ma nutate chì l'usu di placeholdercum'è un sustitutu per altri metudi di etichettatura ùn hè micca cunsigliatu.

Testu d'aiutu

U testu d'aiutu à u livellu di bloccu in forme pò esse creatu usendu .form-text(cunnisciutu prima cum'è .help-blockin v3). U testu d'aiutu in linea pò esse implementatu in modu flessibile utilizendu qualsiasi elementu HTML in linea è classi di utilità cum'è .text-muted.

Associà u testu d'aiutu cù cuntrolli di forma

U testu di l'aiutu deve esse assuciatu esplicitamente cù u cuntrollu di forma chì hè in relazione cù l'usu di l' aria-describedbyattributu. Questu hà da assicurà chì e tecnulugii d'assistenza, cum'è i lettori di schermu, annunceranu stu testu d'aiutu quandu l'utilizatore si cuncentra o entra in u cuntrollu.

U testu di l'aiutu sottu inputs pò esse stilatu cù .form-text. Questa classa include display: blockè aghjunghje un pocu di margine superiore per un spaziu faciule da l'input sopra.

Codice A vostra password deve esse 8-20 caratteri, cuntene lettere è numeri, è ùn deve micca cuntene spazii, caratteri speciali o emoji.

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

U testu in linea pò utilizà qualsiasi elementu HTML tipicu in linea (sia un <small>, <span>, o qualcosa d'altru) cù nunda più cà una classa di utilità.

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Forme disabilitate

Aghjunghjite l' disabledattributu booleanu nantu à un input per prevene l'interazzione di l'utilizatori è fà chì pare più liggeru.

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

Aghjunghjite l' disabledattributu à a <fieldset>per disattivà tutti i cuntrolli.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Caveat cù ancore

I navigatori trattanu tutti i cuntrolli di forma nativa ( <input>, <select>, è <button>elementi) in un <fieldset disabled>cum'è disabilitatu, impediscendu l'interazzione di u teclatu è u mouse nantu à elli.

Tuttavia, se u vostru furmulariu include ancu elementi persunalizati cum'è un buttone cum'è <a ... class="btn btn-*">, questi saranu solu un stile di pointer-events: none. Comu nutatu in a rùbbrica nantu à u statu disattivatu per i buttoni (è in particulare in a sub-sezzione per l'elementi di l'ancora), sta pruprietà CSS ùn hè micca standardizzata è ùn hè micca cumplettamente supportata in Internet Explorer 10. I cuntrolli basati in l'ancora seranu ancu sempre. focusable è operabile cù u teclatu. Duvete mudificà manualmente questi cuntrolli aghjustendu tabindex="-1"per impediscenu di riceve u focu è aria-disabled="disabled"di signalà u so statu à e tecnulugia assistive.

Compatibilità cross-browser

Mentre chì Bootstrap applicà sti stili in tutti i navigatori, Internet Explorer 11 è sottu ùn sustene micca cumplettamente l' disabledattributu in un <fieldset>. Aduprate JavaScript persunalizatu per disattivà u fieldset in questi navigatori.

Validazione

Fornite feedback preziosi è azzione à i vostri utilizatori cù validazione di forma HTML5 - dispunibule in tutti i nostri navigatori supportati . Sceglite da u feedback di validazione predeterminatu di u navigatore, o implementate messagi persunalizati cù e nostre classi integrate è JavaScript starter.

Sapemu chì attualmente i stili di validazione persunalizati per u cliente è i tooltips ùn sò micca accessibili, postu chì ùn sò micca esposti à tecnulugii assistivi. Mentre travagliemu nantu à una suluzione, ricumandemu di utilizà l'opzione di u servitore o u metudu di validazione di u navigatore predeterminatu.

Cumu funziona

Eccu cumu funziona a validazione di forma cù Bootstrap:

A validazione di forma HTML hè applicata via e duie pseudo-classi di CSS, :invalidè :valid. Hè applicà à <input>, <select>, è <textarea>elementi.
Bootstrap scopre i stili :invalidè :validà a classe parent .was-validated, generalmente appiicata à u <form>. Altrimenti, ogni campu obligatoriu senza valore si mostra cum'è invalidu nantu à a carica di a pagina. In questu modu, pudete sceglie quandu l'attivà (tipicamenti dopu a prova di sottumissione di forma).
Per resettate l'apparizione di u furmulariu (per esempiu, in u casu di sottumissioni di forma dinamica cù AJAX), sguassate a .was-validatedclassa da u <form>novu dopu a sottumissione.
Comu fallback, .is-invalidè e .is-validclassi ponu esse aduprate invece di e pseudo-classi per a validazione di u servitore . Ùn necessitanu micca una .was-validatedclasse di genitori.
A causa di limitazioni in u funziunamentu di u CSS, ùn pudemu micca (attualmente) applicà stili à un <label>chì vene prima di un cuntrollu di forma in u DOM senza l'aiutu di JavaScript persunalizatu.
Tutti i navigatori muderni supportanu l' API di validazione di limitazione , una seria di metudi JavaScript per cunvalidà i cuntrolli di forma.
I missaghji di feedback ponu utilizà i predefiniti di u navigatore (differenti per ogni navigatore, è unstilable via CSS) o i nostri stili di feedback persunalizati cù HTML è CSS supplementari.
Pudete furnisce missaghji di validità persunalizati setCustomValidityin JavaScript.

In questu in mente, cunzidira i seguenti demo per i nostri stili di validazione di forma persunalizati, classi opzionali di u servitore, è predefiniti di u navigatore.

Stili persunalizati

Per i missaghji di validazione di forma Bootstrap persunalizati, avete bisognu di aghjunghje l' novalidateattributu booleanu à u vostru <form>. Questu disattiva i tooltips di feedback predeterminati di u navigatore, ma ancu furnisce l'accessu à l'API di validazione di forma in JavaScript. Pruvate di mandà u furmulariu sottu; u nostru JavaScript intercepterà u buttone di invià è vi trasmetterà feedback. Quandu pruvate di mandà, vi vede i stili :invalidè :validapplicati à i vostri cuntrolli di forma.

Stili di feedback persunalizati applicanu culori persunalizati, cunfini, stili di focus è icone di fondo per cumunicà megliu i feedback. L'icone di fondo per <select>s sò dispunibuli solu cù .custom-select, è micca .form-control.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Predefiniti di u navigatore

Ùn avete micca interessatu à i missaghji di feedback di validazione persunalizati o scrive JavaScript per cambià i cumpurtamenti di forma? Tuttu bè, pudete aduprà i predefiniti di u navigatore. Pruvate invià u furmulariu sottu. Sicondu u vostru navigatore è u sistema operativu, vi vede un stile di feedback un pocu sfarente.

Mentre chì sti stili di feedback ùn ponu micca esse stilati cù CSS, pudete sempre persunalizà u testu di feedback attraversu JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Latu servitore

Hè ricumandemu di utilizà a validazione di u cliente, ma in casu chì avete bisognu di validazione di u servitore, pudete indicà campi di forma invalidi è validi cù .is-invalidè .is-valid. Nota chì .invalid-feedbackhè ancu supportatu cù queste classi.

Per i campi invalidi, assicuratevi chì u missaghju d'errore / feedback invalidu hè assuciatu cù u campu di furmulariu pertinente cù aria-describedby. Questu attributu permette à più di unu idper esse riferitu, in casu chì u campu digià punta à testu di forma supplementu.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Elementi supportati

Stili di validazione sò dispunibuli per i seguenti cuntrolli di forma è cumpunenti:

<input>s è <textarea>s cun.form-control
<select>s cun .form-controlo.custom-select
.form-checks
.custom-checkboxs è .custom-radios
.custom-file

Area di testu

Per piacè inserite un missaghju in l'area di testu.

Verificate sta casella di cuntrollu persunalizata

Esempiu di testu di feedback invalidu

Cambia sta radio persunalizata

O alternate questa altra radio persunalizata

Più esempiu testu di feedback invalidu

Esempiu di feedback di selezzione persunalizata invalidu

Sceglie u schedariu ...

Esempiu di feedback di u schedariu persunalizatu invalidu

Esempiu di feedback di u gruppu di input invalidu

Opzioni

Esempiu di feedback di u gruppu di input invalidu

Sceglie u schedariu ...

Esempiu di feedback di u gruppu di input invalidu

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Tooltips

Se u vostru layout di furmulariu permette, pudete scambià e .{valid|invalid}-feedbackclassi per .{valid|invalid}-tooltipe classi per visualizà feedback di validazione in un tooltip stilatu. Assicuratevi di avè un genitore cun position: relativeellu per u posizionamentu di u tooltip. In l'esempiu sottu, i nostri classi di colonna anu digià questu, ma u vostru prughjettu pò esse bisognu di una configurazione alternativa.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Customizing

I stati di validazione ponu esse persunalizati via Sass cù a $form-validation-statesmappa. Situatu in u nostru _variables.scssschedariu, sta mappa di Sass hè in loop per generà i stati predefiniti valid/ invalidvalidazione. Includite hè una mappa nidificata per persunalizà u culore è l'icona di ogni statu. Mentre chì nisun altru statu hè supportatu da i navigatori, quelli chì utilizanu stili persunalizati ponu facilmente aghjunghje feedback di forma più cumplessa.

Per piacè nutate chì ùn ricumandemu micca di persunalizà questi valori senza ancu mudificà u form-validation-statemixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Validazione di u gruppu di input

Per detectà quale elementi necessitanu anguli arrotondati in un gruppu di input cù validazione, un gruppu di input richiede una .has-validationclassa supplementaria.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Per piacè sceglite un nome d'utilizatore.

Forme persunalizate

Per ancu più persunalizazione è cunsistenza di u navigatore, utilizate i nostri elementi di forma cumplettamente persunalizati per rimpiazzà i predefiniti di u navigatore. Sò custruiti nantu à u marcatu semanticu è accessibile, cusì sò rimpiazzamenti solidi per qualsiasi cuntrollu di forma predeterminata.

Checkboxes è radiu

Ogni casella di spunta è radiu <input>è <label>accoppiamentu sò impannillati in un <div>per creà u nostru cuntrollu persunalizatu. Strutturalmente, questu hè u stessu approcciu cum'è u nostru predeterminatu .form-check.

Utilizemu u selettore di fratellu ( ~) per tutti i nostri <input>stati - cum'è :checked- per stilà bè u nostru indicatore di forma persunalizata. Quandu si combina cù a .custom-control-labelclassa, pudemu ancu stilà u testu per ogni articulu basatu annantu à u <input>statu.

Ocultemu u predefinitu <input>è opacityutilizemu .custom-control-labelper custruisce un novu indicatore di forma persunalizata in u so locu cù ::beforeè ::after. Sfortunatamente, ùn pudemu micca custruisce un persunalizatu da solu <input>perchè CSS contentùn funziona micca in quellu elementu.

In i stati verificati, usemu icone SVG incrustate base64 da Open Iconic . Questu ci furnisce u megliu cuntrollu per u stilu è u posizionamentu in i navigatori è i dispositi.

Checkboxes

Verificate sta casella di cuntrollu persunalizata

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

I checkboxes persunalizati ponu ancu aduprà a :indeterminatepseudo classa quandu si stallanu manualmente via JavaScript (ùn ci hè micca un attributu HTML dispunibule per specificà lu).

Verificate sta casella di cuntrollu persunalizata

Sè vo aduprate jQuery, qualcosa cum'è questu deve esse abbastanza:

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

Radios

Cambia sta radio persunalizata

O alternate questa altra radio persunalizata

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

In linea

Cambia sta radio persunalizata

O alternate questa altra radio persunalizata

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Disabilitatu

I caselle di cuntrollu persunalizati è i radii ponu ancu esse disattivati. Aghjunghjite l' disabledattributu booleanu <input>è l'indicatore persunalizatu è a descrizzione di l'etichetta saranu automaticamente stilati.

Verificate sta casella di cuntrollu persunalizata

Cambia sta radio persunalizata

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Cambia

Un switch hà u marcatu di una casella di cuntrollu persunalizata, ma usa a .custom-switchclassa per rende un switch toggle. I switches sustenenu ancu l' disabledattributu.

Cambia stu elementu di cambiamentu

Elementu di cambiamentu disattivatu

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

I menu persunalizati <select>necessitanu solu una classa persunalizata, .custom-selectper attivà i stili persunalizati. I stili persunalizati sò limitati à l' <select>apparenza iniziale è ùn ponu micca mudificà i <option>s per via di limitazioni di u navigatore.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Pudete ancu sceglie trà picculi è grandi selezioni persunalizati per currisponde à i nostri inputs di testu di dimensioni simili.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

L' multipleattributu hè ancu supportatu:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Cum'è l' sizeattributu:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Gamma

Crea <input type="range">cuntrolli persunalizati cù .custom-range. A traccia (u sfondate) è u pollice (u valore) sò tramindui stilati per apparisce u listessu in i navigatori. Siccomu solu IE è Firefox supportanu "rimplendu" a so traccia da a manca o à a diritta di u pollice cum'è un mezzu per indicà visualmente u prugressu, ùn l'avete micca supportatu.

Esempiu gamma

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

L'input di intervalli anu valori impliciti per mine max- 0è 100, rispettivamente. Pudete specificà novi valori per quelli chì utilizanu l' attributi minè .max

Esempiu gamma

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

Per difettu, u range inputs "snap" à i valori interi. Per cambià questu, pudete specificà un stepvalore. In l'esempiu sottu, duppiemu u numeru di passi usendu step="0.5".

Esempiu gamma

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

navigatore di schedari

U plugin cunsigliatu per animà l'input di file persunalizatu: bs-custom-file-input , hè ciò chì usemu attualmente quì in i nostri documenti.

L'input di u schedariu hè u più gnarly di u gruppu è richiede JavaScript supplementu se vulete cunnessu cù u funziunale Sceglie u schedariu ... è u testu di u nome di u schedariu sceltu.

Sceglie u schedariu

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Ocultemu u schedariu predeterminatu <input>via opacityè invece stile u <label>. U buttone hè generatu è posizionatu cù ::after. Infine, dichjaremu a widthè heightnantu à u <input>per u spaziu propiu per u cuntenutu circundante.

Traduce o persunalizà e stringhe cù SCSS

A :lang()pseudo-classe hè aduprata per permette a traduzzione di u testu "Browse" in altre lingue. Override o aghjunghje entrate à a $custom-file-textvariabile Sass cù l'etichetta di lingua pertinente è e stringhe localizzate. I cordi inglesi ponu esse persunalizati in u listessu modu. Per esempiu, eccu cumu si pò aghjunghje una traduzzione spagnola (u codice di lingua spagnola hè es):

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

Eccu lang(es)in azione nantu à l'input di file persunalizati per una traduzzione spagnola:

Selezziunà l'Archive

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Averete bisognu di stabilisce a lingua di u vostru documentu (o di l'arburu) currettamente per chì u testu currettu sia mostratu. Questu pò esse fattu utilizendu l' langattributu nantu à l' <html>elementu o l' Content-Languageintestazione HTTP , frà altri metudi.

Traducendu o persunalizà e stringhe cù HTML

Bootstrap furnisce ancu un modu per traduce u testu "Browse" in HTML cù l' data-browseattributu chì pò esse aghjuntu à l'etiqueta di input persunalizata (esempiu in Olandese):

Voeg je document toe

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>

Forme

Panoramica

Cuntrolli di forma

Misure

Solu lettura

Lettura solu testu chjaru

Ingressi di gamma

Checkboxes è radiu

Default (stacked)

In linea

Senza etichette

Disposizione

Forma gruppi

Forma griglia

Forma fila

Forma horizontale

Dimensione di l'etichetta in forma orizontale

Dimensione di a colonna

Auto-dimensionamento

Forme in linea

Alternative à l'etichette nascoste

Testu d'aiutu

Associà u testu d'aiutu cù cuntrolli di forma

Forme disabilitate

Caveat cù ancore

Compatibilità cross-browser

Validazione

Cumu funziona

Stili persunalizati

Predefiniti di u navigatore

Latu servitore

Elementi supportati

Tooltips

Customizing

Validazione di u gruppu di input

Forme persunalizate

Checkboxes è radiu

Checkboxes

Radios

In linea

Disabilitatu

Cambia

Selezziunà menu

Gamma

navigatore di schedari

Traduce o persunalizà e stringhe cù SCSS

Traducendu o persunalizà e stringhe cù HTML