Source

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.

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

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

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 tenda’i ha radio oñemboykéva, ha katu oñeme’ẽ hag̃ua peteĩ not-allowedcursor hover-pe túva rehegua <label>, tekotevẽta emoĩ disabledatributo -pe .form-check-input. Pe atributo oñemboykéva omoĩta peteĩ sa’y tesapevéva oipytyvõ hag̃ua ohechauka hag̃ua mba’éichapa oĩ pe entrada.

Umi casilla ha radio jepuru oñemopuꞌa oipytyvõ hag̃ua formulario jegueroviapy HTML rehegua ha omeꞌe hag̃ua 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.

Caja de verificación por defecto rehegua

Ojejokova’ekue vore’i

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

Radio por defecto rehegua

Mokõiha radio por defecto

Radio oñemboykéva

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

1. 1.1

2. 2.1

3 (discapacitados) rehegua .

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

1. 1.1

2. 2.1

3 (discapacitados) rehegua .

<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’ẽha gueteri algún tipo de etiqueta umi tecnología oipytyvõvape g̃uarã (techapyrã, jaipuru 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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

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

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.

Taiñomi 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.

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

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

Advertencia orekóva anclaje

Por defecto, umi kundahára oguerekóta opaite control formulario nativo rehegua ( <input>, <select>ha <button>elemento) a ryepýpe <fieldset disabled>oñemboykévaicha, ojokóvo mokõive teclado ha mouse joaju hesekuéra. Ha katu, nde formulario oguerekóramo avei <a ... class="btn btn-*">elemento, 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-pe g̃uarã), ko CSS mbaꞌekuaarã neíra gueteri oñemboheko ha ndojeguerohorýipaite Internet Explorer 10-pe, ha ndojokomoꞌãi umi teclado puruhárape oĩ hag̃ua ikatúva oenfoka térã omomba’apo ko’ã enlace. Upéicharõ, reime hag̃ua seguro, eipuru JavaScript personalizado embogue hag̃ua ko’ãichagua enlace.

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.

Ko’áĝa romomarandu reipuru hag̃ua umi estilo jegueroviapyrã jeporupyre, umi marandu jegueroviapyrã ñepyrũrã kundahára nativo rehegua ndojehecháigui tapiaite umi tecnología oipytyvõva opaite kundahárape (ojehechakuaavéva, Chrome escritorio ha móvil-pe).

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.

Téra peteĩha

Looks good!

Terajoapy

Looks good!

Tembipuru puruhára réra

@ .

Please choose a username.

Táva

Please provide a valid city.

Teko

Please provide a valid state.

Cremallera rehegua

Please provide a valid zip.

Oñemoĩ peteĩ ñe’ẽme umi término ha condición rehe

You must agree before submitting.

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

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

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

Servidor ykére

Ro’e porã reipuru hag̃ua cliente lado jegueroviapy, ha katu reikotevẽramo 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.

Téra peteĩha

¡Ojehecha porã!

Terajoapy

¡Ojehecha porã!

Tembipuru puruhára réra

@ .

Eiporavo peteĩ puruhára réra.

Táva

Por favor, eme'ê peteî tavaguasu ovale.

Teko

Eme’ẽmi peteĩ estado ovaléva.

Cremallera rehegua

Por favor, eme'ẽ peteĩ cremallera válida.

Oñemoĩ peteĩ ñe’ẽme umi término ha condición rehe

Reñemoĩva’erã peteĩ ñe’ẽme remondo mboyve.

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

Umi elemento oipytyvõva

Ore formulario techapyrã ohechauka s textual nativo <input>yvate, ha katu umi estilo formulario jegueroviapy rehegua oĩ ñande control formulario personalizado-pe g̃uarã, avei.

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

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.

Téra peteĩha

Terajoapy

Tembipuru puruhára réra

@ .

Táva

Teko

Cremallera rehegua

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

Umi formulario personalizado rehegua

Hetave hag̃ua ñemboheko ha kundahára joaju kurusu rehegua, eipuru ore elemento formulario jeporupyreite 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 oñembojere peteĩ <div>peteĩ hermano <span>ndive ojejapo hag̃ua ñande control personalizado ha peteĩ <label>jehaipyre omoirûvape g̃uarã. 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

Ehecháke ko tenda’i jeporupyre

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

Ehecháke ko tenda’i jeporupyre

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

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

Radio-kuéra rehegua

Embohasa ko rrádio jeporupyre

Térã embohasa ko ambue radio personalizada

<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

Embohasa ko rrádio jeporupyre

Térã embohasa ko ambue radio personalizada

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

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

Ehecháke ko tenda’i jeporupyre

Embohasa ko rrádio jeporupyre

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

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.

Techapyrã rango

<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

Techapyrã rango

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

Techapyrã rango

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

Eiporavo archivo

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

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

Archivo Seleccionar rehegua

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

Umi Formulario rehegua

Tembiecharã

Umi control de forma rehegua

Dimensionamiento rehegua

Moñe’ẽrã añoite

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

Insumos de Rango rehegua

Umi cuadro de verificación ha umi rrádio

Por defecto (oñemboguapy) .

En línea rehegua

Etiquetas ÿre

Ta'ãnga

Oñemoheñói atykuéra

Formulario cuadrícula rehegua

Forma fila rehegua

Forma horizontal rehegua

Dimensionamiento etiqueta forma horizontal rehegua

Dimensionamiento de columna rehegua

Auto-dimensionamiento rehegua

Umi formulario en línea rehegua

Umi alternativa umi etiqueta kañymby rehegua

Ñe’ẽñemi pytyvõrã

Ombojoaju jehaipyre pytyvõrã umi control formulario rehegua ndive

Umi formulario discapacitado rehegua

Advertencia orekóva anclaje

Navegador kurusu rehegua joaju

Validación rehegua

Mba’éichapa omba’apo

Estilos personalizados rehegua

Navegador rehegua ñemboheko

Servidor ykére

Umi elemento oipytyvõva

Tembipururã ñe’ẽmondo

Umi formulario personalizado rehegua

Umi cuadro de verificación ha umi rrádio

Umi jesarekoha

Radio-kuéra rehegua

En línea rehegua

Ñemonandi

Eiporavo menú

Teko

Archivo kundahára

Oñembohasa térã oñemboheko umi cadena