لوگو لوگوی تاریک
کامپوننت ها

گروه های ورودی

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

مثال پایه

یک افزودنی یا دکمه را در دو طرف ورودی قرار دهید. همچنین می توانید در یکی از دو طرف ورودی قرار دهید. ما از چندین کنترل فرم در یک گروه ورودی پشتیبانی نمی کنیم و <label>ها باید خارج از گروه های ورودی باشند.

@
email.com@
/https://yourwebsite.com/users
000
تومان
با ناحیه متنی
مثال کد
<div class="form-control-wrap">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="نام کاربری" required>
        <div class="input-group-append">
            <span class="input-group-text" id="basic-addon1">@</span>
        </div>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon2">email.com@</span>
        </div>
        <input type="text" class="form-control" placeholder="نام کاربری گیرنده" required>
    </div>
</div>
<div class="form-group">
    <label class="form-label" for="basic-url">نشانی اینترنتی شما</label>
    <div class="form-control-wrap">
        <div class="input-group">
            <input type="text" class="form-control" id="basic-url">
            <div class="input-group-append">
                <span class="input-group-text" id="basic-addon3">/https://yourwebsite.com/users</span>
            </div>
        </div>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">000</span>
        </div>
        <input type="text" class="form-control">
        <div class="input-group-append">
            <span class="input-group-text">تومان</span>
        </div>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">با ناحیه متنی</span>
        </div>
        <textarea class="form-control" aria-label="با ناحیه متنی"></textarea>
    </div>
</div>

سایزبندی

کلاس های سایزبندی نسبی فرم را به خود گروه ورودی اضافه کنید و محتویات داخل به طور خودکار تغییر اندازه می دهند، نیازی به تکرار کلاس های اندازه کنترل فرم در هر عنصر نیست.

کوچک
پیش فرض
بزرگ
مثال کد
<div class="form-control-wrap">
    <div class="input-group input-group-sm">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-sm">کوچک</span>
        </div>
        <input type="text" class="form-control" aria-label="کوچک" aria-describedby="inputGroup-sizing-sm">
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">پیش فرض</span>
        </div>
        <input type="text" class="form-control" aria-label="پیش فرض" aria-describedby="inputGroup-sizing-default">
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group input-group-lg">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">بزرگ</span>
        </div>
        <input type="text" class="form-control" aria-label="بزرگ" aria-describedby="inputGroup-sizing-sm">
    </div>
</div>

چک باکس و رادیوها

هر چک باکس یا گزینه رادیو را به جای متن در افزودنی گروه ورودی قرار دهید.

مثال کد
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox">
            </div>
        </div>
        <input type="text" class="form-control">
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="radio">
            </div>
        </div>
        <input type="text" class="form-control">
    </div>
</div>

ورودی های چندتایی

در حالی که چندین <input> به صورت بصری پشتیبانی می شوند، سبک های اعتبارسنجی فقط برای گروه های ورودی با یک <input> در دسترس هستند.

نام و نام خانوادگی
مثال کد
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">نام و نام خانوادگی</span>
        </div>
        <input type="text" class="form-control">
        <input type="text" class="form-control">
    </div>
</div>

افزودنی های چندتایی

افزودنی های چندتایی پشتیبانی می شوند و می توانند با چک باکس و نسخه های ورودی رادیو ترکیب شوند.

تومان 000
تومان 000
مثال کد
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">تومان</span>
            <span class="input-group-text">000</span>
        </div>
        <input type="text" class="form-control" aria-label="مبلغ (به نزدیکترین مقدار تومان)">
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <input type="text" class="form-control" aria-label="مبلغ (به نزدیکترین مقدار تومان)">
        <div class="input-group-append">
            <span class="input-group-text">تومان</span>
            <span class="input-group-text">000</span>
        </div>
    </div>
</div>

افزودنی های دکمه

مثال کد
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
        </div>
        <input type="text" class="form-control">
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="نام کاربری گیرنده">
        <div class="input-group-append">
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
        </div>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
        </div>
        <input type="text" class="form-control">
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="نام کاربری گیرنده">
        <div class="input-group-append">
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
        </div>
    </div>
</div>

دکمه های با لیست کشویی

مثال کد
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <button class="btn btn-outline-primary btn-dim dropdown-toggle" data-toggle="dropdown"><span>لیست کشویی</span><em class="icon mx-n1 ni ni-chevron-down"></em></button>
            <div class="dropdown-menu">
                <ul class="link-list-opt no-bdr">
                    <li><a href="#">تنظیمات اقدام</a></li>
                    <li><a href="#">پوش نوتیفیکیشن</a></li>
                    <li class="divider"></li>
                    <li><a href="#">فعالیت ورود</a></li>
                </ul>
            </div>
        </div>
        <input type="text" class="form-control" aria-label="ورودی متن با دکمه کشویی">
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <input type="text" class="form-control" aria-label="ورودی متن با دکمه کشویی">
        <div class="input-group-append">
            <button class="btn btn-outline-primary btn-dim dropdown-toggle" data-toggle="dropdown"><span>لیست کشویی</span><em class="icon mx-n1 ni ni-chevron-down"></em></button>
            <div class="dropdown-menu dropdown-menu-end">
                <ul class="link-list-opt no-bdr">
                    <li><a href="#">تنظیمات اقدام</a></li>
                    <li><a href="#">پوش نوتیفیکیشن</a></li>
                    <li class="divider"></li>
                    <li><a href="#">فعالیت ورود</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

دکمه های بخش بندی شده

مثال کد
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <button class="btn btn-outline-primary btn-dim">اقدام</button>
            <button class="btn btn-icon btn-outline-primary btn-dim dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                <em class="icon ni ni-chevron-down"></em><span class="visually-hidden">تغییر وضعیت لیست کشویی</span>
            </button>
            <div class="dropdown-menu">
                <ul class="link-list-opt no-bdr">
                    <li><a href="#">تنظیمات اقدام</a></li>
                    <li><a href="#">پوش نوتیفیکیشن</a></li>
                    <li class="divider"></li>
                    <li><a href="#">فعالیت ورود</a></li>
                </ul>
            </div>
        </div>
        <input type="text" class="form-control" aria-label="ورودی متن با دکمه کشویی بخش بندی شده">
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <input type="text" class="form-control" aria-label="ورودی متن با دکمه کشویی بخش بندی شده">
        <div class="input-group-append">
            <button class="btn btn-outline-primary btn-dim">اقدام</button>
            <button class="btn btn-icon btn-outline-primary btn-dim dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                <em class="icon ni ni-chevron-down"></em><span class="visually-hidden">تغییر وضعیت لیست کشویی</span>
            </button>
            <div class="dropdown-menu">
                <ul class="link-list-opt no-bdr">
                    <li><a href="#">تنظیمات اقدام</a></li>
                    <li><a href="#">پوش نوتیفیکیشن</a></li>
                    <li class="divider"></li>
                    <li><a href="#">فعالیت ورود</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

انتخاب سفارشی

گروه های ورودی شامل پشتیبانی از ورودی های انتخابی سفارشی است. در نسخه های پیش فرض مرورگر از این موارد پشتیبانی نمی شود.

مثال کد
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">گزینه ها</label>
        </div>
        <select class="form-control" id="inputGroupSelect01">
            <option selected>انتخاب کنید...</option>
            <option value="1">یک</option>
            <option value="2">دو</option>
            <option value="3">سه</option>
        </select>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <select class="form-control" id="inputGroupSelect02">
            <option selected>انتخاب کنید...</option>
            <option value="1">یک</option>
            <option value="2">دو</option>
            <option value="3">سه</option>
        </select>
        <div class="input-group-append">
            <label class="input-group-text" for="inputGroupSelect02">گزینه ها</label>
        </div>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
        </div>
        <select class="form-control" id="inputGroupSelect03">
            <option selected>انتخاب کنید...</option>
            <option value="1">یک</option>
            <option value="2">دو</option>
            <option value="3">سه</option>
        </select>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <select class="form-control" id="inputGroupSelect04">
            <option selected>انتخاب کنید...</option>
            <option value="1">یک</option>
            <option value="2">دو</option>
            <option value="3">سه</option>
        </select>
        <div class="input-group-append">
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
        </div>
    </div>
</div>

ورودی فایل سفارشی

گروه های ورودی شامل پشتیبانی از ورودی های فایل سفارشی می شود. در نسخه های پیش فرض مرورگر از این موارد پشتیبانی نمی شود.

آپلود
آپلود
مثال کد
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">آپلود</span>
        </div>
        <div class="form-file">
            <input type="file" class="form-file-input" id="inputGroupFile01">
            <label class="form-file-label" for="inputGroupFile01">انتخاب فایل</label>
        </div>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="form-file">
            <input type="file" class="form-file-input" id="inputGroupFile02">
            <label class="form-file-label" for="inputGroupFile02">انتخاب فایل</label>
        </div>
        <div class="input-group-append">
            <span class="input-group-text" id="">آپلود</span>
        </div>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="input-group-prepend">
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
        </div>
        <div class="form-file">
            <input type="file" class="form-file-input" id="inputGroupFile03">
            <label class="form-file-label" for="inputGroupFile03">انتخاب فایل</label>
        </div>
    </div>
</div>
<div class="form-control-wrap">
    <div class="input-group">
        <div class="form-file">
            <input type="file" class="form-file-input" id="inputGroupFile04">
            <label class="form-file-label" for="inputGroupFile04">انتخاب فایل</label>
        </div>
        <div class="input-group-append">
            <button class="btn btn-outline-primary btn-dim">دکمه</button>
        </div>
    </div>
</div>
© تمام حقوق محفوظ است. فارسی و راستچین سازی شده توسط فرشید ترنیان