ورودی پایه
کلمه عبور
با Placeholder
ورودی غیرفعال
اضافه کردنdisabled attribute to disable input field.
ورودی فقط خواندنی
اضافه کردنreadonly="readonly" attribute to set field readonly.
مقدار از پیش تعریف شده
اضافه کردنvalue="VALUE" attribute to set predefined value.
متن ایستا
متن را با کمک وارد کنید
با استفاده از متن راهنما بی‌صدا.text-muted class.
Textarea Select
کنترل‌های فرم متنی-مانند<select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
Textarea
Textarea پایه
Textarea با Placeholder
Textarea با توضیحات
انتخاب کنید
انتخاب پایه
انتخاب سفارشی
برای استفاده سفارشی add class را انتخاب کنید.custom-select to select.
انتخاب چندگانه
برای استفاده از چند انتخاب، یک ویژگی اضافه کنید multiple="multiple".
مرورگر فایل پایه
ورودی فایل پایه
کمک کنندگان فرم پایه
متن راهنما در سطح بلوک در فرم ها را می توان با استفاده از آن ایجاد کرد.form-text. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.
Form Helper Left
مرکز کمکی فرم
Form Helper Right
کمکی درون خطی
.block-tag
سبک ورودی
فیلد ورودی پیش فرض
.round class for rounded field
.square class for squared field
گزینه های اندازه ورودی
استفاده کنید.input-xl class for extra large Input
استفاده کنید.input-lg class for large Input
استفاده کنید.input-sm class for small Input
استفاده کنید.input-xs class for extra small Input
استفاده کنید.input-xl class for extra large select
استفاده کنید.input-lg class for large select
استفاده کنید.input-sm class for small select
استفاده کنید.input-xs class for extra small select
اعتبار سنجی سمت سرور
ما استفاده از اعتبار سنجی سمت مشتری را توصیه می کنیم، اما در صورت نیاز به سمت سرور، می توانید فیلدهای فرم نامعتبر و معتبر را با.is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.
نکات ابزار اعتبارسنجی
اگر چیدمان فرم شما اجازه می دهد، می توانید آن را تعویض کنید.{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
