Form in a Boostrap Modal

[akash-coded]

Design a form that will be inside a modal.

[pooja2apr]

<title>Bootstrap Example</title> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

Modal Example

Open modal

Login

E-Mail Address

Password

Remember Me

Login

                        <a class="btn btn-link" href="">Forgot Your Password?</a>
                    </div>
                </div>
            </form>
           
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

[ramprasana]

<title>Document</title>

Login Model

Click the login button to launch the Login Modal form.

Login Modal

        <!-- LOGIN MODAL -->
        <div class="modal" id="myLogin">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Login Title</h5>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form>
                <div class="form-group">
                    <lable for="username">Username</lable>
                    <input type="text" placeholder="Username" class="form-control">
                </div>
                <div class="form-group">
                    <lable for="pasword">Password</lable>
                    <input type="password" placeholder="Password" class="form-control">
                </div>              
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal">Login</button>
            </div>
            </div>
        </div>
        </div>

    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>