کنترل های فرم
مثالها و دستورالعملهای استفاده برای سبکهای کنترل فرم، گزینههای طرحبندی، و اجزای سفارشی برای ایجاد طیف گستردهای از فرمها.
کنترل های فرم در بوت استرپمثال
<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>