طرح بندی فرم

  1. فرم ها
  2. طرح بندی فرم

شبکه فرم

فرم های پیچیده تری را می توان با استفاده از کلاس های گرید ما ساخت. از اینها برای طرح‌بندی فرم‌هایی که به ستون‌های متعدد، عرض‌های متنوع و گزینه‌های تراز اضافی نیاز دارند، استفاده کنید.نیاز دارد $enable-grid-classes متغیر Sass فعال شود(به طور پیش فرض روشن است).

 <form action="javascript:void(0);">
    <div class="row">
        <div class="col-6">
            <div class="mb-3">
                <label for="firstNameinput" class="form-label">First Name</label>
                <input type="text" class="form-control" placeholder="Enter your firstname" id="firstNameinput">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="lastNameinput" class="form-label">Last Name</label>
                <input type="text" class="form-control" placeholder="Enter your lastname" id="lastNameinput">
            </div>
        </div><!--end col-->
        <div class="col-12">
            <div class="mb-3">
                <label for="compnayNameinput" class="form-label">Company Name</label>
                <input type="text" class="form-control" placeholder="Enter company name" id="compnayNameinput">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="phonenumberInput" class="form-label">Phone Number</label>
                <input type="tel" class="form-control" placeholder="+(245) 451 45123" id="phonenumberInput">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="emailidInput" class="form-label">Email Address</label>
                <input type="email" class="form-control" placeholder="example@gamil.com" id="emailidInput">
            </div>
        </div><!--end col-->
        <div class="col-12">
            <div class="mb-3">
                <label for="address1ControlTextarea" class="form-label">Address</label>
                <input type="text" class="form-control" placeholder="Address 1" id="address1ControlTextarea">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="citynameInput" class="form-label">City</label>
                <input type="email" class="form-control" placeholder="Enter your city" id="citynameInput">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="ForminputState" class="form-label">State</label>
                <select id="ForminputState" class="form-select">
                    <option selected>Choose...</option>
                    <option>...</option>
                </select>
            </div>
        </div><!--end col-->
        <div class="col-lg-12">
            <div class="text-end">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div><!--end col-->
    </div><!--end row-->
</form>

ناودان

با اضافه کردنکلاس های اصلاح کننده ناودان، می توانید بر عرض ناودان در جهت خطی و بلوک کنترل داشته باشید.همچنین نیاز به $enable-grid-classes متغیر Sass فعال شود(به طور پیش فرض روشن است).

 <form action="javascript:void(0);" class="row g-3">
    <div class="col-md-12">
        <label for="fullnameInput" class="form-label">Name</label>
        <input type="text" class="form-control" id="fullnameInput" placeholder="Enter your name">
    </div>
    <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
    <div class="col-12">
        <label for="inputAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="col-12">
        <label for="inputAddress2" class="form-label">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
    </div>
    <div class="col-md-6">
        <label for="inputCity" class="form-label">City</label>
        <input type="text" class="form-control" id="inputCity" placeholder="Enter your city">
    </div>
    <div class="col-md-4">
        <label for="inputState" class="form-label">State</label>
        <select id="inputState" class="form-select">
            <option selected>Choose...</option>
            <option>...</option>
        </select>
    </div>
    <div class="col-md-2">
        <label for="inputZip" class="form-label">Zip</label>
        <input type="text" class="form-control" id="inputZip" placeholder="Zin code">
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
                Check me out
            </label>
        </div>
    </div>
    <div class="col-12">
        <div class="text-end">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

فرم عمودی

نمونه ای از فرم عمودی با استفاده از form-control کلاس برای ایجاد فرم عمودی نیازی به تعیین ردیف و کلاس col نیست.

 <form action="">
    <div class="mb-3">
        <label for="employeeName" class="form-label">Employee Name</label>
        <input type="text" class="form-control" id="employeeName" placeholder="Enter emploree name">
    </div>
    <div class="mb-3">
        <label for="employeeUrl" class="form-label">Employee Department URL</label>
        <input type="url" class="form-control" id="employeeUrl" placeholder="Enter emploree url">
    </div>
    <div class="mb-3">
        <label for="StartleaveDate" class="form-label">Start Leave Date</label>
        <input type="date" class="form-control" id="StartleaveDate">
    </div>
    <div class="mb-3">
        <label for="EndleaveDate" class="form-label">End Leave Date</label>
        <input type="date" class="form-control" id="EndleaveDate">
    </div>
    <div class="mb-3">
        <label for="VertimeassageInput" class="form-label">Message</label>
        <textarea class="form-control" id="VertimeassageInput" rows="3" placeholder="Enter your message"></textarea>
    </div>
    <div class="text-end">
        <button type="submit" class="btn btn-primary">Add Leave</button>
    </div>
</form>

فرم افقی

با اضافه کردن عبارت، فرم های افقی را با شبکه ایجاد کنید row کلاس برای تشکیل گروه و استفاده از col-*-* کلاس برای تعیین عرض برچسب ها و کنترل های شما. حتما اضافه کنید col-form-label کلاس به شما <label> s نیز به طوری که آنها به صورت عمودی با کنترل های فرم مرتبط خود در مرکز قرار می گیرند.

 <form action="">
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="nameInput" class="form-label">Name</label>
        </div>
        <div class="col-lg-9">
            <input type="text" class="form-control" id="nameInput" placeholder="Enter your name">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="websiteUrl" class="form-label">Website URL</label>
        </div>
        <div class="col-lg-9">
            <input type="url" class="form-control" id="websiteUrl" placeholder="Enter your url">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="dateInput" class="form-label">Date</label>
        </div>
        <div class="col-lg-9">
            <input type="date" class="form-control" id="dateInput">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="timeInput" class="form-label">Time</label>
        </div>
        <div class="col-lg-9">
            <input type="time" class="form-control" id="timeInput">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="leaveemails" class="form-label">Email Id</label>
        </div>
        <div class="col-lg-9">
            <input type="email" class="form-control" id="leaveemails" placeholder="Enter your email">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="contactNumber" class="form-label">Contact Number</label>
        </div>
        <div class="col-lg-9">
            <input type="number" class="form-control" id="contactNumber" placeholder="+91 9876543210">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="meassageInput" class="form-label">Message</label>
        </div>
        <div class="col-lg-9">
            <textarea class="form-control" id="meassageInput" rows="3" placeholder="Enter your message"></textarea>
        </div>
    </div>
    <div class="text-end">
        <button type="submit" class="btn btn-primary">Add Leave</button>
    </div>
</form>

اندازه برچسب فرم افقی

استفاده کنید col-form-label-sm کلاس برای تنظیم برچسب فرم اندازه کوچک یا col-form-label-lg class برای تنظیم برچسب فرم با اندازه بزرگ به 

 <!-- Col Form Label Small -->
<div class="row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
</div> 

 <!-- Col Form Label Default -->
<div class="row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
</div> 

 <!-- Col Form Label Large -->
<div class="row">
    <label for="lg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="colFormLabelSm" placeholder="col-form-label-lg">
    </div>
</div>

اندازه ستون

استفاده کنید col-sm- کلاس با مقدار اندازه مورد نیاز برای تنظیم اندازه ستون بر اساس نیاز شما.

 <div class="row g-3">
    <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Firstname" aria-label="First-Name">
    </div><!--end col-->
    <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Lastname" aria-label="Last-Name">
    </div><!--end col-->
    <div class="col-sm-4">
        <input type="text" class="form-control" placeholder="Email id" aria-label="Email Id">
    </div><!--end col-->
    <div class="col-sm-4">
        <input type="password" class="form-control" placeholder="Password" aria-label="Password">
    </div><!--end col-->
    <div class="col-sm-4">
        <input type="password" class="form-control" placeholder="Confirm Password" aria-label="confirm-password">
    </div><!--end col-->
    <div class="col-sm-7">
        <input type="text" class="form-control" placeholder="City" aria-label="City">
    </div><!--end col-->
    <div class="col-sm">
        <input type="text" class="form-control" placeholder="State" aria-label="State">
    </div><!--end col-->
    <div class="col-sm">
        <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
    </div><!--end col-->
</div><!--end row-->

اندازه گیری خودکار

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

@
@
 <form action="javascript:void(0);">
    <div class="row gy-2 gx-3 mb-3 align-items-center">
        <div class="col-sm-auto">
            <label class="visually-hidden" for="autoSizingInput">Name</label>
            <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
        </div><!--end col-->
        <div class="col-sm-auto">
            <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
            <div class="input-group">
                <div class="input-group-text">@</div>
                <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
            </div>
        </div><!--end col-->
        <div class="col-sm-auto">
            <label class="visually-hidden" for="autoSizingSelect">Preference</label>
            <select class="form-select" id="autoSizingSelect">
                <option selected>Choose...</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div><!--end col-->
        <div class="col-sm-auto">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="autoSizingCheck">
                <label class="form-check-label" for="autoSizingCheck">
                    Remember me
                </label>
            </div>
        </div><!--end col-->
        <div class="col-sm-auto">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div><!--end col-->
    </div><!--end row-->
</form> 

 <form>
    <div class="row gx-3 gy-2 align-items-center">
        <div class="col-sm-3">
            <label class="visually-hidden" for="specificSizeInputName">Name</label>
            <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
        </div><!--end col-->
        <div class="col-sm-3">
            <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
            <div class="input-group">
                <div class="input-group-text">@</div>
                <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
            </div>
        </div><!--end col-->
        <div class="col-sm-3">
            <label class="visually-hidden" for="specificSizeSelect">Preference</label>
            <select class="form-select" id="specificSizeSelect">
                <option selected>Choose...</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div><!--end col-->
        <div class="col-auto">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
                <label class="form-check-label" for="autoSizingCheck2">
                    Remember me
                </label>
            </div>
        </div><!--end col-->
        <div class="col-auto">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div><!--end col-->
    </div>
</form>

فرم های درون خطی

استفاده کنید row-cols-* کلاس برای تنظیم فرم درون خطی.

@
 <form action="javascript:void(0);">
    <div class="row row-cols-lg-auto g-3 align-items-center">
        <div class="col-12">
            <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
            <div class="input-group">
                <div class="input-group-text">@</div>
                <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
            </div>
        </div><!--end col-->
        <div class="col-12">
            <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
            <select class="form-select" id="inlineFormSelectPref">
                <option selected>Choose...</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div><!--end col-->
        <div class="col-12">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="inlineFormCheck">
                <label class="form-check-label" for="inlineFormCheck">
                    Remember me
                </label>
            </div>
        </div><!--end col-->
        <div class="col-12">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div><!--end col-->
    </div><!--end row-->
</form>

برچسب های شناور

استفاده کنید form-floating کلاس برای فعال کردن برچسب‌های شناور با فیلدهای فرم متنی Bootstrap.

 <form action="#">
    <div class="row g-3">
        <div class="col-lg-6">
            <div class="form-floating">
                <input type="text" class="form-control" id="firstnamefloatingInput" placeholder="Enter your firstname">
                <label for="firstnamefloatingInput">First Name</label>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-floating">
                <input type="text" class="form-control" id="lastnamefloatingInput" placeholder="Enter your Lastname">
                <label for="lastnamefloatingInput">Last Name</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="email" class="form-control" id="emailfloatingInput" placeholder="Enter your email">
                <label for="emailfloatingInput">Email Address</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="password" class="form-control" id="passwordfloatingInput" placeholder="Enter your password">
                <label for="passwordfloatingInput">Password</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="password" class="form-control" id="passwordfloatingInput1" placeholder="Confirm password">
                <label for="passwordfloatingInput1">Confirm Password</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="text" class="form-control" id="cityfloatingInput" placeholder="Enter your city">
                <label for="cityfloatingInput">City</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
                  <option selected>USA</option>
                  <option value="1">Brazil</option>
                  <option value="2">France</option>
                  <option value="3">Germany</option>
                </select>
                <label for="floatingSelect">Country</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="number" class="form-control" id="zipfloatingInput" placeholder="Enter your zipcode">
                <label for="zipfloatingInput">Zipcode</label>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="text-end">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</form>
© Velzon.
طراحی و توسعه توسط مرداد