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.
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 totype="submit"
, upévare eñeha’ã eime específico ha akóinte emoinge peteĩtype
.- Ikatu embogue opaite elemento formulario rehegua peteĩ formulario ryepýpe
disabled
atributo reheve oĩva<form>
.
Bootstrap ojepuru guive display: block
ha 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-bottom
utilidad 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.
<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-classes
Sass 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-classes
Sass 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 .row
mboꞌ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-label
hag̃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-top
ore 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-sm
térã .col-form-label-lg
nde <label>
s térã <legend>
s-pe esegui porã hag̃ua .form-control-lg
ha tuichakue .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 rehegua
Ohechaukaháicha umi techapyrã ohasavaꞌekuépe, ore sistema cuadrícula rehegua oheja ndéve remoĩ oimeraẽva .col
s 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 .col
s 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 .col
ikatu .col-auto
hag̃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-12
pytyvõ oñemoĩ hag̃ua umi control formulario rehegua ha hetave mbaꞌe. Pe .align-items-center
omohenda umi elemento forma rehegua mbytépe, ojapóvo pe .form-checkbox
alineació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>