مثال پایه#
کنترلهای متنی مانند <input> و <textarea> را با استایلهای سفارشی، اندازهها، حالتهای فوکوس و غیره ارتقا دهید.
<div class="mb-3">
<label for="simpleinput" class="form-label">متن</label>
<input type="text" id="simpleinput" class="form-control">
</div>
<div class="mb-3">
<label for="example-email" class="form-label">ایمیل</label>
<input type="email" id="example-email" name="example-email" class="form-control" placeholder="ایمیل">
</div>
<div class="mb-3">
<label for="example-password" class="form-label">رمز عبور</label>
<input type="password" id="example-password" class="form-control" value="password">
</div>
<div class="mb-3">
<label for="example-palaceholder" class="form-label">نمایش یاب</label>
<input type="text" id="example-palaceholder" class="form-control" placeholder="نمایش یاب">
</div>
<div class="mb-3">
<label for="example-textarea" class="form-label">منطقه متن</label>
<textarea class="form-control" id="example-textarea" rows="5"></textarea>
</div>
اندازه ورودی#
ارتفاعها را با استفاده از کلاسهایی مانند .form-control-lg و .form-control-sm تنظیم کنید.
<div class="d-flex flex-column gap-2 mb-3 w-50">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg مثال">
<input class="form-control" type="text" placeholder="ورودی پیشفرض" aria-label="مثال ورودی پیشفرض">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm مثال">
</div>
ورودی غیرفعال#
با افزودن ویژگی بولی disabled به یک ورودی، ظاهری خاکستری به آن بدهید، رویدادهای نشانهگذاری را حذف کنید و از فوکوس کردن آن جلوگیری کنید.
<input class="form-control" type="text" placeholder="ورودی غیرفعال" aria-label="مثال ورودی غیرفعال" disabled>
<input class="form-control" type="text" value="ورودی غیرفعال فقط خواندنی" aria-label="مثال ورودی غیرفعال" disabled readonly>
ورودی فقط خواندنی#
با افزودن ویژگی بولی readonly به یک ورودی، از تغییر مقدار آن جلوگیری کنید. ورودیهای readonly هنوز میتوانند فوکوس شده و انتخاب شوند، در حالی که ورودیهای disabled نمیتوانند.
اگر میخواهید عناصر <input readonly> در فرم شما به صورت متن ساده ش styled شوند، .form-control را با .form-control-plaintext جایگزین کنید تا استایل پیشفرض مربوط به فیلد فرم را حذف کرده و margin و padding صحیح را حفظ کنید.
<input class="form-control" type="text" value="ورودی فقط خواندنی در اینجا..." aria-label="مثال ورودی فقط خواندنی" readonly>
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
ورودی لیست دادهها#
اگر میخواهید عناصر <input readonly> در فرم شما به صورت متن ساده styled شوند، .form-control را با .form-control-plaintext جایگزین کنید تا استایل پیشفرض مربوط به فیلد فرم را حذف کرده و margin و padding صحیح را حفظ کنید.
<label for="exampleDataList" class="form-label">نمونه لیست دادهها</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="برای جستجو تایپ کنید...">
<datalist id="datalistOptions">
<option value="سانفرانسیسکو">
<option value="نیویورک">
<option value="سیاتل">
<option value="لس آنجلس">
<option value="شیکاگو">
</datalist>
انتخاب#
فهرستهای <select> سفارشی تنها به یک کلاس سفارشی، .form-select نیاز دارند تا استایلهای سفارشی فعال شوند. استایلهای سفارشی محدود به ظاهر اولیه <select> هستند و نمیتوانند <option> ها را به دلیل محدودیتهای مرورگر تغییر دهند.
ویژگی multiple نیز پشتیبانی میشود:
همچنین ویژگی size پشتیبانی میشود:
<label for="example-select" class="form-label">انتخاب ورودی پیشفرض</label>
<select class="form-select" id="example-select">
<option>۱</option>
<option>۲</option>
<option>۳</option>
<option>۴</option>
<option>۵</option>
</select>
<label for="example-multiselect" class="form-label">انتخاب چندگانه</label>
<select id="example-multiselect" multiple="" class="form-control">
<option>۱</option>
<option>۲</option>
<option>۳</option>
<option>۴</option>
<option>۵</option>
</select>
<label for="example-multiselectsize" class="form-label">اندازه انتخاب چندگانه</label>
<select id="example-multiselectsize" class="form-select" size="3" aria-label="مثال انتخاب اندازه ۳">
<option selected>این منوی انتخاب را باز کنید</option>
<option value="1">یک</option>
<option value="2">دو</option>
<option value="3">سه</option>
</select>