How To Make a Basic Sign-Up Page in HTML

Creating a basic sign-up page in HTML is a fundamental step in web development. Below is a simple example of how to create a basic sign-up page using HTML

Step #1:- Create a html page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
    <link rel="stylesheet" href="style.css">
</head>
<div class="container">
    <h2>Sign Up</h2>
    <form action="#" method="post">
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required>
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
      </div>
      <div class="form-group">
        <button type="submit">Sign Up</button>
      </div>
    </form>
  </div>
  </body>
</html>

Step #2:- Create a CSS page

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
  }
  
  .container {
    max-width: 400px;
    margin: 100px auto;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .form-group button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
  }

Output:-

Hopefully, It will help you …!!!

Related Posts

How to Choose and Use Vehicle Rental Management Software in Europe

Managing a vehicle rental fleet—whether you run a small fleet of scooters in Athens, a motorcycle tour company in the Alps, or a local car hire business…

Read More

MyEventsNow USA: A Complete Guide for Attendees and Organizers

Maya opened her laptop on a Tuesday night. She wanted to plan a fun weekend for her friends. One friend wanted live music. Another wanted comedy. A…

Read More

How DataOps Improves Decision Making in Enterprises

Enterprise decision-making rarely fails because leaders lack data. It fails because the data they receive arrives too late, lacks context, or cannot be trusted. A sales report…

Read More

Manufacturing Analytics Optimization with DataOps

Manufacturing plants generate more data than ever—historian tags, MES records, PLC signals, quality measurements—yet most of it never reaches a decision that improves the line. The gap…

Read More

How TheDataOps.org Guides Automation in Analytics Teams

Analytics teams often face a stubborn paradox: the more data they manage, the less time they spend on analysis that actually matters. Manual checks, repeated report rebuilding,…

Read More

Discovering Festivals, Concerts, and Workshops in Japan

Priya landed in Tokyo on a Friday with no plans. A friend back home had told her about a weekend music night in Osaka. She opened her…

Read More
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
0
Would love your thoughts, please comment.x
()
x