Creating a Full screen Sign-In Form with CSS and JavaScript

byCodepen.tech -
0

Introduction

A full screen sign-in form is a great way to create a modern, immersive experience for users. By occupying the entire screen, this design approach ensures that users are fully focused on the login process without distractions. It’s particularly effective for websites and applications that require high user engagement or privacy. In this step-by-step guide, we’ll show you how to create a fullscreen sign-in form using CSS and JavaScript, with detailed code explanations.

What is a Fullscreen Sign-In Form?

A fullscreen sign-in form takes up the entire screen, usually displayed as an overlay or directly on the landing page. This design approach is visually appealing and helps draw user attention to the sign-in process by eliminating distractions. It’s ideal for applications like SaaS platforms, membership websites, or mobile-responsive designs.

Step-by-Step Guide to Creating a Fullscreen Sign-In Form

1. Basic HTML Structure for the Sign-In Form

First, we will create the basic HTML structure for the fullscreen sign-in form. This form will include input fields for username/email and password, as well as a submit button.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fullscreen Sign-In Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="fullscreen-container">
    <form class="sign-in-form" id="sign-in-form">
      <h2>Sign In</h2>
      <input type="text" id="username" name="username" placeholder="Username or Email" required>
      <input type="password" id="password" name="password" placeholder="Password" required>
      <button type="submit">Log In</button>
    </form>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Explanation of the HTML Structure:

  1. fullscreen-container:
    • This div will take up the entire screen and center the sign-in form both horizontally and vertically.
  2. sign-in-form:
    • This form contains the input fields for username/email and password, along with a submit button.

2. CSS for Fullscreen Design and Styling

Now, we’ll style the form and make it fullscreen using CSS. The goal is to create a clean, modern look that focuses the user’s attention on the sign-in form.


/* styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: 'Arial', sans-serif;
}

.fullscreen-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #4a90e2, #50c9c3);
}

.sign-in-form {
  background-color: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.sign-in-form h2 {
  margin-bottom: 30px;
  font-size: 24px;
  color: #333;
}

.sign-in-form input {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.sign-in-form button {
  width: 100%;
  padding: 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.sign-in-form button:hover {
  background-color: #0056b3;
}

Explanation of the CSS:

  1. Fullscreen Layout:

    • The .fullscreen-container class uses Flexbox (display: flex, justify-content: center, align-items: center) to center the sign-in form vertically and horizontally.
    • The height of the container is set to 100vh to ensure it takes up the full viewport height.
    • A background gradient (background: linear-gradient(135deg, #4a90e2, #50c9c3)) adds visual interest and makes the form pop.

  2. Form Styling:

    • The .sign-in-form is given a white background, padding, and rounded corners (border-radius: 10px) to create a clean, card-like appearance.
    • box-shadow adds depth by creating a subtle drop shadow.

  3. Input and Button Styling:

    • Inputs and buttons are styled with padding and border-radius for a modern, user-friendly look.
    • The submit button changes color on hover to provide interactive feedback.

3. Adding JavaScript for Basic Form Handling

Now, we’ll add a basic JavaScript function to handle the form submission process. This script will prevent the default form behavior and simulate a sign-in process.

// scripts.js

document.getElementById('sign-in-form').addEventListener('submit', function(e) {
  e.preventDefault(); // Prevent default form submission

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  // Simulate sign-in logic
  if (username === 'user' && password === 'pass') {
    alert('Sign-in successful!');
  } else {
    alert('Invalid username or password. Please try again.');
  }
});

Explanation of the JavaScript:

  1. Form Submission Handling:
    • We prevent the form’s default submission using e.preventDefault().
    • The username and password are retrieved from the input fields and validated. If the credentials are correct (in this case, user and pass), the script alerts the user of a successful login. Otherwise, it displays an error message.

In a real-world scenario, this would involve submitting the form data to a backend server for validation.

4. Responsive Design Considerations

It’s important to ensure that the fullscreen sign-in form is responsive and works well on smaller devices like mobile phones. You can achieve this with media queries.


@media (max-width: 768px) {
  .sign-in-form {
    padding: 30px;
  }

  .sign-in-form input, .sign-in-form button {
    font-size: 14px;
    padding: 12px;
  }
}

This media query reduces the padding and font size of the form on devices with a screen width of 768px or less, ensuring the form remains user-friendly on smaller screens.

Enhancing the Fullscreen Sign-In Form

While the basic fullscreen sign-in form works well, you can enhance it further by adding additional features and improvements.

1. Adding an Eye Icon to Toggle Password Visibility

To make the form more user-friendly, you can add an eye icon next to the password input to toggle password visibility.


<div class="password-group">
  <input type="password" id="password" name="password" placeholder="Password" required>
  <span id="toggle-password">👁️</span>
</div>


// Toggle password visibility
document.getElementById('toggle-password').addEventListener('click', function() {
  const passwordField = document.getElementById('password');
  if (passwordField.type === 'password') {
    passwordField.type = 'text';
  } else {
    passwordField.type = 'password';
  }
});

This JavaScript function toggles the password field between text and password, allowing users to see the characters they are typing.

2. Adding a Background Blur Effect

For a more polished look, you can add a blur effect to the background when the sign-in form is displayed. This is especially useful if you’re displaying the form as an overlay.


.fullscreen-container {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

This creates a blur effect on the background, focusing the user’s attention on the sign-in form.

live preview

See the Pen Creating a Full screen Sign-In Form with CSS and JavaScript by codepen (@codepen-the-selector) on CodePen.


Conclusion

Creating a fullscreen sign-in form using CSS and JavaScript is an effective way to provide a modern, immersive login experience. By centering the form on the screen and eliminating distractions, you can ensure users focus solely on the sign-in process. With enhancements like password visibility toggling and responsive design, this form can provide both functionality and aesthetics.

Tags

You may like these posts

Previous Post Next Post

نموذج الاتصال