فرم های پشته

ما هرگز ایمیل شما را با هیچ کس دیگری به اشتراک نمی گذاریم.
<form>
    <div class="form-group mb-3">
        <input type="email" class="form-control" id="sEmail" aria-describedby="emailHelp1" placeholder="آدرس ایمیل">
        <small id="emailHelp1" class="form-text text-muted">ما هرگز ایمیل شما را با هیچ کس دیگری به اشتراک نمی گذاریم.</small>
    </div>
    <div class="form-group mb-4">
        <input type="password" class="form-control" id="sPassword" placeholder="رمزعبور">
    </div>
    <div class="form-group form-check pl-0">
        <div class="custom-control custom-checkbox checkbox-info">
            <input type="checkbox" class="custom-control-input" id="sChkbox">
            <label class="custom-control-label" for="sChkbox">در خبرنامه هفتگی مشترک شوید</label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>

فرم افقی

اعمال
<form>
    <div class="form-group row mb-4">
        <label for="hEmail" class="col-xl-2 col-sm-3 col-sm-2 col-form-label">Email</label>
        <div class="col-xl-10 col-lg-9 col-sm-10">
            <input type="email" class="form-control" id="hEmail" placeholder="">
        </div>
    </div>
    <div class="form-group row mb-4">
        <label for="hPassword" class="col-xl-2 col-sm-3 col-sm-2 col-form-label">Password</label>
        <div class="col-xl-10 col-lg-9 col-sm-10">
            <input type="password" class="form-control" id="hPassword" placeholder="">
        </div>
    </div>
    <fieldset class="form-group mb-4">
        <div class="row">
            <label class="col-form-label col-xl-2 col-sm-3 col-sm-2 pt-0">بخش ها را انتخاب کنید</label>
            <div class="col-xl-10 col-lg-9 col-sm-10">
                <div class="form-check mb-2">
                    <div class="custom-control custom-radio classic-radio-info">
                        <input type="radio" id="hRadio1" name="classicRadio" class="custom-control-input">
                        <label class="custom-control-label" for="hRadio1">Segements 1</label>
                    </div>
                </div>
                <div class="form-check mb-2">
                    <div class="custom-control custom-radio classic-radio-info">
                        <input type="radio" id="hRadio2" name="classicRadio" class="custom-control-input">
                        <label class="custom-control-label" for="hRadio2">Segements 2</label>
                    </div>
                </div>
                <div class="form-check disabled">
                    <div class="custom-control custom-radio classic-radio-default">
                        <input type="radio" id="hRadio3" name="classicRadio" class="custom-control-input" disabled>
                        <label class="custom-control-label" for="hRadio3">Segements 3   ( disabled )</label>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="form-group row">
        <div class="col-sm-2">Apply</div>
        <div class="col-sm-10">
            <div class="form-check pl-0">

                <div class="custom-control custom-checkbox checkbox-info">
                    <input type="checkbox" class="custom-control-input" id="hChkbox">
                    <label class="custom-control-label" for="hChkbox">شرایط و ضوابط</label>
                </div>

            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary mt-3">بزن بریم</button>
        </div>
    </div>
</form>

فرم های ثبت نام

*فیلدهای مورد نیاز
<form>
    <div class="form-group mb-4">
        <input type="email" class="form-control" id="rEmail" placeholder="آدرس ایمیل *">
    </div>
    <div class="form-group mb-4">
        <input type="password" class="form-control" id="rPassword" placeholder="رمزعبور *">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="rConfirmPassword" placeholder="تایید رمزعبور *">
    </div>
    <small id="emailHelp2" class="form-text text-muted">*فیلدهای مورد نیاز</small>
    <div class="form-group form-check pl-0 mt-5">
        <div class="custom-control custom-checkbox checkbox-info">
            <input type="checkbox" class="custom-control-input" id="rChkbox">
            <label class="custom-control-label" for="rChkbox">در خبرنامه هفتگی مشترک شوید</label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>

فرم ورود

*فیلدهای مورد نیاز
<form>
    <div class="form-group mb-4">
        <input type="text" class="form-control" id="lFullName" placeholder="نام کامل *">
    </div>
    <div class="form-group mb-4">
        <input type="email" class="form-control" id="lEmail" placeholder="آدرس ایمیل *">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="lPassword" placeholder="رمزعبور *">
    </div>
    <small id="emailHelp" class="form-text text-muted">*فیلدهای مورد نیاز</small>
    <button type="submit" class="btn btn-primary mt-4">Submit</button>
</form>

فرم شبکه ای

<form>
    <div class="form-row mb-4">
        <div class="form-group col-md-6">
            <label for="inputEmail4">Email</label>
            <input type="email" class="form-control" id="inputEmail4" placeholder="ایمیل">
        </div>
        <div class="form-group col-md-6">
            <label for="inputPassword4">Password</label>
            <input type="password" class="form-control" id="inputPassword4" placeholder="رمزعبور">
        </div>
    </div>
    <div class="form-group mb-4">
        <label for="inputAddress">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="form-group mb-4">
        <label for="inputAddress2">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
    </div>
    <div class="form-row mb-4">
        <div class="form-group col-md-6">
            <label for="inputCity">City</label>
            <input type="text" class="form-control" id="inputCity">
        </div>
        <div class="form-group col-md-4">
            <label for="inputState">State</label>
            <select id="inputState" class="form-control">
                <option selected>انتخاب کنید...</option>
                <option>...</option>
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="inputZip">Zip</label>
            <input type="text" class="form-control" id="inputZip">
        </div>
    </div>
    <div class="form-group">
        <div class="form-check pl-0">
            <div class="custom-control custom-checkbox checkbox-info">
                <input type="checkbox" class="custom-control-input" id="gridCheck">
                <label class="custom-control-label" for="gridCheck">من را بررسی کنید</label>
            </div>
        </div>
    </div>
  <button type="submit" class="btn btn-primary mt-3">ورود</button>
</form>

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

@
<form class="form-inline justify-content-center">
    <label class="sr-only" for="inlineFormInputName2">Name</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
    <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
            <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="نام کاربری">
    </div>
    <div class="form-check mb-2 mr-sm-2">
        <div class="custom-control custom-checkbox checkbox-info">
            <input type="checkbox" class="custom-control-input" id="inlineFormCheck">
            <label class="custom-control-label" for="inlineFormCheck">Remember me</label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

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

@
<form>
    <div class="form-row align-items-center justify-content-center">
        <div class="col-auto">
            <label class="sr-only" for="inlineFormInput">Name</label>
            <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
        </div>
        <div class="col-auto">
            <label class="sr-only" for="inlineFormInputGroup">Username</label>
            <div class="input-group mb-2">
                <div class="input-group-prepend">
                    <div class="input-group-text">@</div>
                </div>
                <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="نام کاربری">
            </div>
        </div>
        <div class="col-auto">
            <div class="form-check mb-2 pl-0">
                <div class="custom-control custom-checkbox checkbox-info">
                    <input type="checkbox" class="custom-control-input" id="autoSizingCheck">
                    <label class="custom-control-label" for="autoSizingCheck">Remember me</label>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary mt-3">Submit</button>
        </div>
    </div>
</form>

دکمه های عملی

@
<form class="form-vertical" action="#">
    <div class="form-group mb-4">
        <label class="control-label">نام:</label>
        <input type="text" name="first_name" class="form-control" >
    </div>
    <div class="form-group mb-4">
        <label class="control-label">ایمیل:</label>
        <div class="input-group"> 
            <div class="input-group-prepend">
                <div class="input-group-text">@</div>
            </div>
            <input type="text" name="email" class="form-control" > 
        </div> 
    </div>
    <div class="form-group mb-4">
        <label class="control-label">وبسایت:</label>
        <input type="text" name="website" value="https://" class="form-control" > 
    </div>
    <div class="form-group mb-4">
        <label class="control-label"> پسورد:</label>
        <div class="input-group mb-4">
            <input type="password" name="pass" class="form-control" > 
            <span class="input-group-addon"><i class="icon-user"></i></span> 
        </div>
    </div>
    <div class="form-group mb-4">
        <label class="control-label">تایید پسورد:</label>
        <div class="input-group">
            <input type="password" name="cpass" class="form-control">
            <span class="input-group-addon"><i class="icon-user"></i></span> 
        </div>
    </div>
        <input type="submit" value="Submit" class="btn btn-primary ml-3 mt-3">
</form>