in English

Ta'ãnga

Eme’ẽ ne formulario-kuérape peteĩ estructura —inline guive horizontal peve umi implementación cuadrícula personalizada peve— ore opción diseño formulario rehegua ndive.

Ko páhinape

Umi Formulario rehegua

Opaite aty formulario rehegua oikovaꞌerã peteĩ <form>elemento-pe. Bootstrap nome’ẽi estilo por defecto <form>elemento-pe g̃uarã, ha katu oĩ peteĩ mba’ekuaarã kundahára ipu’akapáva oñeme’ẽva por defecto.

¿Ipyahúva umi formulario navegador-pe? Ejepy’amongeta ehesa’ỹijo hag̃ua umi kuatiañe’ẽ formulario MDN rehegua peteĩ jehechapyrã ha lista completa umi atributo ojeguerekóva rehegua.
<button>s peteĩ <form>por defecto ryepýpe to type="submit", upévare eñeha’ã eime específico ha akóinte emoinge peteĩ type.
Ikatu embogue opaite elemento formulario rehegua peteĩ formulario ryepýpe disabledatributo reheve oĩva <form>.

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.

Utilidades rehegua

Umi utilidad margen rehegua haꞌehína tape ndahasýiva oñembojoapy hag̃ua algún estructura umi formulario-pe. Omeꞌe hikuái agrupación básica etiqueta, control, texto formulario opcional ha marandu formulario validación rehegua. Ro’e porã rejejagarra hag̃ua umi margin-bottomutilidad rehe, ha reipuru peteĩ dirección añoite pe formulario pukukue javeve peteĩchaite hag̃ua.

Eñeñandu líbre emopu’ã hag̃ua ne formulariokuéra reipotáicha, <fieldset>s, <div>s térã haimete oimeraẽ ambue elemento reheve.

Tembiecharã etiqueta rehegua

Ambue etiqueta

<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 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. Oikotevẽ $enable-grid-classesSass mbaꞌekuaarã ojehechauka hag̃ua (oñemboguapy hag̃ua por defecto).

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

Oñemoĩvo umi clase modificador canalización rehegua , ikatu oreko control canalización ancho rehe avei en línea ha bloque dirección. Avei oikotevẽ $enable-grid-classesSass mbaꞌekuaarã ojehechauka hag̃ua (oñemboguapy hag̃ua por defecto).

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

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

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

Correo electrónico rehegua

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

Ohechaukaháicha umi techapyrã ohasavaꞌekuépe, ore sistema cuadrícula rehegua oheja ndéve remoĩ oimeraẽva .cols papapy peteĩ .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-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 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 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>

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

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

Umi formulario en línea rehegua

Eipuru umi .row-cols-*mboꞌepy emoheñói hag̃ua diseño horizontal ombohováiva. Oñemoĩvo umi clase modificador canal rehegua , jaguerekóta canalización dirección horizontal ha vertical-pe. Umi jehechaukaha móvil estrecho-pe, umi .col-12pytyvõ oñemoĩ hag̃ua umi control formulario rehegua ha hetave mbaꞌe. Pe .align-items-centeromohenda umi elemento forma rehegua mbytépe, ojapóvo pe .form-checkboxalineación hekopete.

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