HTML Forms: A Beginners Guide
How to Create Forms in HTML: A Beginners Guide

How to Create Forms in HTML: A Beginners Guide

Rana Vikram Sinha's photo
Rana Vikram Sinha
·

4 min read

Table of contents

Have you ever wondered how websites allow or let you to log in, register, search or sign up with ease ? The answer lies in HTML forms which is the fundamental building block of web interaction where you fill in your name, emails, passwords, etc. In this guide you will learn how to create form in HTML and make it functional and user friendly. But you must first understand what HTML forms are so then start with it.

What is an HTML Forms

HTML form is a container for user inputs that allows data to be sent to a server. HTML form serves as a bridge or thinks as a middleman between users and websites that enables functionalities like log in, sign up, registration, searches, etc.

Creating Your First HTML Form

The <Form> tag is the foundation of every form which you usually see on all over the website. HTML form specifies the destination and method (GET or POST) of data submission.

Example →

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Forms</title>
</head>
<body>
    <h1>HTML Forms</h1>

    <form action="/" method="post">
        <label for="username">Name:</label>
        <input type="text" name="username" placeholder="Enter your username">

        <label for="email">Email:</label>
        <input type="email" name="email" placeholder="Enter your email">

        <label for="password">Password:</label>
        <input type="password" name="password" placeholder="Enter your password">

        <button type="submit">Submit</button>
    </form>

</body>
</html>

Forms with Attributes

Key Attributes →

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Forms</title>
</head>
<body>
    <h1>HTML Forms</h1>

    <form action="/" method="post">
        <label for="username">Name:</label>
        <input type="text" name="username" placeholder="Enter your username"
        required minlength="8" maxlength="16">

        <label for="email">Email:</label>
        <input type="email" name="email" placeholder="Enter your email"
        required minlength="8" maxlength="16">

        <label for="password">Password:</label>
        <input type="password" name="password" placeholder="Enter your password"
        required minlength="8" maxlength="16">

        <button type="submit">Submit</button>
    </form>

</body>
</html>

<input type="email" name="email" placeholder="Enter your email" required minlength="8" maxlength="16">

1 → Required → Makes inputs mandatory.

2 → minlength → At least the number of characters should be filled in the input fields.

3 → maxlength → Limits the number of characters in input fields.

4 → placeholder → Provides a hint of what to fill in a particular input field.

NOTE → To know more about other attributes of form here is the link - developer.mozilla.org/en-US/docs/Web/HTML/E..

Form Method - GET and POST

→ GET → Use GET when you want to retrieve data from the server like searching for something on a website that data you submit is appended to the url making it visible. This is great for non-sensitive data as the url can be bookmarked or shared. However it has limitations such as a maximum url length and no security for sensitive information which can lead to data manipulation by the hackers.

→ POST → Use POST when sending sensitive or large amounts of data such as login credentials or form submissions. The data is included in the request body which make it more secure and invisible in the url. POST is the preferred method for actions that modify data on the server like creating or updating a resource.

Examples →

→ GET

<form action="/search" method="GET">
    <input type="text" name="query" placeholder="Search">
    <button type="submit">Search</button>
</form>

→ POST

<form action="/login" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

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

    <button type="submit">Login</button>
</form>

Some Tips for Accessible Form

→ Use <label> tags to associate text with input fields.

→ Add aria-label or aria-describedby attributes for better screen reader support.

→ Use tabindex to control the focus order of elements, making navigation easier for users relying on keyboards.

→ Group related inputs with the <fieldset> and <legend> tags to provide context.

→ Avoid fully relying on placeholder text for instructions and use labels to ensure clarity.

→ Include a submit button with a descriptive label like "Submit Form" or "Register" to make the action clear.

Conclusion

Creating forms in HTML is essential for building interactive websites and understanding the basics of forms, attributes and methods you can create functional and accessible forms.

Thanks for reading this far really appreciate it.

ChaiCodeformsHTML5