Gradually Generated HTML website

Recently, I've been attempting to create a Sign-UP form using HTML and CSS in Notepad++, but I'm encountering a problem. Every time I try to test it on Chrome, the page loads incredibly slowly. I'm not sure if it's a configuration error or if there's something else that I'm missing. Do I need a specific plugin for this to work smoothly? Below is the code I've been working with:

<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Register</div>
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="full_name" class="col-md-4 ">Full Name</label>
                            <div class="col-md-6">
                                <input type="text"  class="form-control" name="full-name">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email_address" class="col-md-4 ">E-Mail Address</label>
                            <div class="col-md-6">
                                <input type="text"  class="form-control" name="email-address">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="user_name" class="col-md-4 ">User Name</label>
                            <div class="col-md-6">
                                <input type="text"  class="form-control" name="username">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-md-4 ">Password</label>
                            <div class="col-md-6">
                                <input type="password"  class="form-control">
                            </div>
                        </div>

                        <div class="col-md-6 stylish" offset-md-4>
                            <button type="submit" class="btn btn-primary"">
                            Register
                            </button>
                        </div>
                    </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Answer №1

  • Ensure that the bootstrap and jQuery plugins are included.
  • Properly link the external files in the HTML page.
  • Add the external links in the head section of the page.
  • Maintain a clean folder structure to make linking external files easier.
  • If everything is set up correctly, follow this link to configure Chrome:
    <!DOCTYPE html>
    <html>
    <body>
      <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">Register</div>
                            <div class="card-body">
                                    <div class="form-group row">
                                        <label for="full_name" class="col-md-4 ">Full Name</label>
                                        <div class="col-md-6">
                                            <input type="text"  class="form-control" name="full-name">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="email_address" class="col-md-4 ">E-Mail Address</label>
                                        <div class="col-md-6">
                                            <input type="text"  class="form-control" name="email-address">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="user_name" class="col-md-4 ">User Name</label>
                                        <div class="col-md-6">
                                            <input type="text"  class="form-control" name="username">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="password" class="col-md-4 ">Password</label>
                                        <div class="col-md-6">
                                            <input type="password"  class="form-control">
                                        </div>
                                    </div>


                                        <div class="col-md-6 stylish" offset-md-4>
                                            <button type="submit" class="btn btn-primary"">
                                            Register
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </body>
    </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Search bar placeholder text appears off-center in Firefox browser

I have implemented a universal search bar on our website and it is working perfectly in Chrome and Safari. However, I am facing an issue with Firefox where the placeholder text is aligned to the bottom of the bar instead of the middle. Usually, placeholder ...

replace the standard arrow key scrolling with a new custom event

Currently, I am in the process of creating a unique scroll box to address my specific needs. The standard html <select> box is not cutting it for me as I require two columns displayed, which I couldn't achieve with a regular <select>. Howe ...

Unable to dispatch the form on a connected page using jQuery Mobile

I have encountered an issue while trying to submit a form using jQuery Mobile. The problem arises when the form is placed on a linked page, as it fails to submit properly. To illustrate, if my home page is mysite.com/page.html, placing the form code on tha ...

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

Ways to prevent a background image from centering at a designated width

Is it possible to prevent a background image from centering at a specific width? To demonstrate the issue, try narrowing the width of the website linked below until scroll bars appear. Take note of how the background image stays centered while other eleme ...

Content moves as you scroll, not within a lightbox

I have implemented lightbox style overlays for my 'Read More' content on my website. However, I am facing an issue where the content within the lightbox does not scroll; instead, the background page scrolls. Any assistance with resolving this p ...

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

I'm facing difficulty with this task - when hovering over elements, an active class should be added to them. However, when moving the mouse to another section, the active class should remain on the last element hovered. Additionally, the first block s ...

Positioning a div absolutely within a targeted div

Is there a way to set a div as absolute within a specific relative div rather than just the parent? For instance, I have a div that's nested inside of a row. However, I would like it to be positioned absolutely in the section instead of the row. Both ...

Customize the appearance of disabled dates in the eonasdan-datetimepicker styling

I am seeking to customize the default styles for the "eonasdan-datetimepicker" (https://github.com/Eonasdan/bootstrap-datetimepicker) by implementing a basic hover message feature. The CSS attributes currently applied to disabled dates are as follows: .bo ...

What is the proper way to include 'rowspan' specific CSS within an HTML table?

I have an HTML table with rowspans in it: table tr, td { border: 1px solid black; } tr:nth-child(1) { background-color: red; } tr:nth-child(2) { background-color: blue; } <table> <tr> <td rowspan=2>Section 1</td> ...

Analyzing CSS transform values for rotate3d utilizing regular expressions

I want to split css transform values into an array, while keeping rotate values grouped together. For instance: 'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-3 ...

basic two-column design

Located at the end of this page, you will find two distinct columns. On the right side, there is a Twitter feed, while the left side showcases a YouTube video and a comments section. Below is the HTML and CSS code that was used to create these columns: .l ...

Learn the process of eliminating special characters from input or textarea fields with AngularJs!

My attempts to integrate an AngularJS directive to remove special characters from input and textarea fields have been unsuccessful. Despite no errors being reported in the console, I am facing issues with the character count tooltip not displaying numbers ...

Steps to include a title next to a progress bar:

Is there a way to achieve something like this? https://i.sstatic.net/dhO2f.jpg I attempted to use bootstrap but I ran into an issue where the title was slightly misaligned below the progress bar. Can someone offer assistance with this matter? Apologies i ...

Add the application's logo image to the Ionic header along with a side menu

When attempting to place the app logo image in the center or left of the Ionic header with vertical alignment, it seems to shift to the top instead. The code I am currently using to display the logo is causing some issues: <ion-view view-title="<im ...

What is the best method for removing extra spaces from an input field with type "text"?

I have an input field of type "text" and a button that displays the user's input. However, if there are extra spaces in the input, they will also be displayed. How can I remove these extra spaces from the input value? var nameInput = $('#name ...

The menuToggle feature works flawlessly on desktops after integrating my AngularJS module, but unfortunately, it is not functioning

I have successfully integrated autosuggestion using AngularJS material library into my web application. Everything seems to be working fine except for one issue. When I include ng-App="MyApp2", the menuToggle button stops functioning only on mobile devices ...

Having trouble with loading multiple HTML files simultaneously in two webviews causing flickering?

With a total of 135 screens in my application, I understand that it may seem like an excessive number. However, due to project requirements, all screens need to be implemented as HTML files, stored in the assets folder, and loaded into two webviews with an ...

Updating the text box's font color to its original black shade

I have a form that includes dynamic text boxes fetching data from the backend. When a user clicks on a text box, the color of the text changes. Upon form submission, a confirmation message is displayed and I want the text box color to revert back to black. ...

Elusive Appearance of the Flask Flash Message

I have developed a web application using Flask that allows users to upload files to an S3 storage. However, I would like to enhance the user experience by showing them the progress of their file uploads in real-time. To achieve this, I am utilizing Flash t ...