Techno Blender
Digitally Yours.

How to create a form within dropdown menu using Bootstrap ?

0 37


<!DOCTYPE html>

<html>

  

<head>

    <title>GeeksforGeeks Contact us form</title>

    <meta lang="UTF-8">

    <meta name="viewport"

          content="width=device-width initial-scale=1">

    <link rel="stylesheet" 

          href=

    <script src=

    </script>

</head>

  

<body>

    <div class="container">

        <h1 class="text-success">

            GeeksforGeeks

        </h1>

    </div>

    <div class="container">

        <div class="dropdown">

            <button type="button" 

                    class="btn btn-lg btn-success 

                           dropdown-toggle" 

                    data-bs-toggle="dropdown">

                Feedback and Queries

                <span class="caret"></span>

            </button>

            <div class="dropdown-menu col-md-6">

                <form>

                    <div class="form-group m-1">

                        <label for="fm1" class="form-label">

                            Email Address

                        </label>

                        <input type="email"

                               class="form-control" 

                               id="fm1"

                               placeholder="Enter you email address" 

                               required>

                    </div>

                    <div class="form-group m-1">

                        <label for="fm2" class="form-label">

                            Contact Number

                        </label>

                        <input type="number" class="form-control" 

                               id="fm2"

                               placeholder="Your contact number">

                    </div>

                    <div class="form-group m-1">

                        <label for="fm3" 

                               class="form-check-label">Gender</label><br>

                        Male<input type="radio" 

                                   class="form-check-input m-1" 

                                   name="gen" id="fm3" 

                                   value="Male">

                        Female<input type="radio" 

                                     class="form-check-input m-1"

                                     name="gen" id="fm3"

                                     value="Female">

                    </div>

                    <div class="form-group m-1">

                        <label for="fm4" 

                               class="form-check--label">

                            Enrolled course

                        </label>

                        <br>

                        <input type="checkbox" 

                               class="form-check-input m-1" 

                               name="enr" id="fm4" value="C">

                               C<br>

                        <input type="checkbox" 

                               class="form-check-input m-1" 

                               name="enr" id="fm4" value="C++">

                               C++<br>

                        <input type="checkbox" 

                               class="form-check-input m-1" 

                               name="enr" id="fm4" value="Python">

                               Python<br>

                        <input type="checkbox" 

                               class="form-check-input m-1" 

                               name="enr" id="fm4" value="C">

                               Java

                    </div>

                    <div class="form-group m-1">

                        <label for="fm3" class="form-label">

                            Drop your feedback/Query

                        </label>

                        <input type="text" 

                               class="form-control" id="fm3" 

                               required>

                    </div>

                    <div class="form-group p-1">

                        <button type="submit" 

                                class="btn btn-primary">

                            Submit

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</body>

  

</html>


<!DOCTYPE html>

<html>

  

<head>

    <title>GeeksforGeeks Contact us form</title>

    <meta lang="UTF-8">

    <meta name="viewport"

          content="width=device-width initial-scale=1">

    <link rel="stylesheet" 

          href=

    <script src=

    </script>

</head>

  

<body>

    <div class="container">

        <h1 class="text-success">

            GeeksforGeeks

        </h1>

    </div>

    <div class="container">

        <div class="dropdown">

            <button type="button" 

                    class="btn btn-lg btn-success 

                           dropdown-toggle" 

                    data-bs-toggle="dropdown">

                Feedback and Queries

                <span class="caret"></span>

            </button>

            <div class="dropdown-menu col-md-6">

                <form>

                    <div class="form-group m-1">

                        <label for="fm1" class="form-label">

                            Email Address

                        </label>

                        <input type="email"

                               class="form-control" 

                               id="fm1"

                               placeholder="Enter you email address" 

                               required>

                    </div>

                    <div class="form-group m-1">

                        <label for="fm2" class="form-label">

                            Contact Number

                        </label>

                        <input type="number" class="form-control" 

                               id="fm2"

                               placeholder="Your contact number">

                    </div>

                    <div class="form-group m-1">

                        <label for="fm3" 

                               class="form-check-label">Gender</label><br>

                        Male<input type="radio" 

                                   class="form-check-input m-1" 

                                   name="gen" id="fm3" 

                                   value="Male">

                        Female<input type="radio" 

                                     class="form-check-input m-1"

                                     name="gen" id="fm3"

                                     value="Female">

                    </div>

                    <div class="form-group m-1">

                        <label for="fm4" 

                               class="form-check--label">

                            Enrolled course

                        </label>

                        <br>

                        <input type="checkbox" 

                               class="form-check-input m-1" 

                               name="enr" id="fm4" value="C">

                               C<br>

                        <input type="checkbox" 

                               class="form-check-input m-1" 

                               name="enr" id="fm4" value="C++">

                               C++<br>

                        <input type="checkbox" 

                               class="form-check-input m-1" 

                               name="enr" id="fm4" value="Python">

                               Python<br>

                        <input type="checkbox" 

                               class="form-check-input m-1" 

                               name="enr" id="fm4" value="C">

                               Java

                    </div>

                    <div class="form-group m-1">

                        <label for="fm3" class="form-label">

                            Drop your feedback/Query

                        </label>

                        <input type="text" 

                               class="form-control" id="fm3" 

                               required>

                    </div>

                    <div class="form-group p-1">

                        <button type="submit" 

                                class="btn btn-primary">

                            Submit

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</body>

  

</html>

FOLLOW US ON GOOGLE NEWS

Read original article here

Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.

Leave a comment