Formas

Hatun qhawariy

Bootstrap kaqpa formulario kamachiyninkuna mast'arinku Rebooted formulario estilokunaykupi clasekunawan. Kay clasekuna llamk'achiy sapanchasqa qhawayninkuman akllanapaq aswan sapanchasqa ruwaypaq tukuy maskaqkuna chaymanta dispositivokuna kaqpi.

Aswan musuq yaykuna kamachiykuna correo electrónico typechiqaqchay , yupay akllay chaymanta aswan hina llamk'achiy aswan musuq yaykuna kamachiykunamanta llamk'achiy.emailnumber

Kaypi huk utqaylla rikch'ana Bootstrap kaqpa formulario estilokuna rikuchinapaq. Ñawinchayta hinalla ruway documentokuna mañasqa clasekunamanta, formulario churaymanta, hukkunamantapas.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 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>

Forma texto

Bloque-nivel icha inline-nivel formulario qillqaqa .form-text.

Yaykuykuna urapi formulario qillqaqa .form-text. Sichus huk elemento bloque-nivel llamk'achisqa kanqa, huk pata margen yapasqa kanqa mana sasa espaciamiento kaqpaq hawa yaykuykunamanta.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Chiru ukhupi qillqaqa mayqin típico chiru ukhupi HTML elementotapas (huk <span>, <small>, icha huk ima) llamk'achiyta atin mana ima aswan .form-textclase kaqwan.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

Formularios para discapacitados

Huk yaykusqapi boolean laya yapay, disabledllamk'achiq tinkiykuna hark'ananpaq chaymanta aswan k'anchariq rikurinanpaq.

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

disabledHuk kaqman atributota yapay <fieldset>llapa kamachiykunata ukhupi mana llamk'achinapaq. Navegadores llapa nativo forma kamachiykunata ( <input>, <select>, chaymanta <button>elementokuna) a ukhupi <fieldset disabled>mana llamk'achisqa hina qhawanku, iskaynin teclado chaymanta sillu tinkiykuna paykunapi hark'aspa.

Ichaqa, sichus formularioykipas elementokuna botón hina ruwasqa kaqtapas churan kayhina <a class="btn btn-*">...</a>, kaykunaman huk estilolla qusqa kanqa pointer-events: none, niyta munan paykunaqa hinallataq enfocables chaymanta operable teclado kaqwan. Kayhina kaqpi, makiwan kay kamachiykunata tikranayki tiyan yapaspa tabindex="-1"mana enfoqueta chaskinankupaq chaymanta aria-disabled="disabled"yanapakuq tecnologiakunaman estadonkuta señalanankupaq.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Accesibilidad nisqa

Aseguray llapa controles de formulariokuna huk allin yaykuypaq sutiyuq kasqankuta chaymanta chay propósito nisqa yanapakuq tecnologiakuna llamk'aqkunaman chayachiyta atikunman. Aswan sasallawan kayta aypanapaqqa huk <label>elementota llamk'achiymi, icha —botonkuna kaqpi— suficiente sut'inchaq qillqata <button>...</button>contenidomanta huknin hina churaymi.

Situacionkunapaq maypichus mana atikunchu huk rikukuq <label>utaq tupaq qillqa willayta churayta, huk ñankuna kankuraq huk yaykuy atiy suti quypaq, kayhina:

• <label>elementokuna pakasqa .visually-hiddenclase nisqawan
• Huk kachkaq elementota rikuchispa, chaymi huk etiqueta hina ruwayta atinman llamk'achispaaria-labelledby
• titleHuk atributo nisqa quy
• Huk elementopi yaykuy atiy sutita sut'imanta churay llamk'achispaaria-label

Sichus mana mayqinpas kaykunamanta kanchu, yanapakuq tecnologiakuna atributota huk fallback hina llamk'achiyta atinku chaymanta chaymanta elementokuna placeholderyaykuypaq sutipaq . Kay rakipi ejemplokuna huk iskay kimsa yuyaychasqa, caso específico nisqa ruwaykunata qun.<input><textarea>

Sichus rikuy pakasqa contenidota llamk'achiy ( .visually-hidden, aria-label, chaymanta placeholdercontenidotapas, mayqinchus huk kuti huk formulario pampa contenidoyuq kaptin chinkan) yanapakuq tecnologia ruwaqkunata yanapanqa, huk mana rikukuq etiqueta qillqa wakin ruwaqkunapaq sasachakuyniyuqraq kanman. Wakin forma rikukuq etiqueta generalmente aswan allin enfoque kaq, iskaynin yaykuypaq chaymanta llamk'anapaq.

Sass

Achka forma variables nisqakunam huk nivel general nisqapi churasqa kanku sapakama forma componentes nisqakuna kaqmanta llamkachisqa kanankupaq chaymanta mastarisqa kanankupaq. Kaykunata aswan sapa kuti rikunki $btn-input-*hinallataq $input-*variables nisqakunata.

Variables nisqakuna

$btn-input-*variables nisqakunaqa rakisqa global variables nisqakunam kanku botonesniykuwan formulario componentesniykuwan. Kaykunata sapa kuti wak componente-específicos tikraqkunaman chanikuna hina wakmanta churasqa tarinki.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;