ቅጥዕታት

ኣብነታትን መምርሒታት ኣጠቓቕማን ቅዲታት ምቁጽጻር ቅጥዒ፡ ኣማራጺታት ኣቀማምጣን ዝተፈላለዩ ቅጥዕታት ንምፍጣር ብሕታዊ ባእታታትን።

ኣብዚ ገጽ

ምቁጽጻር ቅጥዒ ንብዙሓት ግዝኣታት ዝድግፍ ናይ ጽሑፍ እታዎታትን ናይ ጽሑፍ ከባቢታትን ቅዲ።

ምረፅ ብሕታዊ ናይ መጀመርታ መልክዕ ዘለዎም ናይ መርበብ ሓበሬታ ነባሪ ምምራጽ ባእታታት ኣመሓይሽ።

ቼክ & ሬድዮታት ንናይ ምእታው ኣማራጺታት ንምምራጽ ኣብ ቅጥዕታት ዝርከቡ ብሕታዊ ናይ ሬድዮ መጠወቒታትን ሳጹናት ምልክትን ተጠቐም።

ግዝፈት ናይ መርበብ ሓበሬታ ነባሪ ደረጃ ምእታው ብናይ ናትና ብሕታዊ ስሪት ተክኦ።

እታዎት ጉጅለ ንዝለዓለ ትርጉማዊ ዋጋ ኣብ እታዎታትካ ስያመታትን መጠወቒታትን ኣተሓሕዝ።

ተንሳፋፊ ምልክታት ኣብ ልዕሊ ናይ ምእታው ዓውድታትካ ዝንሳፈፉ ጽቡቕ ቀለልቲ ናይ ቅጥዒ ስያመታት ፍጠር።

ንድፊ ምስ ቅጥዕታትካ ኣብ ውሽጢ መስመር፣ ኣግማድ ወይ ዝተሓላለኹ ሽቦ መሰረት ዝገበሩ ኣቀማምጣታት ፍጠር።

ምጽዳቕ ቅጥዕታትካ ብባህሊ ወይ ተወላዲ ናይ ምጽዳቕ ባህርያትን ቅዲታትን ኣረጋግጽ።

ሓፈሻዊ ትሕዝቶ

ናይ Bootstrap ቅጥዒ ቁጽጽር ኣብ ናትና Rebooted ቅጥዒ ቅዲታት ምስ ክፍልታት ይሰፍሕ። ነዞም ክፍልታት ተጠቐመሎም ኣብ መላእ መርበብ ሓበሬታን መሳርሕታትን ዝያዳ ቅኑዕ ኣቀራርባ ንምርካብ ናብቲ ብዓይነት ዝተዳለወ ምርኢታቶም ንምምራጽ።

typeኣብ ኩሎም እታዎታት (ንኣብነት email፡ ንኣድራሻ ኢመይል ወይ ንቁጽራዊ ሓበሬታ) ግቡእ ባህሪ ምጥቃምካ ኣረጋግጽ number፡ ንሓደስቲ ናይ ምእታው ቁጽጽር ከም ናይ ኢመይል ምርግጋጽ፡ ቁጽሪ ምምራጽን ካልእን ንምጥቃም።

ቅዲታት ቅጥዒ ቡትስትራፕ ንምግላጽ ቅልጡፍ ኣብነት ኣብዚ ኣሎ። ንሰነዳት ብዛዕባ ዘድልዩ ክፍልታት፡ ኣቀማምጣ ቅጥዒን ካልእን ምንባብ ቀጽል።

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

ኣብ መስመር ዘሎ ጽሑፍ ዝኾነ ልሙድ ናይ ውሽጢ መስመር HTML ባእታ (a <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ባህሪ ናብ a ወስኸሉ ። <fieldset>ዳህሰስቲ ንኹሎም ኣብ ውሽጢ a ዝርከቡ ተወላዲ ቅጥዒ ቁጽጽር ( <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ባህሪ ከም ምምላስ ናይቲ ተበጻሒ ስም on <input>and <textarea>elements ንምጥቃም ክጥቀሙ ይኽእሉ። ኣብዚ ክፍሊ ዘለዉ ኣብነታት ውሑዳት ሓሳባት ዝህቡ፣ ንጉዳይ ዝምልከት ኣገባባት ይህቡ።

ብዓይኒ ዝተሓብአ ትሕዝቶ ( .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;