in English

Umi Formulario rehegua

Techapyrã ha jepururã ñemboguatarã formulario control estilo rehegua, opción diseño rehegua ha componente personalizado rehegua ojejapo hag̃ua hetaiterei formulario.

Tembiecharã

Umi control formulario Bootstrap rehegua oñembotuichave ñande estilo formulario Rebooted-pe umi clase ndive. Eipuru ko’ã mbo’esyry eiporavo hag̃ua ijehechaukarã oñembohekopyrévape peteĩ jehechauka peteĩchavévape g̃uarã kundahára ha tembipuru’i rupi.

Eipuru katuete peteĩ typeatributo hekopete opaite entrada-pe (techapyrã, emaildirección de correo electrónico térã numbermarandu numérico-pe g̃uarã) eaprovecha hag̃ua umi control de entrada pyahuvéva haꞌeháicha verificación correo electrónico, papapy jeporavo ha hetave mbaꞌe.

Ko’ápe oĩ peteĩ techapyrã pya’e ohechauka hag̃ua Bootstrap forma estilokuéra. Emoñe’ẽ meme kuatiañe’ẽ rehegua umi mbo’esyry oñeikotevẽva rehegua, formulario ñemohenda ha hetave mba’e.

Araka’eve ndorokompartimo’ãi ne correo electrónico ambue tapichápe. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Umi control de forma rehegua

Umi control forma textual rehegua —s <input>, <select>s ha <textarea>s-icha— oñemohenda estilo .form-controlclase ndive. Oike umi estilo ojehecha hag̃ua general, estado de enfoque, tamaño ha hetave mbaꞌe.

Katuete ehesa’ỹijo ore formulario personalizado -kuéra ehesa’ỹijove hag̃ua estilo <select>s.

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

Umi vore jeikerã, embohasa pe .form-controlfor .form-control-file.

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

Dimensionamiento rehegua

Emohenda yvatekue eipurúvo mbo’esyry ha’eháicha .form-control-lgha .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>

Moñe’ẽrã añoite

Oñemoĩ readonlyatributo booleano peteĩ entrada rehe ani hag̃ua oñemoambue pe entrada valor. Umi entrada ojelee hag̃uánte ojehechauka hesakãveha (umi entrada oñemboykévaicha), ha katu oguereko cursor estándar.

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

Moñe’ẽrã añoite jehaipyre sánto

Eguerekoséramo <input readonly>elemento nde formulario-pe oñemboguapýva jehaipyre llano ramo, eipuru .form-control-plaintextmboꞌepy eipeꞌa hag̃ua formulario campo estilo por defecto ha eñongatu hag̃ua margen ha relleno hekopete.

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

Insumos de Rango rehegua

Emohenda umi entrada rango ojedesplazakuaáva horizontalmente ojeporúvo .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>

Umi cuadro de verificación ha umi rrádio

Umi vore ha radio ñepyrũrã oñemyatyrõ pytyvõ rupive .form-check, peteĩ mboꞌepy peteĩva mokõive jeikeha ñemohendarã omoporãvéva iñemohenda ha jeiko umi elemento HTML rehegua . Umi cuadro de verificación niko ojeporavo hag̃ua peteĩ térã heta opción peteĩ lista-pe, ha umi radio katu ojeporavo hag̃ua peteĩ opción heta apytégui.

Ojeguerohory umi casilla de verificación ha radio oñemboykéva. Pe disabledatributo omoĩta peteĩ saꞌi hesakãvéva oipytyvõ hag̃ua ohechauka hag̃ua mbaꞌeichaitépa oĩ pe entrada.

Umi vore’i ha radio botón oipytyvõ formulario jegueroviapy HTML rehegua ha ome’ẽ etiqueta mbyky ha ojeikekuaahápe. Upéicha rupi, ñande <input>s ha <label>s ha e elemento hermanokuéra rehegua ojoavyva petet petet <input>ryepýpe <label>. Kóva haꞌehína ñeꞌepykuaave michĩmi remombeꞌuvaꞌerãháicha idha forumi atributo rembojoaju hag̃ua <input>ha <label>.

Por defecto (oñemboguapy) .

Por defecto, oimeraẽ número de casilla de verificación ha radio ha’éva joyke’y pya’e oñembojoajúta verticalmente ha oñemboja’óta hekopete .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>

En línea rehegua

Embojoaju umi casilla térã radio peteĩ fila horizontal-pe emoĩvo .form-check-inlineoimeraẽva .form-check.

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

Etiquetas ÿre

Oñemoĩve .position-staticumi entrada ryepýpe .form-checkndorekóiva mba’eveichagua etiqueta jehaipyre. Penemandu’áke peme’ẽ hag̃ua gueteri algún tipo de téra ojeikekuaahápe umi tecnología oipytyvõvape g̃uarã (techapyrã, ojeporúvo 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>

Ta'ãnga

Bootstrap ojepuru guive display: blockha width: 100%haimete opaite ñande control formulario-pe, umi formulario oñemboguapyvaꞌerã por defecto verticalmente. Ikatu ojepuru mboꞌepy ambuéva oñemoambue hag̃ua ko ñemohenda peteĩ formulario rehegua.

Oñemoheñói atykuéra

Pe .form-groupclase haꞌehína pe tape ndahasýiva oñembojoapy hag̃ua algún estructura umi formulario-pe. Omeꞌe peteĩ clase flexible omokyreꞌeva agrupación hekopete etiqueta, control, jehaipyre pytyvõ opcional ha marandu formulario validación rehegua. Por defecto ojeporu añoite margin-bottom, ha katu oipyhy estilo adicional .form-inlineoñeikotevẽháicha. Eipuru <fieldset>s, <div>s térã haimete oimeraẽ ambue elemento ndive.

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

Formulario cuadrícula rehegua

Ikatu oñemopuꞌa umi formulario ikomplikadovéva ojeporúvo ñande clase cuadrícula rehegua. Eipuru koꞌãva umi formulario ñemohendarã oikotevẽva heta vore, ipypuku iñambuéva ha opción alineación rehegua ambuéva.

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

Forma fila rehegua

Ikatu avei embohasa .row, .form-rowpeteĩ variación ore fila cuadrícula estándar rehegua omboykéva umi canalización columna por defecto rehegua umi diseño ojejokóva ha ikompactovévape g̃uarã.

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

Ikatu avei ojejapo umi diseño ikomplikadovéva sistema de rejilla rupive.

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

Forma horizontal rehegua

Ejapo formulario horizontal cuadrícula reheve emoĩvo .rowmboꞌepy emohenda hag̃ua aty ha eipuru .col-*-*mboꞌepy emombeꞌu hag̃ua ne etiqueta ha control ipypukukue. Ejesareko katuete emoĩve .col-form-labelhag̃ua nde <label>s-pe avei ikatu hag̃uáicha oñecentra verticalmente umi control formulario ojoajúva ndive.

Sapy’ánte, ikatu tekotevẽ reipuru umi utilidad margen térã relleno rehegua rejapo hag̃ua upe alineación perfecta reikotevẽva. Techapyrã, roipeꞌa pe padding-topore etiqueta entrada radio apilado-pe oñemohenda porãve hag̃ua jehaipyre línea base.

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

Eipuru katuete .col-form-label-smtérã .col-form-label-lgnde <label>s térã <legend>s-pe esegui porã hag̃ua .form-control-lgha tuichakue .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>

Dimensionamiento de columna rehegua

Ohechaukaháicha umi techapyrã ohasavaꞌekuépe, ore sistema cuadrícula rehegua oheja ndéve remoĩ oimeraẽva .cols papapy peteĩ .rowtérã .form-row. Omboja'óta hikuái peteĩchaite ijapytepekuéra pe ancho ojeguerekóva. Ikatu avei eiporavo peteĩ subconjunto nde columnakuéragui ejagarra hag̃ua hetave térã sa’ive espacio, umi .cols hembýva katu omboja’o joja hembýva, umi clase columna específica reheve ha’eháicha .col-7.

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

Auto-dimensionamiento rehegua

Pe techapyrã oĩva iguýpe oipuru peteĩ utilidad flexbox oñecentra hag̃ua verticalmente umi contenido ha oñemoambue .colikatu .col-autohag̃uáicha ne columnakuéra ogueraha heta espacio oñeikotevẽháicha añoite. Ñamoĩ ambue hendáicha, pe columna tuichakue ijeheguiete umi mbaꞌe oĩvare.

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

Upéi ikatu embojehe’a jey upéva peteĩ jey umi clase columna tamaño rehegua ndive.

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

Ha katuete oipytyvõ umi control formulario personalizado .

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

Umi formulario en línea rehegua

Eipuru .form-inlinemboꞌepy ehechauka hag̃ua peteĩ serie etiqueta, control formulario ha botón rehegua peteĩ fila horizontal-pe. Umi control formulario rehegua umi formulario en línea ryepýpe iñambue’imi umi estado por defecto orekóvagui.

  • Umi control haꞌehína display: flex, omboguejýva oimeraẽva HTML espacio morotĩ ha ohejáva ndéve emeꞌe hag̃ua control alineación rehegua espaciado ha flexbox purupyrã reheve .
  • Umi control ha entrada aty ohupyty width: autoomboyke hag̃ua Bootstrap por defecto width: 100%.
  • Umi control ojekuaa línea-pe añoite umi jehechaukaha ipukúvape 576px jepe oñemboheko hag̃ua umi jehechaukaha ijyvyku’íva tembipuru’i móvil-pe.

Ikatu tekotevẽ rembohovái manualmente umi control formulario peteĩteĩva ipekue ha alineación rehegua umi utilidad espaciado rehegua ndive (ojehechaukaháicha iguýpe). Ipahápe, eñangareko akóinte emoĩ <label>hag̃ua peteĩ peteĩteĩva formulario control ndive, jepe tekotevẽ remokañy umi tapicha ndaha’éiva pantalla lector-gui .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>

Avei oñepytyvõ umi control ha selección formulario personalizado rehegua.

<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>
Umi alternativa umi etiqueta kañymby rehegua

Umi tecnología oipytyvõva ha’eháicha umi pantalla lector oguerekóta apañuãi ne formulario-kuéra ndive neremoĩriramo peteĩ etiqueta opaite entrada-pe g̃uarã. Koꞌã formulario inline-pe g̃uarã, ikatu emokañy umi etiqueta eipurúvo .sr-onlymboꞌepy. Oĩ ambue método alternativo oñemeꞌe hag̃ua peteĩ etiqueta umi tecnología oipytyvõvape g̃uarã, haꞌeháicha pe aria-label, aria-labelledbytérã titleatributo. Ndaipóriramo ni peteĩva koꞌãvagui, umi tecnología oipytyvõva ikatu recurri oipuru hag̃ua pe placeholderatributo, oĩramo, ha katu eñatendéke noñemoñeꞌeiha ojeporu placeholderhag̃ua ambue método etiquetado rehegua ñemyengoviarã.

Ñe’ẽñemi pytyvõrã

Jehaipyre pytyvõrã nivel bloque rehegua umi formulario-pe ikatu ojejapo ojeporúvo .form-text(ojekuaavaꞌekue yma .help-blockv3-peguáicha). Jehaipyre pytyvõrã en línea ikatu oñemboguata flexiblemente ojeporúvo oimeraẽ elemento HTML en línea ha clase utilidad rehegua haꞌeháicha .text-muted.

Ombojoaju jehaipyre pytyvõrã umi control formulario rehegua ndive

Jehaipyre pytyvõrã oñembojoaju vaꞌerã hesakã porãme control formulario rehegua ojoajúva aria-describedbyatributo jepuru rehe. Kóva oasegurava’erã umi tecnología oipytyvõva —ha’eháicha umi lector de pantalla— oikuaaukáta ko jehaipyre pytyvõrã puruhára oñecentra térã oike jave control-pe.

Jehaipyre pytyvõrã oĩva umi entrada guýpe ikatu oñemboguapy estilo reheve .form-text. Ko mboꞌepype oike display: blockha omoĩve michĩmi margen yvategua ojejapo hag̃ua espaciado ndahasýiva umi entrada yvateguágui.

Ne ñe’ẽñemi ipuku va’erã 8-20 tai, oguerekova’erã tai ha papapy, ha ndoguerekóiva’erã espacio, tai especial térã emoji. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Jehaipyre vore ryepýpe ikatu oipuru oimeraẽva elemento HTML vore ryepýpegua típico (tahaꞌe peteĩ <small>, <span>, térã ambue mbaꞌe) mbaꞌeve ndoguerekóiva peteĩ clase utilidad rehegua.

Ipukukue va’erã 8-20 tai. 
<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>

Umi formulario discapacitado rehegua

Emoĩ disabledatributo booleano peteĩ jeikepyre rehe ani hag̃ua puruhára joaju ha ojehechauka hag̃ua hesakãve hag̃ua.

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

Emoĩ disabledatributo peteĩ <fieldset>-pe embogue hag̃ua opaite control oĩva hyepýpe.

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

Umi kundahára oguereko opaite control formulario nativo rehegua ( <input>, <select>, ha <button>elemento) peteĩ ryepýpe <fieldset disabled>oñemboykévaicha, ojokóva mokõive teclado ha mouse joaju hesekuéra.

Ha katu, ne formulario oguerekóramo avei umi elemento ojoguáva botón personalizado-pe ha’eháicha <a ... class="btn btn-*">, ko’ãvape oñeme’ẽta peteĩ estilo pointer-events: none. Ojehechakuaaháicha pe sección estado desactivado rehegua umi botón-pe g̃uarã (ha específicamente pe subsección-pe umi elemento anclaje rehegua), ko CSS mbaꞌekuaarã neíra gueteri oñemboheko ha ndojeguerohorýipaite Internet Explorer 10. Umi control oñemopyendáva ancla rehe avei oĩta gueteri gueteri enfocables ha operables ojeporúvo teclado. Emoambueva’erã manualmente ko’ã control emoĩvo tabindex="-1"ani hag̃ua ohupyty enfoque ha aria-disabled="disabled"eseñala hag̃ua estado orekóva umi tecnología oipytyvõvape.

Navegador kurusu rehegua joaju

Bootstrap oipurútaramo jepe ko’ã estilo opaite kundahárape, Internet Explorer 11 ha iguýpe ndoipytyvõiete disabledatributo peteĩ <fieldset>. Eipuru JavaScript jeporupyre embogue hag̃ua ñanduti renda ko’ã kundahárape.

Validación rehegua

Eme’ẽ ñe’ẽñemi ivaliosoitéva, ojejapokuaava ne puruhárape HTML5 formulario jegueroviapy reheve– ojeguerekóva opaite ore kundahára oipytyvõvape . Eiporavo kundahára ñe’ẽñemi jegueroviapyrã ñepyrũrã apytégui, térã emoañetéva marandu jeporupyre ore mbo’esyry oñemboguapýva ha JavaScript ñepyrũrã ndive.

Roikuaa ko’áĝa umi estilo ha tembipuru’i jegueroviapy personalizado lado cliente-pegua ndojeikekuaái, ndojehecháigui umi tecnología oipytyvõvape. Romba’apo aja peteĩ solución rehe, romomarandu reipuru hag̃ua opción servidor-pegua térã kundahára jegueroviapyrã ñepyrũrã.

Mba’éichapa omba’apo

Ko’ápe ojehechauka mba’éichapa omba’apo formulario jegueroviauka Bootstrap ndive:

  • HTML formulario jegueroviapyrã ojeporu CSS mokõi pseudo-clase rupive, :invalidha :valid. Ojeporu <input>, <select>, ha <textarea>elemento-kuéra rehe.
  • Bootstrap ombohape umi :invalidha :validestilo mbo’esyry túvape .was-validated, jepivegua ojeporúva <form>. Nda’upéichairamo, oimeraẽva tenda oñeikotevẽva valor’ỹre ojehechauka ndovaléiha página jegueraha jave. Péicha, ikatu eiporavo araka’épa emomba’apova’erã (jepivegua oñeha’ã rire oñemondo formulario).
  • Oñemohendajey hag̃ua formulario jehechauka (techapyrã, umi formulario ñembohasa dinámico rehegua oipurúramo AJAX), eipeꞌa .was-validatedmboꞌepy pe <form>jey ñembohasa rire.
  • Peteĩ fallback ramo, .is-invalidha .is-validumi mbo’esyry ikatu ojeporu umi pseudo-clase rangue servidor lado jegueroviarã . Ha’ekuéra noikotevẽi peteĩ .was-validatedclase tuvakuéra rehegua.
  • Ojejokógui mbaꞌeichaitépa ombaꞌapo CSS, ndaikatúi (koꞌág̃aite) ñamoĩ estilo peteĩ <label>oúva peteĩ control formulario mboyve DOM-pe JavaScript jeporupyre pytyvõꞌeỹre.
  • Opaite kundahára koꞌag̃agua oipytyvõ API jegueroviapyrã jejopy rehegua , peteĩ serie JavaScript mbaꞌekuaarã rehegua oñemboaje hag̃ua umi control formulario rehegua.
  • Marandu ñe’ẽñemi rehegua ikatu oipuru kundahára ñembohekorã (iñambuéva peteĩteĩva kundahárape g̃uarã, ha ndojejapóiva estilo CSS rupive) térã ñande estilo ñe’ẽñemi jeporupyre HTML ha CSS ambuéva reheve.
  • Ikatu eme’ẽ marandu jegueroviapyrã jeporupyre ndive setCustomValidityJavaScript-pe.

Upéva reheve, ehecha ko’ã demostración ore estilo validación formulario personalizado-pe g̃uarã, clase opcional lado servidor rehegua ha navegador por defecto.

Estilos personalizados rehegua

Marandu jegueroviapyrã formulario Bootstrap jeporupyre rehegua, tekotevẽta emoĩ novalidateatributo booleano nde <form>. Kóva ombogue kundahára ñe’ẽñemi ñe’ẽmondo ñepyrũrã, ha katu ome’ẽ gueteri jeike umi API formulario jegueroviapyrãme JavaScript-pe. Eñeha’ã emondo pe formulario oĩva ko’ápe; ore JavaScript ojokóta pe botón ñemondo ha ombohasáta ndéve ñe’ẽñemi. Eñeha’ãvo emondo, rehecháta umi :invalidha :validestilo ojeporúva ne formulario control-kuérape.

Umi estilo ñe’ẽñemi jeporupyre oipuru sa’y jeporupyre, rembe’y, estilo enfoque ha icono fondo rehegua oikuaauka porãve hag̃ua ñe’ẽñemi. Umi icono fondo rehegua <select>s-pe g̃uarã ojeguereko , ndive añoite .custom-select, ha ndahaꞌei .form-control.

¡Ojehecha porã!
¡Ojehecha porã!
Por favor, eme'ê peteî tavaguasu ovale.
Eiporavo peteĩ estado añetegua.
Por favor, eme'ẽ peteĩ cremallera válida.
Reñemoĩva’erã peteĩ ñe’ẽme remondo mboyve. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

Navegador rehegua ñemboheko

¿Ndereinteresái marandu ñe’ẽñemi jegueroviapyrã jeporupyre térã ehai JavaScript emoambue hag̃ua formulario reko? Opa mba’e iporãva, ikatu reipuru umi kundahára ñepyrũrã. Eñeha’ã emondo pe formulario oĩva ko’ápe. Ojesarekóva ne kundahára ha SO rehe, rehecháta peteĩ estilo iñambue’imiva ñe’ẽñemi rehegua.

Ko’ã ñe’ẽñemi estilo ndaikatúiramo jepe oñemboheko CSS ndive, ikatu gueteri emohenda ñe’ẽñemi jehaipyre JavaScript rupive.

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

Servidor ykére

Ro’e porã eipuru hag̃ua jegueroviauka cliente ykére, ha katu reikotevẽramo jegueroviauka servidor ykére, ikatu ehechauka umi formulario tenda ndovaléiva ha añetegua .is-invalidha ndive .is-valid. Ñañamindu’u .invalid-feedbackoipytyvõha avei ko’ã mbo’esyry ndive.

Umi tenda ndoikóivape g̃uarã, eñangareko pe marandu ñe’ẽñemi/jejavy rehegua ndoikóiva oñembojoaju hag̃ua tenda vore’i iñimportánteva ndive eipurúvo aria-describedby. Ko atributo oheja ojejapo hag̃ua referencia hetave peteĩvagui id, oiméramo pe campo oapuntámava texto formulario adicional-pe.

¡Ojehecha porã!
¡Ojehecha porã!
Por favor, eme'ê peteî tavaguasu ovale.
Eiporavo peteĩ estado añetegua.
Por favor, eme'ẽ peteĩ cremallera válida.
Reñemoĩva’erã peteĩ ñe’ẽme remondo mboyve. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Umi elemento oipytyvõva

Umi estilo validación rehegua ojeguereko koꞌã control ha componente formulario rehegua:

  • <input>s ha <textarea>s ndive.form-control
  • <select>s ndive .form-controltérã.custom-select
  • .form-checks
  • .custom-checkboxs ha .custom-radios
  • .custom-file
Emoinge peteĩ marandu textarea-pe.
Techapyrã jehaipyre ñe’ẽñemi ndoikóiva
Hetave techapyrã jehaipyre ñe’ẽñemi ndovaléiva
Techapyrã ñe’ẽñemi jeporavo jeporupyre ndovaléiva
Techapyrã vore jeporupyre ñe’ẽñemi ndovaléiva
@ .
Techapyrã ñe’ẽñemi aty jeike rehegua ndovaléiva
Techapyrã ñe’ẽñemi aty jeike rehegua ndovaléiva
Techapyrã ñe’ẽñemi aty jeike rehegua ndovaléiva 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

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

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

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

Tembipururã ñe’ẽmondo

Nde formulario ñemohenda ohejáramo, ikatu embohasa umi .{valid|invalid}-feedbackmbo’esyry .{valid|invalid}-tooltipmbo’esyry rehegua ohechauka hag̃ua ñe’ẽñemi jegueroviapyrã peteĩ tembipuru’i ñe’ẽmondo estilo-pe. Ejeasegura eguereko peteĩ túva orekóva position: relativehese posicionamiento consejo de herramientas-pe g̃uarã. Pe techapyrã iguýpe, ore mbo’esyry columna rehegua oguerekóma kóva, ha katu ne proyecto ikatu oikotevẽ peteĩ configuración alternativa.

¡Ojehecha porã!
¡Ojehecha porã!
Por favor, eme'ê peteî tavaguasu ovale.
Eiporavo peteĩ estado añetegua.
Por favor, eme'ẽ peteĩ cremallera válida. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Personalización rehegua

Umi estado validación rehegua ikatu oñemboheko Sass rupive $form-validation-statesmapa ndive. Oĩva ore _variables.scssvore’ípe, ko Sass mapa ojejapo bucle-pe ojejapo hag̃ua umi estado valid/ invalidvalidación por defecto. Oike peteĩ mapa anidado oñemboheko hag̃ua peteĩteĩva estado color ha icono. Ndaipóriramo jepe ambue estado oipytyvõva kundahára, umi oipurúva estilo personalizado ikatu omoĩve fácilmente formulario ñe’ẽñemi ikomplikadovéva.

Eñatendéke ndoro’eporãiha emohenda hag̃ua ko’ã mba’ekuaarã remoambue’ỹre avei form-validation-statemixin.

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

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

Entrada aty jegueroviapyrã

Ojekuaa hag̃ua mbaꞌe elemento-pa oikotevẽ esquina redondeada peteĩ entrada aty ryepýpe oguerekóva validación, peteĩ entrada aty oikotevẽ peteĩ .has-validationclase adicional.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@ .
Eiporavo peteĩ puruhára réra.

Umi formulario personalizado rehegua

Hetave hag̃ua ñemboheko ha kundahára joaju kurusu rehegua, eipuru ore elemento formulario jeporupyre completamente emyengovia hag̃ua kundahára ñembohekorã. Oñemopu’ã hikuái marcado semántico ha accesible ári, upévare ha’e reemplazo sólido oimeraẽ control formulario por defecto-pe g̃uarã.

Umi cuadro de verificación ha umi rrádio

Káda casilla de verificación ha radio <input>ha <label>emparejamiento oñembojere peteĩ <div>-pe ojejapo hag̃ua ñande control personalizado. Estructuralmente, kóva ha’e peteĩchagua enfoque ñande default .form-check.

Roipuru pe selector hermano rehegua ( ~) opaite ore <input>estado-pe g̃uarã —ha’eháicha :checked—ro’estilo porã hag̃ua ore indicador formulario personalizado. Oñembojoajúramo .custom-control-labelmboꞌepy ndive, ikatu avei ñamoĩ estilo jehaipyre peteĩteĩva mbaꞌe rehegua oñemopyendáva <input>'s estado rehe.

Ñañomi pe por defecto <input>ndive opacityha jaipuru pe .custom-control-labelñamopu’ã hag̃ua peteĩ formulario jeporupyre jehechaukaha pyahu hendaguépe ::beforeha ndive ::after. Ñambyasy ndaikatúi ñamopu’ã peteĩ jeporupyre pe añóntegui <input>porque CSS’s contentnomba’apói upe elemento rehe.

Umi estado ojehechava’ekuépe, jaipuru base64 SVG techaukaha oñemboguapýva Open Iconic -gui . Kóva omeꞌe oréve control iporãvéva estilo ha ñemohendarã kundahára ha tembipurukuéra apytépe.

Umi jesarekoha

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

Umi vore’i jeporupyre ikatu avei oipuru pe :indeterminateclase pseudo oñemboguapy jave manóme JavaScript rupive (ndaipóri atributo HTML ojeguerekóva ojehechauka hag̃ua).

Oipurúramo jQuery, peteĩ mba’e ko’ãichagua ohupytyva’erã:

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

Radio-kuéra rehegua

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

En línea rehegua

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

Ñemonandi

Ikatu avei oñembogue umi casilla de verificación personalizada ha umi radio. Oñemoĩ disabledatributo booleano pe <input>ha pe jehechaukaha jeporupyre ha etiqueta ñemombeꞌupy oñemboguapyvaꞌerã ijeheguiete.

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

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

Umi interruptor rehegua

Peteĩ mboajepyréva oguereko peteĩ jehechaukaha jeporupyre jeguerahauka ha katu oipuru .custom-switchmbo’esyry ohechauka hag̃ua peteĩ mboajepyréva. Umi conmutador oipytyvõ avei pe disabledatributo.

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

Eiporavo menú

Umi menú jeporupyre <select>oikotevẽ peteĩ clase jeporupyre añoite, .custom-selectomoñepyrũ hag̃ua umi estilo jeporupyre. Umi estilo jeporupyre oñemboty <select>'s jehechauka ñepyrũme ha ndaikatúi omoambue <option>s kundahára ñemboty rupi.

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

Ikatu avei eiporavo umi jeporavopyre michĩ ha tuicháva apytégui ombojoaju hag̃ua ore jehaipyre jeike peteĩchagua tuichakue.

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

Avei multipleoñepytyvõ pe atributo:

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

Oĩháicha pe sizeatributo:

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

Teko

Ejapo <input type="range">controles personalizados rehegua .custom-range. Pe pista (fondo) ha pulgar (valor) mokõivéva oñembosakoꞌi ojehechauka hag̃ua peteĩchaite umi kundahára apytépe. IE ha Firefox añoite oipytyvõháicha “omyenyhẽ hag̃ua” ipista pulgar akatúa térã akatúa guive peteĩ tape ohechauka hag̃ua jehechahápe mba’éichapa oho, ko’áĝa ndoroipytyvõi.

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

Umi entrada rango rehegua oguereko valor implícito minha max— 0ha 100, rehegua. Ikatu emombe’u mba’ekuaarã pyahu umi oipurúvape g̃uarã umi atributo minha .max

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

Por defecto, umi entrada rango rehegua “snap” umi valor entero-pe. Kóva oñemoambue hag̃ua, ikatu emombe’u peteĩ stepmba’ekuaarã. Pe techapyrá oíva iguýpe, ñambohetave jey umi paso jaipurúvo step="0.5".

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

Archivo kundahára

Pe plugin oñembohekopyréva omoingove hag̃ua vore jeike jeporupyre: bs-custom-file-input , upéva ha’e pe jaipurúva ko’áĝa ko’ápe ñande kuatiaroguépe.

Pe vore jeike haꞌehína pe gnarlyvéva aty apytégui ha oikotevẽ JavaScript ambuéva embojoajuséramo chupekuéra funcional Eiporavo vore... ha vore réra jehaipyre ojeporavóva ndive.

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

Ñañomi vore por defecto <input>vía opacityha upéva rangue estilo pe <label>. Pe botón ojejapo ha oñemohenda ::after. Ipahápe, rodeclara peteĩ widthha heightpe <input>rehe espaciado hekopete contenido ojerévape g̃uarã.

Oñembohasa térã oñemboheko umi vore SCSS rupive

Pe :lang()pseudo-clase ojepuru ojeheja hag̃ua oñembohasa pe jehaipyre “Browse” ambue ñe’ẽme. Emboyke térã emoĩve jeikepyre $custom-file-textSass mbaꞌekuaarãme ñeꞌepykuaaty oñembohekopyréva ha umi cadena localizada reheve. Umi cuerda inglés-pegua ikatu oñemboheko upéicha avei. Techapyrã, péina ápe mba'éichapa ikatu oñembojoapy peteĩ ñe'ẽasa castellano (castellano ñe'ẽ código ha'e es):

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

Ko’ápe oĩ lang(es)tembiaporãme vore jeike jeporupyre rehegua peteĩ ñe’ẽasa castellano-pe g̃uarã:

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

Tekotevẽta emohenda hekopete ne kuatiañe’ẽ ñe’ẽ (térã yvyra’i michĩva) ojehechauka hag̃ua jehaipyre hekopete. Kóva ikatu ojejapo ojeporúvo atributolang elemento rehegua<html> térã Content-LanguageHTTP iñakãrapuꞌa , ambue tape apytépe.

Oñembohasa térã oñemboheko umi vore HTML rupive

Bootstrap omeꞌe avei peteĩ tape oñembohasa hag̃ua “Browse” jehaipyre HTML-pe data-browseatributo reheve ikatúva oñembojoapy etiqueta jeike jeporupyre rehegua (techapyrã holandés-pe):

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