Saltar al contenido principal Salta a docs navegación
in English

Pallay

Formularioykikunaman wakin estructurata quy —inline kaqmanta horizontal kaqman sapanchasqa rejilla implementacionkunaman— formulario churana akllanaykuwan.

Kay p'anqapi

Formas

Sapa huñu formulario pampakuna huk <form>elementopi tiyanan tiyan. Bootstrap mana elementopaq ñawpaqmanta ruwasqa estilota qunchu <form>, ichaqa wakin kallpasapa maskaq ruwanakuna kanku chaymanta ñawpaqmanta qusqa.

  • ¿Musuq maskaq formulariokunaman? Yuyaykuy MDN formulario documentokuna qhawayta huk qhawaypaq chaymanta hunt'asqa lista kaqpaq atributos kaqkunamanta.
  • <button>s dentro de un <form>default a type="submit", chayrayku kallpachakuy específico kanaykipaq chaymanta sapa kuti huk type.
  • Huk formulario ukhupi sapa formulario elementota mana llamk'achiyta atinki chaymanta disabledatributo kaqwan <form>.

Bootstrap ruwasqa display: blockchaymanta width: 100%yaqa llapa formulario kamachiyniykuman, formulariokuna ñawpaqmanta sayaqpi pila kanqa. Yapa clasekuna llamk'achiy atikunman kay churayta sapa formulario kaqpi tikranapaq.

Utilidades

Margen utilidadkuna aswan facil ñan wakin estructura formulariokunaman yapanapaq. Paykunaqa etiquetakuna, kamachiykuna, akllana formulario qillqa chaymanta formulario chiqaqchay willakuypa sapsi huñuyta qunku. Utilidades kaqman k'askanayta yuyaychayku margin-bottom, chaymanta huk chiqan ñanta tukuy formulario kaqpi llamk'achiyta huklla kananpaq.

Ama hina kaspa formularioykikunata imayna munasqaykiman hina ruway, <fieldset>s, <div>s utaq yaqa mayqin elementowanpas.

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

Formulario de rejilla

Aswan sasachakuyniyuq formulariokuna ruwakunman rejilla claseykuwan. Kaykunata llamk'achiy formulario churanapaq mayqinkunachus achka columnakuna, imaymana anchokuna chaymanta yapasqa chiqanchay akllanakuna mañanku. Sass $enable-grid-classestikraq atichisqa kananta munan (ñawpaqmanta llamk'achisqa).

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

Canales

By adding gutter modifier classes , atikunki controlta canal ancho kaqpi chaymanta inline kaqpi hinallataq bloque dirección kaqpi. Hinallataq $enable-grid-classesSass tikraq atichisqa kananta munan (kanchasqa ñawpaqmanta).

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

Aswan sasachakuyniyuq churaykunapas ruwakunmanmi chay sistema de rejilla nisqawan.

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <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>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

Forma horizontal nisqa

Rejillawan horizontal formulariokunata ruway, .rowclaseta huñukuna ruwanapaq yapaspa chaymanta .col-*-*clasekunata llamk'achispa etiquetakunaykipa chaymanta controlkunaykipa anchunta willanaykipaq. Aswan allinta sniykiman yapay .col-form-labelchaymanta <label>chaymanta paykuna verticalmente chawpichasqa kanku paykunap asociado formulario kamachiyninkunawan.

Wakin kutikunapi, ichapas margen utaq relleno utilidadkuna llamk'achinayki tiyan chay allin alineación necesitasqaykita ruwanaykipaq. Ejemplopaq, chay padding-topon our pilasqa radio yaykuykuna etiquetata hurqurqayku aswan allin qillqa base linea chiqanchaypaq.

Radiokuna 
<form>
  <div class="row mb-3">
    <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="row mb-3">
    <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="row mb-3">
    <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>
  </fieldset>
  <div class="row mb-3">
    <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Dimensionamiento de etiqueta de forma horizontal nisqa

Aseguray .col-form-label-smutaq s utaq sniykiman .col-form-label-lgallinta qatipanaykipaq chaymanta .<label><legend>.form-control-lg.form-control-sm

<div class="row mb-3">
  <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="row mb-3">
  <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="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>

Dimensionamiento de columna

Ñawpaq rikch'anakunapi rikuchisqa hina, rejilla sistemaykuqa mayqin yupay .cols kaqtapas huk ukhupi churayta atikun .row. Paykunaqa chay tarikuq anchota kaqllata paykunapura rakinqaku. Hinallataq huk huch'uy huñu columnakunaykimanta akllayta atikunki aswan utaq aswan espaciota hap'inaykipaq, puchuq .cols kaqlla puchuqninta rakin, sapanchasqa columna clasekuna hina .col-sm-7.

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

Auto-dimensionamiento

Uraypi ejemplo huk flexbox yanapakuyta llamk'achin verticalmente chawpichaypaq contenidokunata chaymanta tikran .colchaymanta .col-autocolumnakunayki necesitasqanmanhinalla espaciota hap'in. Huk rimaypiqa, columnaqa kikinpa sayayninmi imakuna kasqanmanta.

@ . 
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <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">
    <div class="form-check">
      <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">Submit</button>
  </div>
</form>

Chaymanta chayta huk kutitawan chaqruyta atikunki sayay-específica columna clasekunawan.

@ . 
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <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">
    <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">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Formularios en línea

Yachaykunata llamk'achiy .row-cols-*kutichiq horizontal churaykunata ruwanapaq. Canal modificador clasekunata yapaspa , canalkunayuq kasunchik horizontal chaymanta vertical direccionkunapi. K'iti kuyuchina qhawaykunapi, chay .col-12yanapakuykuna formulario kamachiykunata pila chaymanta aswan. Theqa .align-items-centerforma elementokunata chawpiman chiqanchan, .form-checkboxallinta chiqanchayta ruwaspa.

@ . 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>