CSS Login

One of the most crucial pages on a website or app is the login page, which grants authorized users access to the full site or just a portion of it. The login/sign-up page is the initial page that users see on login-protected websites. Whether a login or signup page, it must be visually appealing, intuitive, and simple.

Any website or program that needs user authentication must first create a login page. Users may safely log in and access their data using it. This tutorial will use CSS code to design a basic HTML login page. You can easily construct a user-friendly, professional-looking login page with the aid of this guide. Using HTML and CSS, you will learn how to create a basic login page with a username and password.

For HyperText Markup Language, see HTML. The most crucial markup language for making a webpage is this one. On a webpage, it is utilized to show text, photos, music, and video.

Cascading Style Sheets is a stand-in for CSS. HTML pages are styled using it. CSS is used for style and has a set of formatting rules that may be utilized to create responsive web pages. It is employed in the design process. (.CSS) is the extension for CSS.

We'll use HTML and CSS to create a login page. An HTML login page gathers user data and features a submit button to deliver the information for server-side processing. Still, we are not here to handle backend tasks our goal is to build a login page.

Before we start working on the HTML login page, we must ascertain the following:

HTML forms
Flexbox's properties
CSS

What do We Produce?

HTML and CSS are used on the login page for style and organization. We'll first use HTML to build the basic framework and then CSS to make it look amazing.

Initially, we will review the login page's HTML code and then move to CSS to improve its appearance.

Building the HTML Structure for the Login Page

Essentially, the <form> tag in HTML will be utilized. HTML forms are easily accessible for collecting data from users.

The action property can also be used to offer server-side activities, although this is outside the purview of our talk. Here is additional information about forms.

Let's just write the fundamental HTML structure from the beginning.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example for Login page in HTML</title>
</head>
<body>
    <h1>This is an example of a Login form using HTML and CSS</h1>
    <form action="">
        
    </form>
</body>
</html>

Output:

The action attribute will be left empty since, as was previously said, we are constructing the login page without any server-side processes. The container that gathers and allows users to input their password and username will come after it. The original structure must be initially given; the form container will be styled afterwards.

Two <div> components will be included: one for the form headers and another for user data collection.

<html>
<head>
    <title>Example for Login page in HTML</title>
</head>
<body>
    <h2>This is an example of a Login form using HTML and CSS</h2>
    <form action="">
        <div class="headingsContainer">
            <p>Sign in</p>
            <p>username and password</p>
      </div>
        <div class="mainContainer">
           
        </div>

        </div>

    </form>
</body>
</html>

Output:

Although the div containers aren't visible, the modifications will be obvious after we add input fields to the form.

<input> tags will specify the user's input in the main container. We require text (for username) and password input types in our situation. We'll use <label> tags to describe these input fields, but make sure the <label for=" "> has the same name as the name attribute of its input> tag. Each form control (input fields) may only be connected with one label> element. Using the same name to connect the <label> and <input> components is critical.

The input type for the username is text, and we'll write <input required> since the user must provide their username and password.

<html>
<head>
    <link rel="stylesheet" href="loginpage.css">
    <title>Examle for Login page in HTML</title>
</head>
<body>
    <h1>Example of Login form using HTML and CSS</h1>
    <form action="">      
        <div class="Container">         
            <p>Provide your username and password</p>
        </div>

        <div class="Container">
              <label for="username">username</label>
                       <input type="text" placeholder="Enter Username" name="username" required>
            <br><br>       
            <label for="password">password</label>
            <input type="password" placeholder="Enter Password" name="password" required>
        </div>
    </form>
</body>
</html>

Output: