Formak

Inprimakien kontrol-estiloen, diseinu-aukeren eta osagai pertsonalizatuen adibideak eta erabilera-gidalerroak inprimaki ugari sortzeko.

Ikuspegi orokorra

Bootstrap-en inprimaki-kontrolak gure Berrabiarazitako inprimaki-estiloak zabaltzen ditu klaseekin. Erabili klase hauek beren pantaila pertsonalizatuak aukeratzeko, arakatzaile eta gailu guztietan errendatze koherenteagoa izateko.

Ziurtatu typesarrera guztietan atributu egoki bat erabiltzen duzula (adibidez, emailhelbide elektronikorako edo numberinformazio numerikorako) sarrera-kontrol berriagoak aprobetxatzeko, hala nola posta elektronikoaren egiaztapena, zenbakia aukeratzea eta abar.

Hona hemen adibide azkar bat Bootstrap-en inprimaki-estiloak erakusteko. Jarraitu irakurtzen beharrezko klaseei, inprimakien diseinuari eta abarrei buruzko dokumentazioa.

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

Inprimakien kontrolak

Testu-inprimakiaren kontrolak ( <input>s, <select>s eta s bezalakoak) klasearekin <textarea>batera moldatzen dira . .form-controlItxura orokorraren, fokuaren egoera, tamainaren eta abarrentzako estiloak sartzen dira.

Ziurtatu gure forma pertsonalizatuak arakatuz estilo gehiago lortzeko <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>

Fitxategien sarrerak .form-controlegiteko , aldatu .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>

Tamaina

Ezarri altuerak .form-control-lgeta bezalako klaseak erabiliz .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>

Irakurtzeko soilik

Gehitu readonlyatributu boolearra sarrera batean sarreraren balioa aldatzeko. Irakurtzeko soilik dauden sarrerak arinagoak agertzen dira (desgaitutako sarrerak bezala), baina kurtsore estandarra mantentzen dute.

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

Testu arrunta irakurtzeko soilik

<input readonly>Zure inprimakiko elementuak testu arrunt gisa diseinatuta eduki nahi badituzu , erabili .form-control-plaintextklasea inprimaki-eremuen estilo lehenetsia kentzeko eta marjina eta betegarri egokiak gordetzeko.

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

Gama Sarrerak

Ezarri horizontalki mugi daitezkeen barrutiaren sarrerak erabiliz .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>

Koadroak eta irratiak

Lehenetsitako kontrol-laukiak eta irratiak hobetzen dira , haien HTML elementuen diseinua eta portaera hobetzen dituen bi sarrera motentzako klase bakarraren.form-check laguntzarekin . Kontrol-laukiak zerrenda batean aukera bat edo batzuk hautatzeko dira, eta irratiak, berriz, askotariko aukera bat hautatzeko.

Desgaitutako kontrol-laukiak eta irratiak onartzen dira, baina not-allowedgurasoaren gainean pasatzean kurtsorea emateko, atributua <label>gehitu beharko duzu . Desgaitutako atributuak kolore argiagoa aplikatuko du sarreraren egoera adierazten laguntzeko.disabled.form-check-input

Markagailuak eta irratiak erabiltzea HTMLn oinarritutako inprimakiak baliozkotzeko eta etiketa zehatzak eta eskuragarriak eskaintzeko eraiki dira. Horrela, gure <input>s eta <label>s anai-arreba-elementuak dira, baten <input>barruan ez bezala <label>. idHau apur bat zehatzagoa da, eta eta foratributuak zehaztu behar dituzulako <input>eta <label>.

Lehenetsia (pilatuta)

Lehenespenez, berehalako anai-arreba diren edozein kontrol-lauki eta irrati-kopuru bertikalki pilatuko dira eta behar bezala tartekatuko dira .form-check.

Kontrol-lauki lehenetsia

Desgaitutako kontrol-laukia

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

Irrati lehenetsia

Bigarren irrati lehenetsia

Irrati ezindua

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

Sarean

Taldekatu kontrol-laukiak edo irratiak errenkada horizontal berean .form-check-inlineedozeinetan gehituz .form-check.

3 (ezgaituta)

<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 (ezgaituta)

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

Etiketarik gabe

Gehitu etiketa-testurik ez duten .position-staticsarrerei . .form-checkGogoratu oraindik laguntza-teknologiei etiketa bat ematen diezula (adibidez, 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>

Diseinua

Bootstrap aplikatzen denez display: blocketa width: 100%gure inprimakien kontrol ia guztietan, inprimakiak berez bertikalean pilatuko dira. Klase gehigarriak erabil daitezke diseinu hau inprimakiaren arabera aldatzeko.

Taldeak osatu

.form-groupKlasea inprimakiei egitura batzuk gehitzeko modurik errazena da . Etiketak, kontrolak, aukerako laguntza-testua eta inprimakiak baliozkotzeko mezuak egoki taldekatzea sustatzen duen klase malgua eskaintzen du. Lehenespenez, soilik aplikatzen da margin-bottom, baina estilo osagarriak jasotzen ditu .form-inlinebehar den moduan. Erabili <fieldset>s, <div>s edo ia beste edozein elementurekin.

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

Inprimakia sareta

Gure sareko klaseak erabiliz forma konplexuagoak eraiki daitezke. Erabili hauek zutabe anitz, zabalera anitzak eta lerrokatze aukera osagarriak behar dituzten inprimaki-diseinuetarako.

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

Era berean , alda dezakezu, gure sareta errenkada estandarraren aldakuntza, zutabeen erreten .rowlehenetsiak .form-rowgainidazten dituena diseinu estuago eta trinkoagoetarako.

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

Sare sistemarekin diseinu konplexuagoak ere sor daitezke.

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

Sortu inprimaki horizontalak saretarekin .rowklasea gehituz taldeak osatzeko eta .col-*-*klaseak erabiliz zure etiketen eta kontrolen zabalera zehazteko. Ziurtatu .col-form-labelzure <label>s-etara ere gehitzen duzula, inprimaki-kontrolekin bertikalki zentratuta egon daitezen.

Batzuetan, beharbada marjinak edo betegarrizko utilitateak erabili beharko dituzu behar duzun lerrokadura perfektu hori sortzeko. Adibidez, padding-topgure irrati-sarrerak pilatutako etiketa kendu dugu testuaren oinarri-lerroa hobeto lerrokatzeko.

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

Inprimaki horizontaleko etiketen tamaina

Ziurtatu .col-form-label-smedo .col-form-label-lgzure <label>s edo <legend>s erabiltzen duzula .form-control-lgeta .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>

Zutabeen tamaina

Aurreko adibideetan erakusten den moduan, gure sareta-sistemak edozein .cols-kopurua jartzeko aukera ematen du a .rowedo .form-row. Eskuragarri dagoen zabalera berdin banatuko dute haien artean. Zure zutabeen azpimultzo bat ere hauta dezakezu leku gehiago edo gutxiago okupatzeko, gainerako .cols-ek gainerakoak berdin banatzen dituzten bitartean, zutabe-klase espezifikoekin .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>

Tamaina automatikoa

Beheko adibideak flexbox erabilgarritasun bat erabiltzen du edukiak eta aldaketak bertikalki zentratzeko, zutabeek behar adina leku bakarrik har .coldezaten . .col-autoBeste modu batean esanda, zutabeak bere burua hartzen du edukiaren arabera.

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

Ondoren, berriro nahastu dezakezu tamainari dagokion zutabe klaseekin.

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

Eta, jakina, inprimaki-kontrol pertsonalizatuak onartzen dira.

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

Lineako inprimakiak

Erabili .form-inlineklasea etiketa, inprimaki-kontrolak eta botoiak lerro horizontal bakarrean bistaratzeko. Lineako inprimakien barruko inprimakien kontrolak egoera lehenetsietatik apur bat aldatzen dira.

Kontrolak hauek dira display: flex, HTML edozein zuriune tolestuz eta lerrokadura kontrola hornitzeko tartea eta flexbox utilitateekin.
Kontrolak eta sarrera taldeek width: autoBootstrap lehenetsia gainidazteko jasotzen dute width: 100%.
Kontrolak lerroan agertzen dira gutxienez 576 px-ko zabalera duten bistaratzeetan soilik gailu mugikorren ikuspegi estuak kontuan izateko.

Baliteke eskuz zuzendu behar izatea inprimaki-kontrolen banakako kontrolen zabalera eta lerrokatzea tartekatze utilitateekin (behean erakusten den moduan). Azkenik, ziurtatu <label>inprimaki-kontrol bakoitzean beti sartzen duzula, nahiz eta pantaila-irakurle ez diren bisitariei ezkutatu behar duzun .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>

Inprimaki pertsonalizatuen kontrolak eta hautaketak ere onartzen dira.

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

Ezkutuko etiketen alternatibak

Laguntza-teknologiek, esaterako, pantaila-irakurgailuek arazoak izango dituzte zure inprimakiekin, sarrera bakoitzeko etiketarik sartzen ez baduzu. Lineako inprimaki hauetarako, etiketak ezkutatu ditzakezu .sr-onlyklasea erabiliz. Laguntza-teknologiei etiketa bat emateko beste metodo alternatibo batzuk daude, hala nola aria-label, aria-labelledbyedo titleatributua. Horietako bat ere ez badago, laguntza-teknologiek placeholderatributua erabil dezakete, baldin badago, baina kontuan izan placeholderez dela gomendagarria etiketatze-metodoen ordezko gisa erabiltzea.

Laguntza testua

Bloke-mailako laguntza-testua inprimakietan sor daiteke (lehen v3-n .form-textbezala ezagutzen zen). .help-blockSareko laguntza-testua malgutasunez inplementa daiteke lerroko edozein HTML elementu eta erabilgarritasun klaseak erabiliz .text-muted.

Laguntza-testua inprimaki-kontrolekin lotzea

aria-describedbyLaguntza-testua berariaz lotu behar da atributua erabiliz erlazionatutako inprimaki-kontrolarekin . Horrek bermatuko du laguntza-teknologiek (pantaila-irakurgailuak, esaterako) laguntza-testu hau iragarriko dutela erabiltzailea kontrolatzen denean edo kontrola sartzen denean.

Sarreraren azpiko laguntza-testua estiloarekin jar daiteke .form-text. Klase honek display: blockgoiko marjina bat barne hartzen du eta gehitzen du goiko sarreretatik erraz tartekatzeko.

Pasahitza Pasahitzak 8-20 karaktere izan behar ditu, letrak eta zenbakiak izan behar ditu eta ez du zuriunerik, karaktere berezirik edo emojirik izan behar.

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

Barneko testuak lineako HTML elementu tipiko edozein erabil dezake (izan <small>, <span>, edo beste zerbait) erabilgarritasun-klase bat baino ez duena.

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

Desgaitutako inprimakiak

Gehitu disabledatributu boolearra sarrera batean erabiltzaileen elkarrekintzak saihesteko eta arinagoa izan dadin.

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

Gehitu disabledatributua a <fieldset>barruko kontrol guztiak desgaitzeko.

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

Oharra aingurekin

Lehenespenez, arakatzaileek a barruko jatorrizko inprimaki-kontrol guztiak ( <input>, <select>eta <button>elementuak) <fieldset disabled>desgaituta bezala tratatuko dituzte, teklatuaren eta saguaren elkarrekintzak saihestuz. Hala ere, zure inprimakiak <a ... class="btn btn-*">elementuak ere baditu, hauei estilo bat baino ez zaie emango pointer-events: none. Botoien egoera desgaituari buruzko atalean adierazi bezala (eta, zehazki, aingura-elementuen azpiatalean), CSS propietate hau oraindik ez dago estandarizatua eta ez dago guztiz onartzen Internet Explorer 10-n, eta ez die teklatuko erabiltzaileei eragotziko. esteka horiek bideratzeko edo aktibatzeko gai. Beraz, seguru izateko, erabili JavaScript pertsonalizatua estekak desgaitzeko.

Arakatzaileen arteko bateragarritasuna

Bootstrap-ek estilo hauek arakatzaile guztietan aplikatuko dituen arren, Internet Explorer 11 eta ondorengoek ez dute guztiz onartzen disabledatributua <fieldset>. Erabili JavaScript pertsonalizatua arakatzaile hauetan eremu-multzoa desgaitzeko.

Balioztatzea

Eman iritzi baliotsu eta ekingarriak zure erabiltzaileei HTML5 inprimakiaren baliozkotzearekin , gure nabigatzaile bateragarri guztietan eskuragarri . Aukeratu arakatzailearen baliozkotze-iritzia lehenetsia, edo inplementatu mezu pertsonalizatuak gure barneko klaseekin eta hasierako JavaScriptekin.

Gaur egun, baliozkotze-estilo pertsonalizatuak erabiltzea gomendatzen dugu, jatorrizko arakatzailearen baliozkotze-mezu lehenetsiak ez baitira etengabe jasaten laguntza-teknologien aurrean arakatzaile guztietan (batez ere, Chrome mahaigainean eta mugikorrean).

Nola dabil

Hona hemen inprimakien baliozkotzeak Bootstrap-ekin nola funtzionatzen duen:

HTML inprimakiaren baliozkotzea CSSren bi sasi-klaseen bidez aplikatzen da, :invalideta :valid. <input>, <select>, eta <textarea>elementuei aplikatzen zaie .
Bootstrap-ek :invalideta :validestiloak .was-validatedklase nagusira ezartzen ditu, normalean <form>. Bestela, baliorik gabeko derrigorrezko edozein eremu baliogabe gisa agertzen da orria kargatzean. Horrela, noiz aktibatu aukeratu dezakezu (normalean inprimakia bidaltzen saiatu ondoren).
Inprimakiaren itxura berrezartzeko (adibidez, AJAX erabiliz inprimaki dinamikoen bidalketa kasuan), kendu .was-validatedklasea <form>berriro bidali ondoren.
Errepide gisa, .is-invalideta .is-validklaseak erabil daitezke zerbitzariaren baliozkotze sasi-klaseen ordez . Ez dute .was-validatedguraso klaserik behar.
CSS funtzionamenduaren mugak direla eta, ezin ditugu (gaur egun) estiloak aplikatu <label>DOM-en inprimaki-kontrol baten aurretik dagoen bati JavaScript pertsonalizatuaren laguntzarik gabe.
Arakatzaile moderno guztiek mugak baliozkotzeko APIa onartzen dute , inprimakien kontrolak balioztatzeko JavaScript metodo sorta bat.
Iritzi-mezuek arakatzailearen lehenetsiak erabil ditzakete (desberdinak arakatzaile bakoitzeko eta CSS bidez estilizatu ezinak) edo gure iritzi-estilo pertsonalizatuak HTML eta CSS gehigarriekin.
Baliotasun mezu pertsonalizatuak setCustomValidityeman ditzakezu JavaScript-en.

Hori kontuan izanda, kontuan hartu honako demo hauek gure inprimaki pertsonalizatuak baliozkotzeko estiloetarako, zerbitzariaren alboko aukerako klaseetarako eta arakatzailearen lehenespenetarako.

Estilo pertsonalizatuak

novalidateBootstrap inprimakia baliozkotzeko mezu pertsonalizatuetarako, atributu boolearra gehitu beharko duzu zure <form>. Honek arakatzailearen iritzi-aholku lehenetsiak desgaitzen ditu, baina inprimakiak baliozkotzeko APIetarako sarbidea ematen du JavaScript-en. Saiatu beheko formularioa bidaltzen; gure JavaScript-ek bidaltzeko botoia atzemango dizu eta iritzia emango dizu.

Bidaltzen saiatzean, :invalideta :validestiloak ikusiko dituzu inprimakiaren kontroletan aplikatuta.

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

Arakatzailearen lehenetsiak

Ez al zaizu interesatzen baliozkotze pertsonalizatuaren iritzi-mezuak edo JavaScript idaztea inprimakiaren jokabideak aldatzeko? Dena ondo, arakatzailearen lehenetsiak erabil ditzakezu. Saiatu beheko formularioa bidaltzen. Zure arakatzailearen eta sistema eragilearen arabera, iritzi-estilo apur bat desberdina ikusiko duzu.

Iritzi-estilo hauek CSS-rekin estiloa jarri ezin badira ere, feedbackaren testua pertsonaliza dezakezu JavaScript bidez.

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

Zerbitzariaren aldean

.is-invalidBezeroaren aldeko baliozkotzea erabiltzea gomendatzen dugu, baina zerbitzariaren aldetik behar baduzu, baliogabeak eta baliozkoak diren inprimaki-eremuak eta rekin adieraz ditzakezu .is-valid. Kontuan izan .invalid-feedbackklase hauekin ere onartzen dela.

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

Onartutako elementuak

Gure adibide-inprimakiek goian jatorrizko testuak erakusten <input>dituzte, baina inprimakiak baliozkotzeko estiloak ere eskuragarri daude gure inprimaki pertsonalizatuen kontroletarako.

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

Erreminta-aholkuak

Zure inprimakiaren diseinuak aukera ematen badu, .{valid|invalid}-feedbackklaseak klaseengatik alda ditzakezu .{valid|invalid}-tooltipbaliozkotze-erantzunak estiloko tresna-aholku batean bistaratzeko. Ziurtatu guraso bat position: relativegainean duzula tresna-informazioa kokatzeko. Beheko adibidean, gure zutabe klaseek hori badute dagoeneko, baina baliteke zure proiektuak konfigurazio alternatibo bat behar izatea.

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

Inprimaki pertsonalizatuak

Are gehiago pertsonalizatzeko eta arakatzaileen arteko koherentzia lortzeko, erabili gure inprimaki-elementu guztiz pertsonalizatuak arakatzailearen lehenetsiak ordezkatzeko. Markatze semantiko eta eskuragarriaren gainean eraikita daude, beraz, inprimaki-kontrol lehenetsien ordezko sendoak dira.

Koadroak eta irratiak

Kontrol -lauki eta irrati bakoitza anai- <div>arreba batekin bilduta dago <span>gure kontrol pertsonalizatua sortzeko eta <label>horrekin batera doan testurako. Egitura aldetik, gure lehenetsitako ikuspegi bera da .form-check.

Anai-arreba-hautatzailea ( ~) erabiltzen dugu gure <input>estatu guztietarako, adibidez :checked, gure inprimaki-adierazle pertsonalizatua behar bezala estilotzeko. Klasarekin konbinatuta, .custom-control-labelelementu bakoitzaren testua ere estilizatu dezakegu <input>'ren egoeraren arabera.

Lehenetsia ezkutatzen dugu <input>eta opacityerabiltzen dugu .custom-control-labelinprimaki-adierazle pertsonalizatu berri bat eraikitzeko eta bere ::beforeordez ::after. Zoritxarrez, ezin dugu pertsonalizaturik sortu <input>CSS- contentek elementu horretan ez duelako funtzionatzen.

Markatutako egoeretan, Open Iconic -eko base64 kapsulatutako SVG ikonoak erabiltzen ditugu . Honek arakatzaile eta gailuetan diseinatzeko eta kokatzeko kontrol onena eskaintzen digu.

Kontrol-laukiak

Markatu kontrol-lauki pertsonalizatu hau

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

Kontrol-lauki pertsonalizatuek sasi-klasea ere erabil dezakete :indeterminateJavaScript bidez eskuz ezartzen direnean (ez dago HTML atributurik erabilgarri hori zehazteko).

Markatu kontrol-lauki pertsonalizatu hau

jQuery erabiltzen ari bazara, nahikoa izango litzateke horrelako zerbait:

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

Irratiak

Aldatu irrati pertsonalizatu hau

Edo desaktibatu beste irrati pertsonalizatu hau

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

Sarean

Aldatu irrati pertsonalizatu hau

Edo desaktibatu beste irrati pertsonalizatu hau

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

Desgaituta

Kontrol-lauki pertsonalizatuak eta irratiak ere desgaitu daitezke. Gehitu disabledatributu boolearrari <input>eta adierazle pertsonalizatua eta etiketa deskribapena automatikoki estiloa izango da.

Markatu kontrol-lauki pertsonalizatu hau

Aldatu irrati pertsonalizatu hau

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

Menu pertsonalizatuek <select>klase pertsonalizatu bat baino ez dute behar, .custom-selectestilo pertsonalizatuak abiarazteko. Estilo pertsonalizatuak hasierako itxurara mugatzen dira <select>eta ezin dituzte aldatu <option>nabigatzaileen mugak direla eta.

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

Aukeraketa pertsonalizatu txikiak eta handiak ere hauta ditzakezu gure tamaina bereko testu-sarrerak bat etor daitezen.

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

multipleAtributua ere onartzen da :

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

sizeAtributua den bezala :

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

Barrutia

Sortu <input type="range">kontrol pertsonalizatuak .custom-range. Pista (atzealdea) eta erpurua (balioa) biak nabigatzaile guztietan berdin ager daitezen. IE-k eta Firefoxek bakarrik onartzen dutenez euren pista "betetzea" erpuruaren ezkerretik edo eskuinetik aurrera bisualki adierazteko bitarteko gisa, ez dugu onartzen.

Adibide barrutia

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

Barrutiko sarrerek mineta max- 0eta -ren balio inplizituak dituzte 100, hurrenez hurren. Balio berriak zehaztu ditzakezu mineta maxatributuak erabiltzen dituztenentzat.

Adibide barrutia

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

Lehenespenez, barrutiak balio osoetara "lokatzen" dira. Hau aldatzeko, stepbalio bat zehaztu dezakezu. Beheko adibidean, urrats kopurua bikoiztu egiten dugu step="0.5".

Adibide barrutia

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

Fitxategi-arakatzailea

Fitxategiaren sarrera multzoko nardagarriena da eta JavaScript gehigarria behar du Aukeratu fitxategi funtzionalarekin… eta hautatutako fitxategi-izenaren testuarekin lotu nahi badituzu.

Aukeratu fitxategia

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

<input>Fitxategi lehenetsia ezkutatzen dugu opacityeta horren ordez <label>. Botoia sortu eta kokapenarekin kokatzen da ::after. widthAzkenik, a eta heighton deklaratzen dugu <input>inguruko edukietarako tarte egokia izateko.

Kateak itzultzea edo pertsonalizatzea

:lang()Sasi-klasea " Browse" testua beste hizkuntza batzuetara itzultzeko erabiltzen da. Gainidatzi edo gehitu sarrerak $custom-file-textSass aldagaiari dagokion hizkuntza-etiketa eta lokalizatutako kateekin. Ingelesezko kateak modu berean pertsonaliza daitezke. Adibidez, hona hemen nola gehitu litekeen gaztelaniazko itzulpen bat (gaztelaniazko hizkuntza kodea da es):

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

Hona hemen lang(es)gaztelaniazko itzulpen baterako fitxategi pertsonalizatuaren sarreraren ekintza:

Aukeratu fitxategia

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

Zure dokumentuaren (edo honen azpizuhaitzaren) hizkuntza behar bezala ezarri beharko duzu testu zuzena erakusteko. Elementuaren atributua edo HTTP goiburua erabiliz egin daiteke ,lang beste metodo batzuen artean.<html>Content-Language

Formak

Ikuspegi orokorra

Inprimakien kontrolak

Tamaina

Irakurtzeko soilik

Testu arrunta irakurtzeko soilik

Gama Sarrerak

Koadroak eta irratiak

Lehenetsia (pilatuta)

Sarean

Etiketarik gabe

Diseinua

Taldeak osatu

Inprimakia sareta

Forma errenkada

Forma horizontala

Inprimaki horizontaleko etiketen tamaina

Zutabeen tamaina

Tamaina automatikoa

Lineako inprimakiak

Ezkutuko etiketen alternatibak

Laguntza testua

Laguntza-testua inprimaki-kontrolekin lotzea

Desgaitutako inprimakiak

Oharra aingurekin

Arakatzaileen arteko bateragarritasuna

Balioztatzea

Nola dabil

Estilo pertsonalizatuak

Arakatzailearen lehenetsiak

Zerbitzariaren aldean

Onartutako elementuak

Erreminta-aholkuak

Inprimaki pertsonalizatuak

Koadroak eta irratiak

Kontrol-laukiak

Irratiak

Sarean

Desgaituta

Hautatu menua

Barrutia

Fitxategi-arakatzailea

Kateak itzultzea edo pertsonalizatzea