ቅጾች

ለቅጽ ቁጥጥር ቅጦች፣ የአቀማመጥ አማራጮች እና የተለያዩ ቅጾችን ለመፍጠር ብጁ ክፍሎች ምሳሌዎች እና የአጠቃቀም መመሪያዎች።

በዚህ ገጽ ላይ

የቅጽ ቁጥጥር የጽሑፍ ግብዓቶችን እና የጽሑፍ ቦታዎችን ለበርካታ ግዛቶች ድጋፍ ያድርጉ።

ይምረጡ ብጁ የመጀመሪያ ገጽታ ያላቸው የአሳሽ ነባሪ ምረጡ ክፍሎችን ያሻሽሉ።

ቼኮች እና ሬዲዮዎች የግቤት አማራጮችን ለመምረጥ የኛን ብጁ የሬዲዮ አዝራሮችን እና አመልካች ሳጥኖችን በቅጾች ይጠቀሙ።

ክልል የአሳሽ ነባሪ ክልል ግብዓቶችን በብጁ ስሪታችን ይተኩ።

የግቤት ቡድን ለተጨማሪ የትርጉም እሴት መለያዎችን እና አዝራሮችን ከግብዓቶችዎ ጋር ያያይዙ።

ተንሳፋፊ መለያዎች በግቤት መስኮችዎ ላይ የሚንሳፈፉ በሚያምር ቀላል የቅጽ መለያዎችን ይፍጠሩ።

አቀማመጥ ከቅጾችዎ ጋር የመስመር ላይ፣ አግድም ወይም ውስብስብ በፍርግርግ ላይ የተመሰረቱ አቀማመጦችን ይፍጠሩ።

ማረጋገጫ ቅጾችዎን በብጁ ወይም ቤተኛ የማረጋገጫ ባህሪያት እና ቅጦች ያረጋግጡ።

አጠቃላይ እይታ

የቡትስትራፕ ቅፅ ቁጥጥሮች ከክፍሎች ጋር ዳግም በተጀመሩ የቅጽ ስልቶቻችን ላይ ይሰፋሉ። በአሳሾች እና በመሳሪያዎች ላይ የበለጠ ወጥነት ያለው ስራ ለመስራት ወደ ብጁ ማሳያዎቻቸው ለመምረጥ እነዚህን ክፍሎች ይጠቀሙ።

typeእንደ ኢሜል ማረጋገጫ፣ የቁጥር ምርጫ እና ሌሎችም ያሉ አዳዲስ የግቤት መቆጣጠሪያዎችን ለመጠቀም በሁሉም ግብዓቶች (ለምሳሌ emailለኢሜይል አድራሻ ወይም numberለቁጥር መረጃ) ተገቢውን ባህሪ መጠቀምዎን ያረጋግጡ ።

የBootstrapን ቅፅ ቅጦችን ለማሳየት ፈጣን ምሳሌ ይኸውና። በሚፈለጉት ክፍሎች፣ የቅጽ አቀማመጥ እና ሌሎች ላይ ለሰነዶች ማንበብ ይቀጥሉ።

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

ቅጽ ጽሑፍ

አግድ-ደረጃ ወይም የመስመር-ደረጃ ቅጽ ጽሑፍ በመጠቀም ሊፈጠር ይችላል .form-text።

የቅጽ ጽሑፍን ከቅጽ መቆጣጠሪያዎች ጋር ማያያዝ

የቅጽ ጽሑፍ ባህሪውን ከመጠቀም ጋር ከሚዛመደው የቅጽ መቆጣጠሪያ ጋር በግልጽ መያያዝ አለበት aria-describedby። ይህ እንደ ስክሪን አንባቢ ያሉ አጋዥ ቴክኖሎጂዎች ተጠቃሚው ትኩረት ሲያደርግ ወይም መቆጣጠሪያው ውስጥ ሲገባ ይህን ቅጽ ጽሁፍ እንደሚያሳውቁ ያረጋግጣል።

ከግብዓቶች በታች የቅጽ ጽሑፍ በ ቅጥ ሊደረግ ይችላል .form-text። የብሎክ-ደረጃ አካል ጥቅም ላይ የሚውል ከሆነ፣ ከላይ ካሉት ግብዓቶች ለቀላል ክፍተት የላይኛው ህዳግ ይታከላል።

ፕስወርድ

የይለፍ ቃልዎ ከ8-20 ቁምፊዎች ርዝመት ያለው፣ ፊደሎችን እና ቁጥሮችን የያዘ እና ክፍተቶችን፣ ልዩ ቁምፊዎችን ወይም ስሜት ገላጭ ምስሎችን መያዝ የለበትም።

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

የውስጠ-መስመር ጽሑፍ ማንኛውንም የተለመደ የውስጠ-መስመር ኤችቲኤምኤል ኤለመንት (ኤ፣፣፣ ወይም ሌላ ነገር ሊሆን ይችላል <span>) ከክፍል <small>በቀር ምንም ሊጠቀም ይችላል።.form-text

ፕስወርድ

ከ8-20 ቁምፊዎች ርዝመት ሊኖረው ይገባል.

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

የተሰናከሉ ቅጾች

disabledየተጠቃሚ መስተጋብርን ለመከላከል እና ቀለል ያለ መስሎ እንዲታይ ለማድረግ የቦሊያን አይነታውን በግቤት ላይ ያክሉ ።

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

በውስጡ ያሉትን ሁሉንም መቆጣጠሪያዎች ለማሰናከል ባህሪውን disabledወደ ሀ ያክሉ ። አሳሾች ሁሉንም የቁልፍ ሰሌዳ እና የመዳፊት መስተጋብር በመከልከል በውስጣቸው <fieldset>ያሉትን ሁሉንም መቆጣጠሪያዎች ( <input>፣ <select>እና <button>ኤለመንቶችን) እንደ አካል ጉዳተኛ አድርገው ይቆጥራሉ።<fieldset disabled>

ነገር ግን፣ የእርስዎ ቅጽ እንደ ብጁ ቁልፍ መሰል አባሎችን ካካተተ <a class="btn btn-*">...</a>፣ እነዚህ የሚሰጣቸው የአጻጻፍ ስልት ብቻ ነው pointer-events: none፣ ይህ ማለት አሁንም በቁልፍ ሰሌዳው ሊተኩሩ የሚችሉ እና የሚሰሩ ናቸው። tabindex="-1"በዚህ ሁኔታ, ትኩረትን እንዳያገኙ እና aria-disabled="disabled"ግዛታቸውን ለረዳት ቴክኖሎጂዎች ለማመልከት በማከል እነዚህን መቆጣጠሪያዎች እራስዎ ማሻሻል አለብዎት .

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

ተደራሽነት

ዓላማቸው ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች እንዲደርስ ሁሉም የቅጽ መቆጣጠሪያዎች ተገቢ የሆነ ተደራሽ ስም እንዳላቸው ያረጋግጡ። ይህንን ለማግኘት ቀላሉ መንገድ ኤለመንትን መጠቀም ወይም - በአዝራሮች ሁኔታ - በቂ ገላጭ ጽሑፍን እንደ የይዘቱ <label>አካል ማካተት ነው ።<button>...</button>

የሚታይ ወይም ተገቢ የሆነ የጽሁፍ ይዘት ለማካተት ለማይቻል <label>ሁኔታዎች አሁንም ተደራሽ የሆነ ስም የማቅረብ አማራጭ መንገዶች አሉ ለምሳሌ፡-

<label>.visually-hiddenክፍሉን በመጠቀም የተደበቁ ንጥረ ነገሮች
በመጠቀም እንደ መለያ ሆኖ ሊያገለግል ወደሚችል ነባር አካል በመጠቆምaria-labelledby
titleባህሪን መስጠት
በአንድ አካል ላይ ያለውን ተደራሽ ስም በግልፅ በማዘጋጀት ላይaria-label

ከእነዚህ ውስጥ አንዳቸውም ከሌሉ፣ አጋዥ ቴክኖሎጂዎች placeholderባህሪውን ለተደራሽ ስም <input>እና <textarea>አካላት እንደ ውድቅ አድርገው ሊጠቀሙበት ይችላሉ። በዚህ ክፍል ውስጥ ያሉት ምሳሌዎች ጥቂት የተጠቆሙ፣ ጉዳይ-ተኮር አቀራረቦችን ያቀርባሉ።

በምስላዊ የተደበቀ ይዘት (፣፣ .visually-hiddenእና aria-labelሌላው ቀርቶ placeholderየቅጽ መስክ ይዘት ካለው በኋላ የሚጠፋውን ይዘት) በመጠቀም አጋዥ የቴክኖሎጂ ተጠቃሚዎችን ቢጠቅምም፣ የሚታይ የመለያ ጽሑፍ አለመኖር ለተወሰኑ ተጠቃሚዎች አሁንም ችግር ሊሆን ይችላል። አንዳንድ የሚታየው መሰየሚያ ዓይነቶች በአጠቃላይ ምርጡ አካሄድ ነው፣ ሁለቱም ለተደራሽነት እና ለአጠቃቀም።

ሳስ

ብዙ የቅጽ ተለዋዋጮች እንደገና ጥቅም ላይ እንዲውሉ እና በግለሰብ የቅጽ አካላት እንዲራዘሙ በአጠቃላይ ደረጃ ተቀምጠዋል። $btn-input-*እነዚህን ብዙ ጊዜ እንደ እና $input-*ተለዋዋጮች ያያሉ ።

ተለዋዋጮች

$btn-input-*ተለዋዋጮች በአዝራሮቻችን እና በቅጽ ክፍሎቻችን መካከል ያሉ ዓለም አቀፍ ተለዋዋጮች ናቸው። እነዚህ በተደጋጋሚ ወደ ሌላ አካል-ተኮር ተለዋዋጮች እንደ እሴት ሲመደቡ ታገኛቸዋለህ።

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