रूपां
फॉर्म नियंत्रण शैली, मांडावळ पर्याय, आनी विंगड विंगड प्रकार तयार करपाखातीर सानुकूल घटकांखातीर उदाहरणां आनी वापर मार्गदर्शक तत्वां.
नियाळ
बूटस्ट्रॅपाचे फॉर्म नियंत्रण वर्गां सयत आमच्या रिबूट केल्ल्या फॉर्म शैलींचेर विस्तार करतात . ब्राउझर आनी डिव्हायसां मदीं चड सुसंगत रेंडरींग खातीर तांच्या सानुकूल केल्ल्या प्रदर्शनांत निवड करपाक ह्या वर्गांचो वापर करचो.
ईमेल सत्यापन, क्रमांक निवड, आनी हेर सारकिल्या नव्या इनपुट नियंत्रणांचो फायदो घेवपाक 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
. जर ब्लॉक-पातळेचो घटक वापरतले जाल्यार, वयर दिल्ल्या इनपुटां पासून सोंपें अंतर करपाखातीर वयलो मार्जिन जोडटात.
<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
वर्गा परस चड कांयच नासतना.
<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
खातीर सुलभ नांवाखातीर फॉलबॅक म्हणून गुणधर्म वापरपाचो आदार घेवंक शकता. ह्या विभागांतलीं उदाहरणां कांय सुचयल्ले, केस-विशिश्ट पद्दती दितात.<input>
<textarea>
दृश्टीन लिपिल्ली सामुग्री वापरप ( .visually-hidden
, aria-label
, आनी placeholder
सामुग्री लेगीत, जी एकदां फॉर्म क्षेत्रांत सामुग्री आसल्यार गायब जाता) सहाय्यक तंत्रज्ञान वापरप्यांक फायदो जातलो, जाल्यार दिसपी लेबल मजकूर उणाव कांय वापरप्यां खातीर अजूनय समस्या निर्माण करूंक शकता. सादारणपणान दिसपी लेबलाचो कांय प्रकार हो सगळ्यांत बरो पद्दत आसा, सुलभताय आनी वापरपाक योग्यताय ह्या दोनूय गजालीं खातीर.
सास
जायते फॉर्म चड-उणें सामान्य पातळेचेर सेट केल्ले आसतात जे तांकां परतून वापरपाक आनी वैयक्तीक फॉर्म घटकांनी विस्तारपाक दितात. तुमकां हीं चड करून $btn-input-*
आनी $input-*
व्हेरिएबल्स म्हणून दिसतलीं.
चड-उणें
$btn-input-*
variables हे आमच्या बटणां आनी आमच्या फॉर्म घटकां मदीं वांटून घेतिल्ले जागतीक चड आसात. तुमकां हीं हेर घटक-विशिश्ट चयापचयांक मोलां म्हणून वारंवार परतून नेमिल्लीं दिसतलीं.
$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;