Form के Controls
Bootstrap कुछ classes से text inputs, selects, textareas, checkboxes, और switches style करता है।
In this page:
Syntax
<label for="id" class="form-label">Label</label>
<input type="text" class="form-control" id="id">
<select class="form-select">
<option>option</option>
</select>Form Controls
Text inputs, textareas, और selects को .form-control या .form-select class दें और हर एक को एक label से pair करें। Checkboxes और radios .form-check-input और .form-check-label वाला .form-check इस्तेमाल करते हैं, और .form-switch एक toggle बनाता है। .form-range sliders style करता है।
Note:
accessibility और usability के लिए हर input को एक label चाहिए।
उदाहरण: Form controls
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="mb-3"><label for="email" class="form-label">Email address</label><input type="email" class="form-control" id="email" placeholder="[email protected]"></div>
<div class="mb-3"><label for="plan" class="form-label">Plan</label><select id="plan" class="form-select"><option>Free</option><option>Pro</option></select></div>
<div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" role="switch" id="news" checked><label class="form-check-label" for="news">Newsletter</label></div>
<label for="vol" class="form-label">Volume</label><input type="range" class="form-range" id="vol">
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- labels skip करना
- form-control भूल जाना
- placeholder text को सिर्फ label की तरह इस्तेमाल करना
चैप्टर सारांश
- form-control inputs style करता है
- form-select selects style करता है
- checkboxes और radios के लिए form-check
- form-switch और form-range
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: