کنترل های فرم

مثال‌ها و دستورالعمل‌های استفاده برای سبک‌های کنترل فرم، گزینه‌های طرح‌بندی، و اجزای سفارشی برای ایجاد طیف گسترده‌ای از فرم‌ها.

کنترل های فرم در بوت استرپ
مثال
<div class="mb-3"><label class="form-label" for="exampleFormControlInput1">Email address</label><input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com" /></div>
<div class="mb-3"><label class="form-label" for="exampleFormControlTextarea1">Example textarea</label><textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea></div>
سایز بندی
<div class="mb-3"><input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example" /></div>
<div class="mb-3"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" /></div>
<div class="mb-3"> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example" /></div>
متن ساده فقط خواندنی

اگر می‌خواهید input readonlyعناصری در فرم خود به‌صورت متن ساده استایل‌بندی شده باشند، از .form-control-plaintextکلاس برای حذف استایل پیش‌فرض فیلد فرم و حفظ حاشیه و بالشتک صحیح استفاده کنید.

<div class="mb-3 row"><label class="col-sm-2 col-form-label" for="staticEmail">Email</label>
  <div class="col-sm-10"><input class="form-control-plaintext outline-none" id="staticEmail" type="text" readonly="" value="email@example.com" />
    <div class="mb-3 row"></div>
  </div><label class="col-sm-2 col-form-label" for="inputPassword">Password</label>
  <div class="col-sm-10"><input class="form-control" id="inputPassword" type="password" /></div>
</div>
ورودی فایل

ورودی فایل از بین دسته‌ای که می‌خواهید، نازک‌ترین است و اگر می‌خواهید آن‌ها را با Choose Fileمتن نام فایل کاربردی و انتخاب‌شده مرتبط کنید، به جاوا اسکریپت اضافی نیاز دارد.

<div class="mb-3"><label class="form-label" for="customFile">File input example</label><input class="form-control" id="customFile" type="file" /></div>
<div class="mb-3"><label class="form-label" for="formFileDisabled">Disabled file input example</label><input class="form-control" id="formFileDisabled" type="file" disabled="disabled" /></div>
<div class="mb-3"><label class="form-label" for="formFileMultiple">Multiple files input example</label><input class="form-control" id="formFileMultiple" type="file" multiple="multiple" /></div>
اندازه ورودی فایل

همچنین می‌توانید از میان ورودی‌های فایل کوچک و بزرگ برای مطابقت با ورودی‌های متنی با اندازه مشابه انتخاب کنید.

<div class="mb-3"><label class="form-label" for="customFileSm">Small file input example</label><input class="form-control form-control-sm" id="customFileSm" type="file" /></div>
<div class="mb-3"><label class="form-label" for="customFileLg">Large file input example</label><input class="form-control form-control-lg" id="customFileLg" type="file" /></div>
فهرست داده ها
<div class="mb-3"><label class="form-label" for="customDatalist">Choose your browser from the list:</label><input class="form-control form-control-sm" id="customDatalist" list="browsers" name="browser" /><datalist id="browsers">
    <option value="Edge"> </option>
    <option value="Firefox"> </option>
    <option value="Chrome"> </option>
    <option value="Opera"> </option>
    <option value="Safari"></option>
  </datalist></div>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی