Source

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ù.

Ùn sparteremu mai u vostru email cù qualcunu altru. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <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" placeholder="Password">
  </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" placeholder="Password">
    </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, ma per furnisce un not-allowedcursore nantu à u passaghju di u genitore <label>, avete bisognu di aghjunghje l' disabledattributu à u .form-check-input. L'attributu disattivatu applicà un culore più chjaru per aiutà à indicà u statu di l'input.

I caselle di verificazione è l'usu di radiu sò custruiti per sustene 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.

<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>
<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.

<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>
<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 etichetta 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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 predeterminati 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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </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.

Radios
Checkbox 
<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" placeholder="Email">
    </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" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 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>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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 culonne 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.

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à.

Deve esse 8-20 caratteri longu. 
<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>
    <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-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Caveat cù ancore

Per automaticamente, i navigatori trattanu tutti i cuntrolli di forma nativa ( <input>, <select>è <button>elementi) in un <fieldset disabled>cum'è disabilitati, impediscendu l'interazzione di u teclatu è di u mouse nantu à elli. In ogni casu, se a vostra forma include ancu <a ... class="btn btn-*">elementi, questi saranu solu un stile di pointer-events: none. Cum'è nutatu in a sezione nantu à u statu disattivatu per i buttoni (è in particulare in a sub-sezione per l'elementi di l'ancora), sta pruprietà CSS ùn hè ancu standardizzata è ùn hè micca cumplettamente supportata in Internet Explorer 10, è ùn impedisce micca l'utilizatori di u teclatu. capaci di fucalizza o attivà sti ligami. Allora per esse sicuru, utilizate JavaScript persunalizatu per disattivà tali ligami.

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.

Attualmente ricumandemu d'utilizà stili di validazione persunalizati, postu chì i missaghji di validazione predeterminati di u navigatore nativu ùn sò micca sempre esposti à tecnulugii d'assistenza in tutti i navigatori (in particulare, Chrome in desktop è mobile).

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.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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 latu di u cliente, ma in casu chì avete bisognu di u latu di u servitore, pudete indicà campi di forma invalidi è validi cù .is-invalidè .is-valid. Nota chì .invalid-feedbackhè ancu supportatu cù queste classi.

Sembra bè!
Sembra bè!
@
Per piacè sceglite un nome d'utilizatore.
Per piacè furnite una cità valida.
Per piacè furnite un statu validu.
Per piacè furnite un zip validu.
Avete bisognu d'accordu prima di mandà. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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 is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        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>

Elementi supportati

I nostri formi di esempiu mostranu i testi nativi <input>sopra, ma i stili di validazione di forma sò dispunibuli ancu per i nostri cuntrolli di forma persunalizati.

Esempiu di testu di feedback invalidu
Più esempiu testu di feedback invalidu
Esempiu di feedback di selezzione persunalizata invalidu
Esempiu di feedback di u schedariu persunalizatu invalidu 
<form class="was-validated">
  <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="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</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">
    <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>
</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.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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 checkbox è radiu hè impannillatu in un <div>cun un fratellu <span>per creà u nostru cuntrollu persunalizatu è un <label>per u testu accumpagnatu. 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>è opacity​​utilizemu .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

<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).

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

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

Radios

<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

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" 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="customRadioInline1" 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.

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

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

Selezziunà menu

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.

<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

<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".

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

navigatore di schedari

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.

<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 corde

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:

<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.