படிவங்கள்

கண்ணோட்டம்

பூட்ஸ்டார்ப்பின் படிவக் கட்டுப்பாடுகள் வகுப்புகளுடன் எங்கள் மறுதொடக்கம் செய்யப்பட்ட படிவ பாணிகளில் விரிவடைகின்றன. உலாவிகள் மற்றும் சாதனங்கள் முழுவதும் மிகவும் சீரான ரெண்டரிங் செய்வதற்கு, தனிப்பயனாக்கப்பட்ட காட்சிகளைத் தேர்வுசெய்ய இந்த வகுப்புகளைப் பயன்படுத்தவும்.

மின்னஞ்சல் சரிபார்ப்பு, எண் தேர்வு மற்றும் பல போன்ற புதிய உள்ளீட்டு கட்டுப்பாடுகளைப் பயன்படுத்த 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.

உள்ளீடுகளுக்குக் கீழே உள்ள படிவ உரை .form-text. பிளாக்-லெவல் உறுப்பு பயன்படுத்தப்பட்டால், மேலே உள்ள உள்ளீடுகளிலிருந்து எளிதான இடைவெளிக்கு மேல் விளிம்பு சேர்க்கப்படும்.

<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 உறுப்பையும் (அது <span>, <small>, அல்லது வேறு ஏதாவது) வகுப்பைத் தவிர வேறு எதுவும் இல்லாமல் பயன்படுத்தலாம் .form-text.

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