Create A Standard Login Form Using HTML CSS

This tutorial guides you through building a standard login form using HTML and CSS, providing step-by-step instructions to create an intuitive user interface for login functionalities.

Join us on Telegram

Create A Standard Login Form Using HTML CSS

In the realm of web development, login forms serve as the gateway to secure user access on websites and applications. They provide a vital layer of authentication, ensuring that only authorized users can access restricted content or perform specific actions.

In this tutorial, we will embark on a journey to create a standard login form using HTML and CSS. By following along, you'll gain valuable insights into structuring the HTML markup for form elements and styling them with CSS to achieve a visually appealing and user-friendly design.

Whether you're a beginner seeking to understand the basics of form creation or a seasoned developer looking to refine your UI design skills, this step-by-step guide will equip you with the knowledge and techniques necessary to craft an elegant and functional login form.

Let's dive in and explore the process of building a standard login form that balances both form and function, providing users with a seamless authentication experience.

Source Code

Step 1 (HTML Code):

let's break down the HTML structure of the standard login form:

1. `<!DOCTYPE html>`: Declares the document type and version of HTML being used.

2. `<html lang="en">`: Defines the root element of the HTML document and specifies the language as English (en).

3. `<head>`: Contains meta-information and external resources related to the web page.

- `<meta charset="UTF-8">`: Specifies the character encoding for the HTML document as UTF-8, which supports a wide range of characters.

- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Defines the viewport properties for responsive web design.

- `<title>A Standard Login Form</title>`: Sets the title of the web page displayed in the browser's title bar.

- `<link rel="stylesheet" href="style.css">`: Links an external CSS file called "style.css" to apply styles to the HTML document.

4. `<body>`: Represents the visible content of the web page.

- `<form class="form">`: Defines a form element with the class "form" to encapsulate the login form.

- `<div class="flex-column">`: Creates a container with a flex display in a column direction.

- `<label>Email</label>`: Displays the label "Email" for the email input field.

- `<div class="form-input">`: Container for the email input field.

- `<i class="fa-solid fa-at"></i>`: Icon representing an email input field.

- `<input type="text" class="input" placeholder="Enter your Email">`: Email input field with a placeholder text.

- (Similar structure for the password input field)

- `<div class="flex-row">`: Container for the "Remember me" checkbox and "Forgot password?" link.

- `<div>`: Container for the "Remember me" checkbox.

- `<input type="checkbox">`: Checkbox input for remembering login.

- `<label>Remember me</label>`: Label for the checkbox.

- `<span class="span">Forgot password?</span>`: Link to reset the password.

- `<button class="button-submit">Sign In</button>`: Button to submit the login form.

- `<p class="p">`: Container for the "Sign Up" link.

- `<span class="span">Sign Up</span>`: Link to register for a new account.

- `<p class="p line">Or With</p>`: Text indicating alternative login options.

- `<div class="flex-row">`: Container for the buttons to login with Google and Apple.

- `<button class="btn">`: Button to login with Google.

- `<img src="https://codetheworld.io/wp-content/uploads/2024/04/google-icon.png">`: Google logo.

- `Google`: Text indicating login with Google.

- `<button class="btn">`: Button to login with Apple.

- `<img src="https://codetheworld.io/wp-content/uploads/2024/04/apple-icon.png">`: Apple logo.

- `Apple`: Text indicating login with Apple.

This structure creates a standard login form with input fields for email and password, a "Remember me" checkbox, a "Forgot password?" link, a "Sign In" button, and options to login with Google or Apple accounts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A Standard Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form class="form">
        <div class="flex-column">
          <label>Email</label>
        </div>
        <div class="form-input">
          <i class="fa-solid fa-at"></i>
          <input type="text" class="input" placeholder="Enter your Email">
        </div>
      
        <div class="flex-column">
          <label>Password</label>
        </div>
        <div class="form-input">
          <i class="fa-solid fa-lock"></i>
          <input type="password" class="input" placeholder="Enter your Password">
          <i class="fa-solid fa-eye"></i>
        </div>
      
        <div class="flex-row">
          <div>
            <input type="checkbox">
            <label>Remember me</label>
          </div>
          <span class="span">Forgot password?</span>
        </div>
        <button class="button-submit">Sign In</button>
        <p class="p">
          Don't have an account?
          <span class="span">Sign Up</span>
        </p>
        <p class="p line">Or With</p>
      
        <div class="flex-row">
          <button class="btn">
            <img src="https://codetheworld.io/wp-content/uploads/2024/04/google-icon.png">
            Google
          </button>
          <button class="btn">
            <img src="https://codetheworld.io/wp-content/uploads/2024/04/apple-icon.png">
            Apple
          </button>
        </div>
      </form>
</body>
</html>

Step 2 (CSS Code):

This CSS code styles a standard login form. Here's a breakdown of the key components:

1. Font Awesome Import: Imports the Font Awesome library to use icons in the form.

2. Body Styling: Sets the height of the body to 100% of the viewport height, removes margin, and centers the content using grid layout.

3. Form Styling:

- Defines the style for the login form, including width, background color, border radius, padding, and font family.

- Uses flexbox to arrange form elements in a column layout with a gap between them.

4. Placeholder Styling: Specifies the font family for placeholder text in input fields.

5. Button Styling:

- Aligns buttons to the right within the form.

- Sets styles for button appearance, such as background color, text color, width, height, border, margin, font size, font weight, border radius, and cursor.

6. Input Field Styling:

- Defines the appearance of input fields, including border, border radius, height, padding, margin, and transition effects.

- Sets specific styles for focused input fields and input fields within a focused form container.

7. Flex Row Styling: Configures a flexbox layout for elements in a row, with alignment, gap, and spacing settings.

8. Label Styling: Styles labels within flex row elements with specific font size, color, and font weight.

9. Span Styling: Defines styles for spans, such as font size, margin, color, font weight, and cursor.

10. Hover Effects: Adds hover effects for buttons and submit button, changing background color and border color.

11. Button Image Styling: Sets styles for images within buttons, such as width.

12. Hover Effects: Defines hover effects for buttons, changing the border color when hovered over.

This CSS code creates a visually appealing and functional login form with proper styling and layout.

@import url('https://use.fontawesome.com/releases/v6.5.1/css/all.css');

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #212121;
}

.form {
  width: 450px;
  background-color: #ffffff;
  color: black;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px;
  border-radius: 20px;
  font-family: sans-serif;
}

::placeholder {
  font-family: sans-serif;
}

button {
  align-self: flex-end;
}

.flex-column>label {
  color: #151717;
  font-weight: 600;
}

.form-input {
  height: 50px;
  border: 1.5px solid #ecedec;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  transition: 0.2s ease-in-out;
}

.fa-solid {
  color: #757575;
}

.input {
  margin-left: 10px;
  border: none;
  width: 85%;
  height: 100%;
  box-sizing: border-box;
}

.input:focus {
  outline: none;
}

.form-input:focus-within {
  border: 1.5px solid #2d79f3;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.flex-row>div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.flex-row>div>label {
  font-size: 14px;
  color: black;
  font-weight: 400;
}

.flex-row>div>input {
  margin:0;
  height: 24px;
}

.span {
  font-size: 14px;
  margin-left: 5px;
  color: #2d79f3;
  font-weight: 500;
  cursor: pointer;
}

.button-submit {
  background-color: #151717;
  color: white;
  width: 100%;
  height: 50px;
  border: none;
  margin: 20px 0 10px 0;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
}

.button-submit:hover {
  background-color: #252727;
}

.p {
  text-align: center;
  color: black;
  font-size: 14px;
  margin: 5px 0;
}

.btn {
  width: 100%;
  height: 50px;
  background-color: white;
  border: 1px solid #ededef;
  margin-top: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.btn img {
  width: 28px;
}

.btn:hover {
  border: 1px solid #2d79f3;
}

Source Code : Download files

Demo And Step by Step :

Conclusion:

In this tutorial, we've walked through the process of creating a standard login form using HTML and CSS. By following the step-by-step guide and implementing the provided code snippets, you've learned how to structure the form elements and style them to create an attractive and user-friendly login interface.

Throughout the tutorial, we covered various aspects of form design and styling, including:

1. Setting up the HTML structure for the login form, including input fields for email and password, as well as buttons for submission.

2. Applying CSS styles to customize the appearance of the form, including fonts, colors, borders, and spacing.

3. Using flexbox and grid layout techniques to achieve responsive and flexible form layouts that adapt to different screen sizes.

4. Incorporating iconography using Font Awesome to enhance the visual appeal and usability of the form.

5. Implementing hover effects and transitions to provide feedback and improve the interactive experience for users.

By following these steps, you've successfully created a standard login form that meets modern design standards and provides a seamless user experience. Feel free to further customize and extend the form based on your specific requirements and preferences.

Remember, the key to creating effective forms is to prioritize usability, accessibility, and visual consistency. Continuously test and iterate on your designs to ensure they meet the needs of your users and align with your overall design goals.

With your newfound knowledge of HTML and CSS, you're well-equipped to tackle more complex web design projects and continue refining your skills in frontend development. Keep experimenting, learning, and pushing the boundaries of your creativity. Happy coding!

Tags: #HTML #CSS #WebDesign #FrontendDevelopment #LoginForm #FormDesign #FormStyling #UI #UX #FontAwesome #ResponsiveDesign #Flexbox #GridLayout

الاستاذ محمد التميمي

Create A Standard Login Form Using HTML CSS

Step 1 (HTML Code):

Step 2 (CSS Code):

Source Code : Download files

Demo And Step by Step :

Conclusion:

إرسال تعليق

3D CSS Parallax Depth Effect

حل اسئلة الحوسبة السحابية قسم الحاسوب الجامعة المستنصرية نموذج رقم 1

How To Create Connect Four Game Using HTML, CSS, and JavaScript

How To Create Modern Loading Using JS

حل اسئلة تفاعلية - قسم الحاسوب - الجامعة المستنصرية نموذج رقم 1

الأستاذ محمد التميمي