Формалар

Форма белән идарә итү стиле, макет вариантлары, төрле формалар ясау өчен махсус компонентлар өчен үрнәкләр һәм куллану күрсәтмәләре.

Гомуми күзәтү

Bootstrap формасы белән идарә итү класслар белән Rebooted форма стильләрендә киңәя. Браузерлар һәм җайланмалар арасында эзлекле күрсәтү өчен, бу классларны кулланыгыз.

Электрон почта тикшерүе, номер сайлау һ.б. кебек яңа кертү контроллерыннан файдалану өчен type, барлык керемнәрдә тиешле атрибутны кулланыгыз (мәсәлән, emailэлектрон почта адресы яки санлы мәгълүмат өчен).number

Bootstrap формасының стильләрен күрсәтү өчен тиз мисал. Кирәкле класслар, форма макеты һәм башкалар турында документлар өчен укуны дәвам итегез.

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

Форма белән идарә итү

Текст формасы белән идарә итү, s, s, s кебек <input>класс <select>белән эшләнгән <textarea>. .form-controlГомуми кыяфәт, фокус торышы, зурлык һәм башкалар өчен стильләр кертелгән.

Алга таба стильләр өчен безнең махсус формаларны барлагыз <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>

Файл кертү .form-controlөчен , алыштырыгыз .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>

Зурлык

Кебек класслар кулланып биеклекләр .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>

Уку

readonlyКерү кыйммәтен үзгәртүдән саклап калу өчен , буле атрибу��ын өстәгез . Уку өчен генә керемнәр җиңелрәк күренә (инвалид керемнәр кебек), ләкин стандарт курсорны саклагыз.

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

Гади текст

Әгәр дә <input readonly>сезнең формадагы элементлар гади текст рәвешендә ясалырга теләсәгез, .form-control-plaintextклассны форма кырының стилизациясен бетерү һәм дөрес маржаны һәм паддерны саклап калу өчен классны кулланыгыз.

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

Аралар керемнәре

Куллану белән горизонталь әйләнешле диапазон керемнәрен куегыз .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>

Такталар һәм радио

Килешү пунктлары һәм радио ярдәмендә HTML элементларының макетын һәм тәртибен яхшырта торган кертү төрләре .form-checkөчен бер класс ярдәмендә яхшыртыла . Такталар исемлектә бер яки берничә вариантны сайлау өчен, радиолар күпләрдән бер вариантны сайлау өчен.

Инвалид пунктлар һәм радиолар ярдәм итә, ләкин not-allowedата-ананың курсорында курсор белән тәэмин итү өчен <label>, сезгә disabledатрибутны өстәргә кирәк .form-check-input. Инвалид атрибут кертү торышын күрсәтергә ярдәм итәр өчен җиңелрәк төс кулланачак.

Такталар һәм радио куллану HTML нигезендә форманы раслау һәм кыска, үтемле этикеткалар белән тәэмин итү өчен төзелгән. Шулай итеп, безнең <input>s һәм s бертуган элементлар, а эчендә <label>аермалы буларак . Бу бераз күбрәк сүзле, чөнки сез һәм бәйләнешне күрсәтү өчен атрибутларны күрсәтергә тиеш .<input><label>idfor<input><label>

Килешү буенча (тезелгән)

Килешү буенча, бертуган кардәш булган теләсә нинди сандыклар һәм радиолар вертикаль рәвештә урнаштырылачаклар һәм тиешенчә аралар белән урнашачаклар .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>

Киң төзелештә

.form-check-inlineТөркемнәрне бер үк горизонталь рәттә тикшерегез .form-check.

3 (инвалид)

<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 (инвалид)

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

Ярлыкларсыз

Этикетка тексты булмаган .position-staticкеремнәргә өстәгез . .form-checkАссистив технологияләр өчен билгеле бер форма бирергә онытмагыз (мәсәлән, куллану 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>

Таблицасы

Bootstrap кулланылганга display: blockһәм width: 100%безнең барлык формалар белән идарә итүгә диярлек, формалар килешү буенча вертикаль рәвештә урнаштырылачак. Өстәмә класслар бу макетны форма нигезендә үзгәртү өчен кулланылырга мөмкин.

Төркемнәрне формалаштыру

Класс .form-group- формаларга ниндидер структура өстәү өчен иң җиңел ысул. Бу этикеткаларны, контрольләрне, өстәмә ярдәм текстын һәм валидация хәбәрләрен формалаштыруны дәртләндерүче сыгылучан класс тәкъдим итә. Килешү буенча ул гына кулланыла margin-bottom, ләкин .form-inlineкирәк булганда өстәмә стильләр ала. Аны <fieldset>s, <div>s яки бүтән элементлар белән кулланыгыз.

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

Челтәр формасы

Безнең челтәр класслары ярдәмендә катлаулырак формалар төзелергә мөмкин. Аларны берничә багана, төрле киңлек һәм өстәмә тигезләү вариантлары таләп иткән форма макетлары өчен кулланыгыз.

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

Форма рәте

Сез шулай ук безнең стандарт челтәр рәтенең төрләнешен алыштыра аласыз .row, .form-rowул катырак һәм тыгызрак урнашу өчен демократик багана чүпрәкләрен юкка чыгара.

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

Челтәр системасы белән тагын да катлаулырак макетлар булдырырга мөмкин.

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

Горизонталь форма

.rowТөркемнәр формалаштыру өчен класслар өстәп һәм .col-*-*сезнең этикеткалар һәм контроль киңлекне күрсәтү өчен класслар кулланып , челтәр белән горизонталь формалар төзегез . .col-form-labelСезнең с -ларга да өстәргә онытмагыз, <label>шуңа күрә алар бәйләнешле форма белән идарә итәләр.

Кайвакыт, сезгә кирәк булган камил тигезләү өчен, бәлки, маржа яки паддер ярдәмендә кулланырга кирәк. padding-topМисал өчен, текст базасын яхшырак тигезләү өчен, без тупланган радио кертү этикеткасын бетердек .

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

Горизонталь форма этикеткасы зурлыгы

Зурлыкны дөрес куллану өчен, яисә .col-form-label-smсезнең .col-form-label-lgяисә <label>кулланыгыз .<legend>.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>

Колоннаның зурлыгы

Алдагы мисалларда күрсәтелгәнчә, безнең челтәр системасы сезгә теләсә нинди санны урнаштырырга мөмкинлек .colбирә . Алар булган киңлекне алар арасында тигез бүләчәкләр. Сез шулай ук баганаларның бер өлешен сайлый аласыз, күбрәк яки азрак урын алу өчен, калганнары тигез итеп бүлеп бирәләр, билгеле багана класслары кебек ..row.form-row.col.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>

Авто-размер

.colТүбәндәге мисал эчтәлекне вертикаль рәвештә үзәкләштерү өчен флексбокс ярдәмендә кулланыла .col-auto, сезнең баганалар кирәк булганча гына урын ала. Башка юл белән әйтегез, багананың эчтәлеге нигезендә зурлыгы.

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

Аннары сез моны тагын бер кат размерга кертә аласыз.

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

Customәм , әлбәттә, махсус форма контроле ярдәм итә.

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

Эчке формалар

.form-inlineБер горизонталь рәттә этикеткалар, форма контроллеры һәм төймәләр сериясен күрсәтү өчен классны кулланыгыз . Эчке формалардагы форма контроле аларның килешү халәтләреннән бераз аерылып тора.

Контрольләр display: flex, теләсә нинди HTML ак мәйданны җимереп, аралар һәм флексбокс ярдәмендә тигезләү контролен тәэмин итәргә мөмкинлек бирә .
Контроль һәм кертү төркемнәре width: autoBootstrap килешүен кире кагу өчен ала width: 100%.
Контрольләр мобиль җайланмалардагы тар күренешләрне исәпкә алу өчен ким дигәндә 576px киңлектәге күренешләрдә күрсәтелә.

Сезгә индивидуаль форма контроллерының киңлеген һәм тигезләнешен кул белән чишәргә кирәк булырга мөмкин ( аста күрсәтелгәнчә). Ниһаять, <label>һәрбер форма контроле белән һәрвакыт кертегез, хәтта аны экраннан булмаган кунаклардан яшерергә кирәк булса да .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>

Махсус форма белән идарә итү һәм сайлау шулай ук ярдәм итә.

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

Яшерен этикеткаларга альтернатива

Экран укучылары кебек ярдәмче технологияләр сезнең формаларда проблема тудырачак, әгәр сез һәр кертү өчен ярлык кертмәсәгез. Бу сызык формалары өчен сез этикеткаларны .sr-onlyкласс ярдәмендә яшерә аласыз. Ярдәмче технологияләр өчен ярлык бирүнең альтернатив ысуллары бар, мәсәлән aria-label, aria-labelledbyяки titleатрибут. Әгәр дә аларның берсе дә булмаса, ярдәмче технологияләр , булган placeholderочракта, атрибутны кулланырга мөмкин, ләкин исегездә тотыгыз, placeholderбашка маркировкалау ысулларын алыштыру буларак куллану киңәш ителми.

Ярдәм тексты

.form-textФормалардагы блок дәрәҗәсендәге ярдәм тексты (элек .help-blockv3 дип аталган) ярдәмендә ясалырга мөмкин . Эчтәлекле ярдәм тексты теләсә нинди HTML элементын һәм файдалы классларны кулланып сыгылмалы тормышка ашырылырга мөмкин .text-muted.

Ярдәм текстын форма контроле белән бәйләү

Ярдәм тексты aria-describedbyатрибутны куллану белән бәйле форма контроле белән ачыктан-ачык бәйләнештә булырга тиеш. Бу ярдәмче технологияләр, мәсәлән, экран укучылары - кулланучы контрольгә кергәндә яки кергәндә бу ярдәм текстын игълан итәчәк.

Керү астындагы ярдәм тексты белән ясалырга мөмкин .form-text. Бу класс display: blockөстә кертелгәннәрдән җиңел аралар өчен өстен маржаны кертә һәм өсти.

Серсүз Сезнең серсүз озынлыгы 8-20 символ булырга тиеш, хәрефләр һәм саннар булырга тиеш, һәм буш урыннар, махсус символлар, эможлар булырга тиеш түгел.

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

Эчтәлекле текст теләсә нинди типик HTML элементын куллана ала (ул <small>, <span>яисә бүтән нәрсә), файдалы класстан башка бернәрсә дә юк.

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

Инвалид формалар

disabledКулланучының үзара бәйләнешен булдырмас өчен һәм җиңелрәк күренсен өчен кертүгә буле атрибутын өстәгез .

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

Эчтәге барлык контрольне сүндерү өчен disabledатрибутны өстәгез .<fieldset>

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

Анкорлар белән саклагыз

Килешү буенча, браузерлар барлык туган форма контроллерын ( һәм элементларын) инвалид дип саныйлар <input>, аларда клавиатура һәм тычканның үзара бәйләнешен булдырмыйлар. Ләкин, сезнең формада элементлар да бар икән, аларга бары тик стиль биреләчәк . Кнопкалар өчен инвалид хәл турында бүлектә күрсәтелгәнчә (һәм анкор элементлары өчен махсус бүлектә), бу CSS милеге әле стандартлаштырылмаган һәм Internet Explorer 10'да тулысынча хупланмаган, һәм клавиатура кулланучылары булмый. бу сылтамаларны туплый яки активлаштыра ала. Шулай итеп, куркынычсыз булу өчен, мондый сылтамаларны сүндерү өчен махсус JavaScript кулланыгыз.<select><button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Браузерның яраклашуы

disabledBootstrap бу стильләрне барлык браузерларда кулланса да, Internet Explorer 11 һәм аннан түбәндә атрибутны тулысынча хупламыйлар <fieldset>. Бу браузерларда кырны сүндерү өчен махсус JavaScript кулланыгыз.

Тикшерү

Кулланучыларга HTML5 формасын тикшерү белән кыйммәтле, эшлекле җавап бирегез - безнең барлык браузерларда бар . Браузердан килешү тикшерүен сайлагыз, яки безнең класслар һәм JavaScript стартеры белән махсус хәбәрләрне тормышка ашырыгыз.

Хәзерге вакытта без махсус тикшерү стильләрен кулланырга киңәш итәбез, чөнки туган браузерның дефолт тикшерү хәбәрләре барлык браузерларда ярдәмче технологияләргә эзлекле тәэсир итмиләр (аеруча, эш өстәле һәм мобильдә Chrome).

Ничек бу эшли

Ботстрап белән форманы тикшерү ничек эшли:

HTML формасын тикшерү CSSның ике псевдо-классы аша кулланыла, :invalidһәм :valid. Бу элементларга <input>кагыла .<select><textarea>
Ботстрап ата-аналар классына :invalidһәм :validстильләрен киңәйтә, гадәттә . Otherwiseгыйсә, кыйммәтсез теләсә нинди кыр битнең йөкләнешендә яраксыз булып күрсәтелә. Шул рәвешле, сез аларны кайчан активлаштырырга икәнен сайлый аласыз (гадәттә форма тапшырылганнан соң)..was-validated<form>
Форманың тышкы кыяфәтен яңадан торгызу өчен (мәсәлән, AJAX ярдәмендә динамик форма җибәргән очракта), тапшырганнан соң .was-validatedклассны <form>кабат бетерегез.
Артка кайту буларак, .is-invalidһәм сервер ягын тикшерү.is-valid өчен псевдо-класслар урынына класслар кулланылырга мөмкин . Аларга ата- аналар сыйныфы кирәк түгел..was-validated
CSS эшләвендәге чикләүләр аркасында, без (хәзерге вакытта) стильләрне <label>DOM'да форма контроле алдыннан килгән JavaScript ярдәмендә куллана алмыйбыз.
Барлык заманча браузерлар да чикләү тикшерү API -ны , форма контролен тикшерү өчен JavaScript ысуллары сериясен хуплый.
Фикер алышу хәбәрләре браузерның дефолтларын кулланырга мөмкин (һәр браузер өчен төрле, һәм CSS аша тотрыксыз) яки өстәмә HTML һәм CSS ярдәмендә безнең гадәти җавап стильләре.
setCustomValidityСез JavaScript ярдәмендә махсус дөреслек хәбәрләрен бирә аласыз .

Шуны истә тотып, безнең махсус форманы тикшерү стиле, серверның өстәмә класслары, браузерның дефолтлары өчен түбәндәге демоларны карагыз.

Махсус стильләр

Bootstrap формасын тикшерү хәбәрләре өчен сезгә novalidateбуле атрибутын өстәргә кирәк <form>. Бу браузерның кире элемтә коралларын сүндерә, ләкин JavaScript'та форманы тикшерү API'ларына рөхсәт бирә. Түбәндәге форманы җибәрергә тырышыгыз; безнең JavaScript тапшыру төймәсен тотып торачак һәм сезгә кире элемтә.

Тапшырырга тырышканда, сез форма контроллерында кулланылган стильләрне :invalidһәм стильләрне күрерсез.:valid

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

Браузер килешү

Форма тәртибен үзгәртү өчен махсус тикшерү җаваплары яки JavaScript язу белән кызыксынмыйсызмы? Барысы да яхшы, сез браузерның килешүләрен куллана аласыз. Түбәндәге форманы җибәреп карагыз. Сезнең браузерга һәм ОСка карап, сез бераз башка төрле стильне күрерсез.

Бу кире элемтә стильләрен CSS белән ясап булмый, сез барыбер 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>

Сервер ягы

Без клиент ягын тикшерүне кулланырга киңәш итәбез, ләкин сервер ягы кирәк булса, сез яраксыз һәм дөрес форма кырларын күрсәтә .is-invalidаласыз .is-valid. Игътибар итегез, .invalid-feedbackбу класслар белән дә ярдәм итә.

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

Ярдәмче элементлар

Безнең үрнәк формалар <input>өстә туган текст текстларын күрсәтәләр, ләкин форманы тикшерү стиле безнең махсус форма контроле өчен дә бар.

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

Кораллар

.{valid|invalid}-feedbackӘгәр дә сезнең форма макеты рөхсәт итсә, сез класслар өчен классларны алыштыра аласыз .{valid|invalid}-tooltip. Кораллар урнаштыру өчен аның белән ата-анагыз булуына инаныгыз position: relative. Түбәндәге мисалда безнең багана класслары инде бар, ләкин сезнең проект альтернатив көйләү таләп итә ала.

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

Махсус формалар

Тагын да үзләштерү һәм браузерның эзлеклелеге өчен, браузерның дефолтларын алыштыру өчен, безнең махсус форма элементларын кулланыгыз. Алар семантик һәм үтемле билгеләр өстендә төзелгән, шуңа күрә алар теләсә нинди формаль контроль өчен нык алмаштыргычлар.

Такталар һәм радио

Customәрбер тикшерү тартмасы һәм радио безнең махсус контроль һәм иярчен текст өчен <div>бертуган белән уралган . Структур яктан, бу безнең килешү белән бер үк караш .<span><label>.form-check

Без үзебезнең барлык форма күрсәткечләрен дөрес стильләштерү ~өчен, бөтен <input>штатларыбыз өчен кардәш селекторны кулланабыз . :checkedКласс белән берләшкәндә .custom-control-label, без шулай ук һәрбер пункт өчен текстны <input>халәтенә карап ясый алабыз.

Килешүне яшерәбез <input>һәм аның урынына яңа махсус форма индикаторы төзү өчен opacityкулланабыз . Кызганычка каршы, без гадәтне төзи алмыйбыз, чөнки CSS бу элементта эшләми..custom-control-label::before::after<input>content

Тикшерелгән хәлләрдә без ачык иконикадан 64 урнаштырылган SVG иконаларын кулланабыз . Бу безгә браузерлар һәм җайланмалар арасында стилизацияләү һәм урнаштыру өчен иң яхшы контроль тәэмин итә.

Такталар

Бу махсус пунктны тикшерегез

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

Заказлы тартмалар шулай ук :indeterminateпсевдо классны JavaScript аша кул белән көйләгәндә куллана ала (аны күрсәтү өчен HTML атрибуты юк).

Бу махсус пунктны тикшерегез

Әгәр сез jQuery кулланасыз икән, мондый әйбер җитәрлек булырга тиеш:

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

Радио

Бу махсус радионы алыштырыгыз

Яисә бу бүтән махсус радионы алыштырыгыз

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

Киң төзелештә

Бу махсус радионы алыштырыгыз

Яисә бу бүтән махсус радионы алыштырыгыз

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

Инвалид

Махсус пунктлар һәм радиолар да сүндерелергә мөмкин. disabledБулан атрибутын өстәгез <input>, махсус күрсәткеч һәм ярлык тасвирламасы автоматик рәвештә ясалачак.

Бу махсус пунктны тикшерегез

Бу махсус радионы алыштырыгыз

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

Заказлы стильләрне эшләтеп җибәрү өчен , махсус <select>менюларга махсус класс кирәк . .custom-selectМахсус стильләр баштагы кыяфәт белән чикләнәләр һәм браузер чикләүләре аркасында аларны <select>үзгәртә алмыйлар .<option>

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

Сез шулай ук кечкенә һәм зур гадәтләрдән безнең охшаш зурлыктагы текст керемнәренә туры килә аласыз.

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

multipleАтрибут шулай ук ярдәм итә :

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

sizeАтрибут кебек :

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

Аралыгы

<input type="range">Белән махсус заказлар булдырыгыз .custom-range. Трек (фон) һәм бармак (кыйммәт) икесе дә браузерларда бер үк күренү өчен ясалган. IE һәм Firefox гына бармакның сул яисә уң ягыннан трекны “тутырырга” ярдәм итә, алга китешне визуаль яктан күрсәтү чарасы буларак, без хәзерге вакытта аны хупламыйбыз.

Мисал диапазоны

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

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

Example range

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

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

Example range

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

File browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Choose file

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

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.

Translating or customizing the strings

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is es):

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

Here’s lang(es) in action on the custom file input for a Spanish translation:

Seleccionar Archivo

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

Дөрес текст күрсәтелсен өчен сезгә документның телен (яки аның асты) дөрес куярга кирәк. Бу элементтагы атрибутны яки HTTP башламын кулланып ,lang башка ысуллар белән эшләнергә мөмкин .<html>Content-Language

Формалар

Гомуми күзәтү

Форма белән идарә итү

Зурлык

Уку

Гади текст

Аралар керемнәре

Такталар һәм радио

Килешү буенча (тезелгән)

Киң төзелештә

Ярлыкларсыз

Таблицасы

Төркемнәрне формалаштыру

Челтәр формасы

Форма рәте

Горизонталь форма

Горизонталь форма этикеткасы зурлыгы

Колоннаның зурлыгы

Авто-размер

Эчке формалар

Яшерен этикеткаларга альтернатива

Ярдәм тексты

Ярдәм текстын форма контроле белән бәйләү

Инвалид формалар

Анкорлар белән саклагыз

Браузерның яраклашуы

Тикшерү

Ничек бу эшли

Махсус стильләр

Браузер килешү

Сервер ягы

Ярдәмче элементлар

Кораллар

Махсус формалар

Такталар һәм радио

Такталар

Радио

Киң төзелештә

Инвалид

Менюны сайлагыз

Аралыгы

File browser

Translating or customizing the strings