HTML Form — Design Examples

Today, users demand a personalized experience in almost every digital interaction. They want to be able to input their own data into a website instead of having to enter information the way the site owner expects it. This is where HTML forms come in. In this article, you will learn how to create dynamic forms in HTML and how they work. You’ll also discover the different types of form inputs available and best practices for designing and implementing your next set of HTML forms. Also, you will see how you can create a registration form in HTML.

What is an HTML Form?

A form is a web page that allows users to type in the information that will be sent to a server. The most common types of data users enter into a form names, emails, addresses, URLs, etc. A form consists of fields, which are areas where the user can enter data. Fields can be text boxes where users can type, select boxes where they can make a selection, etc. This data is then sent to a server where it can be stored in a database or used to generate a response.

For example — When creating an online store, users must be able to input their name, address, and credit card information when purchasing a product. This data is entered into a form and then sent to the server so the user can be verified and paid.

HTML Form Basics

Forms are a fundamental part of almost every website. Whether it’s to create an account, purchase a product, send information, or even just ask a question, forms are used to collect data from users. This data could be their name, email address, or even something more complex like their favorite color and number of children. Forms consist of three main parts: The opening form> tag, the input> elements, and the closing /form> tag. Similar to that, there may be more crucial HTML Interview Questions and Answers that can be asked throughout HTML interviews.

HTML Form Components

• Text Inputs — Text boxes allow users to enter text into your form. You can specify the initial text that appears inside the box by adding it as a value for the “placeholder” attribute.
• TextArea — Text areas allow you to collect large amounts of text from users. They are commonly used for comments or feedback boxes.
• Checkbox and Checkbox Group — Checkboxes allow users to select one or more items from a list.
• Radio Button and Radio Button Group — Radio buttons let users choose one option from many. They are typically used in surveys or quizzes.
• Select Box — Select boxes are used when you want users to select one item from a group. These are different from radio buttons in that more than one item can be selected at once.
• Reset Button — Resetting all form data values to their default values requires pressing the reset button. If a user enters incorrect information, they can quickly fix it by selecting the “Reset Button”.
• Action — When a form is submitted, the action attribute determines where to deliver the form data.
• Target — The response that is obtained after submitting the form is displayed according to the name or keyword specified by the target attribute.
• HTTP Methods — The HTTP method used to deliver data while submitting the form is specified using the HTML form method Attribute. The HTTP protocol has two different types of methods: GET and POST. The form element supports the method attribute.
• GET: With the GET method, the form values will appear in the address bar of the new browser tab when the form has been submitted. It is only allowed to be roughly 3000 characters long. Only non-secure data, not sensitive data, can be used with it.
• POST: Unlike the GET method, which made the form values visible in the address bar of the new browser tab after submission, the post method hides them. It adds form information to the HTTP request’s body. It is not constrained by size. The result cannot be bookmarked using this approach.

HTML Forms in Real-World Applications

Let’s look at how forms are used in some of the most common applications.

• Website Signup — To create a website or blog, you will need a place to store the content. One of the easiest ways to do this is to use a service such as WordPress, which allows users to create content (posts, images, videos, etc.) and store it on their servers.
• Browser Signup — A browser signup form can be used to encourage customers to create an account and log in. This is often used in e-commerce stores so customers can track their orders or be notified of any special deals.
• Email Signup — An email signup form is used when you want to collect the user’s email address. This form is often used with newsletters or subscription-based services.
• Others — There can be other places where the form can be used like — Address, Message, etc.

How to create HTML Forms?

The form tag is a tag found in HTML. This form tag allows us to design a form that has all different types of input fields. The form element is also in charge of sending form data to the server using various HTTP Requests (Like, GET, POST, DELETE, PATCH, etc). So let’s understand how we can create the form with the help of an example.

Designing a login signup form using HTML

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>HTML Form</title>
 </head>
 <body>
 <h1>Login Form</h1>
 <form>
 <label for="email">Email address</label>
 <input type="email" id="email" placeholder="name@example.com">
 <br>
 <label for="password">Password</label>
 <input type="password" id="password">
 <br>
 <button type="submit">Login/Signup</button>
 </form>
 </body>
</html>

The Output of the above code will be -

In the above code inside the form tag, we have created a label that will point to the text field of email and password. And there is a submit button that is used to submit the form data or send the form data to the server.

If we want to send the form data to the server side, then we can add the request type and action in the <form> tag. This will be like this -

<form method='POST' action='/login'>
-
-
</form

Let’s develop a slightly more intricate one using the HTML registration form now.

Registration form in HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Form</title>
  </head>
  <body>
    <h1>Registration Form</h1>
    <form>
        <label for="email">Email address</label><br>
        <input type="email" id="email" placeholder="name@example.com">
        <br><br>

        <label for="name">Full Name</label><br>
        <input type="text" id="name" placeholder="Full Name">
        <br><br>

        <label for="mobile">Mobile</label><br>
        <input type="text" id="mobile" placeholder="Mobile Number">
        <br><br>
       
        <input type="radio" name="gender" id="male">
        <labelfor="male">
            Male
        </label>
         
        <input type="radio" name="gender" id="female">
        <label for="female">
            Female
        </label>
        <br><br>

        <select>
            <option selected>Select State</option>
            <option value="1">Delhi</option>
            <option value="2">Mumbai</option>
            <option value="3">UP</option>
        </select>
        <br><br>

        <label for="address">Complete Address</label><br>
        <textarea id="address"></textarea>
        <br><br>

        <label for="password">Password</label><br>
        <input type="password" id="password">
        <br><br>
        <button type="submit">Login/Signup</button>
    </form>
  </body>
</html>

The Output of the above HTML code for registration is -

Conclusion

HTML registration forms are frequently used when you wish to gather user information. Later-created applications may incorporate this data as a component. There are numerous uses for the information gathered through the forms. Despite the fact that I’m sure everyone has already used HTML forms. As an illustration, enter your credentials to log in to social media, fill up your address to make an online purchase, etc. This could be a question in a beginner’s interview about the various ways we can make HTML forms.