DEV Community

Cover image for Day 5/365 Full Stack Challenge: Build a simple HTML form with inputs
CodeWithDhanian
CodeWithDhanian

Posted on

Day 5/365 Full Stack Challenge: Build a simple HTML form with inputs

#fullstack #challenge #webdev #programming

Day 5: Creating Conversation - Building Your First HTML Form

Welcome to Day 5,

I'm Dhanian. So far, your web pages have been a one-way street: you provide information, and the user reads it. But the most powerful parts of the web are interactive. They allow users to talk back—to search, to login, to comment, to purchase.

Today, you learn how to start that conversation. We're building HTML forms. Forms are the bridge between your user and your website's functionality. They are built using a collection of tags, each designed for a specific type of input.

Let's build our first bridge.

The Foundation: The <form> Element

What it is: The <form> element is a container for all the input elements you want to collect data from. It defines where the user's data should be sent and how it should be sent.

Key Attributes:

  • action: This attribute specifies the URL where the form data should be sent for processing. This is typically a server-side script (written in PHP, Node.js, Python, etc.). For now, while we're learning, we can set this to "#", which means "submit to this same page."
  • method: This defines the HTTP method used to send the data. The two most common are:
    • GET: Appends the form data to the URL (visible to the user). Good for search forms.
    • POST: Sends the form data in the body of the HTTP request (not visible in the URL). Good for login forms, registration, or any action that changes data. 
<form action="#" method="POST">
  <!-- All input fields will go inside here -->
</form>
Enter fullscreen mode Exit fullscreen mode

The Building Blocks: Input Elements (<input>)

The <input> tag is the most versatile form element. Its behavior changes dramatically based on its type attribute.

1. Text Input (type="text")

The standard single-line text field for things like names, usernames, or search queries.

  • name: This is crucial. It's the key that identifies the data when it's sent to the server.
  • placeholder: Shows hint text inside the field that disappears when the user starts typing. 
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
Enter fullscreen mode Exit fullscreen mode

2. Email Input (type="email")

A specialized text field for email addresses. On mobile devices, it often brings up an email-optimized keyboard. Some browsers will also do basic validation to check for an "@" symbol.

<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user_email" placeholder="your.email@example.com">
Enter fullscreen mode Exit fullscreen mode

3. Password Input (type="password")

Hides the user's input with dots or asterisks for privacy.

<label for="user-password">Password:</label>
<input type="password" id="user-password" name="user_password" placeholder="Create a strong password">
Enter fullscreen mode Exit fullscreen mode

4. Submit Button (type="submit")

This button sends the form data to the URL specified in the form's action attribute. The value attribute sets the text displayed on the button.

<input type="submit" value="Sign Up">
<!-- You can also use a <button> element, which is more flexible -->
<button type="submit">Sign Up</button>
Enter fullscreen mode Exit fullscreen mode

The Essential Companion: The <label> Element

Why it's important: A <label> defines a label for a form field. Clicking the label text will focus (select) the corresponding input field, which is especially helpful for radio buttons, checkboxes, and users on touch devices. It's also critical for screen readers.

How to use it: Use the for attribute on the <label> and set its value to match the id attribute of the associated <input>. This explicitly ties them together.

<!-- The 'for' value "fname" matches the 'id' value "fname" -->
<label for="fname">First Name:</label>
<input type="text" id="fname" name="first_name">
Enter fullscreen mode Exit fullscreen mode

Putting It All Together: A Registration Form

Let's combine these elements into a complete, functional form.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Day 5: Join Our Community</title>
</head>
<body>

    <h1>Create Your Account</h1>
    <p>Please fill out this form to register with us.</p>

    <!-- The form container. The 'action' might be "process-form.php" on a real server. -->
    <form action="#" method="POST">

        <!-- Text Input for Name -->
        <p>
            <label for="full-name">Full Name:</label><br>
            <input type="text" id="full-name" name="full_name" placeholder="e.g., Alex Johnson" required>
        </p>

        <!-- Email Input -->
        <p>
            <label for="email">Email Address:</label><br>
            <input type="email" id="email" name="email" placeholder="username@domain.com" required>
        </p>

        <!-- Password Input -->
        <p>
            <label for="pwd">Password:</label><br>
            <input type="password" id="pwd" name="user_password" placeholder="At least 8 characters" required>
        </p>

        <!-- Submit Button -->
        <p>
            <button type="submit">Register Now</button>
        </p>

    </form>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Explanation: We've wrapped each label-input pair in a paragraph <p> tag for basic spacing. The required attribute is a simple HTML validation tool that prevents the form from being submitted if the field is empty. Note how each <input> has a unique id and a descriptive name.

Your Day 5 Challenge:

  1. Create a new file named form.html.
  2. Build your own form. Don't just copy the example; type it out and customize it. Ideas:
    • A contact form (Name, Email, Message).
    • A newsletter signup form (Just Email and Submit).
    • A feedback form (Name, Rating, Comments).
  3. Must include:
    • A <form> element with action="#" and method="POST".
    • At least three different <input> types (e.g., text, email, password).
    • A <label> for every single input, correctly linked using the for and id attributes.
    • A submit button (<input type="submit"> or <button type="submit">).
    • Use the placeholder attribute to give users hints.
  4. Test it! Open your form.html file in a browser. Try clicking on the labels—you should see the corresponding input field become selected. Try submitting the form (the page will refresh, which is expected since action="#" sends it back to the same page). This is the foundation. Later, we will learn to process this data.

You've just built the front-end interface for user interaction. This is a cornerstone of web development. Be proud of this step.

Keep building. See you on Day 6.

Forms are just the beginning of user interaction. To learn how to style them with CSS, validate data, and connect them to a server with JavaScript, you need a comprehensive guide. "The Complete Full-Stack Developer Handbook" covers all of this and more, providing the end-to-end knowledge you're working towards.

https://codewithdhanian.gumroad.com/l/gzjvj

— Dhanian

Top comments (0)