Umi Formulario rehegua

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

Ikatu ojejapo jehaipyre formulario nivel bloque térã nivel inline rehegua ojeporúvo .form-text.

Formulario jehaipyre umi entrada guýpe ikatu oñemboguapy estilo reheve .form-text. Ojeporútaramo peteĩ elemento nivel bloque rehegua, oñembojoapy peteĩ margen yvategua ojejapo hag̃ua espaciado ndahasýiva umi entrada yvateguágui.

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

Jehaipyre vore ryepýpe ikatu oipuru oimeraẽva elemento HTML vore ryepýpegua típico (tahaꞌe peteĩ <span>, <small>, térã ambue mbaꞌe) mbaꞌeve ndoguerekóiva .form-textmboꞌepy.

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

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. Umi kundahára oguereko opaite control formulario nativo rehegua ( <input>, <select>, ha <button>elemento) peteĩ ryepýpe <fieldset disabled>oñemboykévaicha, ojokóva mokõive teclado ha mouse joaju hesekuéra.

Ha katu, ne formulario oguerekóramo avei umi elemento ojoguáva botón personalizado-pe ha’eháicha <a class="btn btn-*">...</a>, ko’ãvape oñeme’ẽta peteĩ estilo añoite pointer-events: none, he’iséva ha’eha gueteri enfoque ha omba’apokuaa ojeporúvo teclado. Ko kásope, remoambuevaꞌerã manualmente koꞌã control remoĩvo tabindex="-1"ani hag̃ua ohupyty enfoque ha aria-disabled="disabled"reikuaauka hag̃ua estado orekóva umi tecnología oipytyvõvape.

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

Ojeasegura opaite control formulario rehegua oguerekoha peteĩ téra ojeikekuaahápe hekopete ikatu hag̃uáicha oñembohasa hembipotápe umi oiporúvape umi tecnología oipytyvõvape. Mbaꞌeichaitépa isensíllova ojehupyty hag̃ua kóva haꞌehína ojepuru peteĩ <label>elemento, térã —umi botón kásope— oñemoinge hag̃ua jehaipyre suficientemente descriptiva <button>...</button>contenido ryepýpe.

Umi situación ndaikatúihápe oñemoĩ peteĩ <label>contenido jehaipyre ojehecháva térã oñemohenda porãvape g̃uarã, oĩ tape ambuéva oñeme’ẽ hag̃ua gueteri peteĩ téra ojeikekuaahápe, ha’eháicha:

• <label>umi elemento kañymby ojeporúvo .visually-hiddenmbo’esyry
• Oapuntáva peteĩ elemento oĩmava ikatúva oactua etiqueta ramo oipurúvoaria-labelledby
• Ome’ẽvo peteĩ titleatributo
• Oñemohenda hesakã porãme téra ojeikekuaahápe peteĩ elemento oipurúvoaria-label

Ndaipóriramo ni peteĩva koꞌãvagui, umi tecnología pytyvõrã ikatu recurri oipuru hag̃ua placeholderatributo peteĩ fallback ramo pe téra ojeikekuaávape g̃uarã on <input>ha <textarea>elemento-kuérape g̃uarã. Umi techapyrã oĩva ko atype ome’ẽ mbovymi enfoque oñesugeríva, káso específico-pe.

Oipurúramo jepe contenido kañymby ojehecháva ( .visually-hidden, aria-label, ha placeholdercontenido jepe, okañýva peteĩ campo formulario oguerekóma guive contenido) oipytyvõta umi tecnología pytyvõhára puruhárape, ndaipóriramo jehaipyre etiqueta ojehecháva ikatu gueteri haꞌe problema ciertos usuario-pe g̃uarã. Oĩ forma etiqueta ojehecháva haꞌehína generalmente pe enfoque iporãvéva, ojeike ha ojepurukuaa hag̃ua.

Sass rehegua

Heta variable forma rehegua oñemohenda peteĩ nivel general-pe ojepuru jey ha oñembotuichave hag̃ua umi componente forma rehegua peteĩteĩva rupive. Ko'ãva rehechavéta ha'eháicha $btn-input-*ha $input-*variable.

Variables rehegua

$btn-input-*umi variable haꞌehína umi variable global oñembojaꞌova ñande botón ha ñande componente formulario apytépe. Ko’ãva rejuhúta py’ỹi oñeme’ẽjeýva valor ramo ambue variable componente-pe g̃uarã.

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