DEV Community

How To Make a Basic Sign Up Page in HTML.

Creating a sign-up page in HTML typically means creating a basic, functional form without any specific design or styling. Here's a simple example of how you can achieve this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Undesigned Sign Up</title>
</head>
<body>
    <h2>Sign Up</h2>
    <form action="/signup" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br><br>

        <input type="submit" value="Sign Up">
    </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Explanation

Let's break down what's happening here:

<!DOCTYPE html>: This declaration defines the document type and version of HTML being used.
<html lang="en">: The opening tag for the HTML document, specifying the language as English.
<head>: Contains metadata about the HTML document, such as character set and viewport settings.
<meta charset="UTF-8">: Specifies the character encoding for the document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties for better responsiveness on different devices.
<title>Sign Up</title>: Sets the title of the document, which appears in the browser tab.
<body>: Contains the visible content of the HTML document.
<h2>Sign Up</h2>: Heading indicating that this is a sign-up form.
<form action="/signup" method="post">: Starts a form with action attribute pointing to the server-side script that will handle the form submission and method attribute set to "post" to send form data securely.
<label>: Labels for form fields, enhancing accessibility and usability.
<input type="text/email/password">: Input fields for username, email, and password, each with different types to indicate the expected data format.
required: Attribute for input fields, making them mandatory to fill out.
<input type="submit" value="Sign Up">: Submit button to submit the form data.
This basic HTML structure creates a functional sign-up form without any additional styling or design elements. You can further enhance this form by adding server-side validation and processing, as well as client-side validation using JavaScript. Additionally, you can style the form using CSS to improve its visual appearance.

Top comments (2)

Collapse
 
tahirdotdev profile image
TahirDotDev

Really helpful,
Please also write on How can someone learn logic of javascript,
I am trying to write but not getting creative ideas in my mind,

Another applause from my side

Hafiz Tahir,
hmtahirhassan@gmail.com
My Portfolio

Collapse
 
joemama123 profile image
Your Average Roblox Game Dev • Edited

Okay sure.