How to Create Forms in HTML : A Beginners Guide

Introduction

Hey! Have you filled any sign up form?

Or have you filled any entrance exam form on a website?

Do you ever think why you entrance exam form doesn’t accept if you fill the phone number in placeholder of email id?

Do you ever think how this forms of webpages are made?

Today we going to deep dive in HTML Forms. We will know how a HTML forms are made and every attributes of the HTML Form. So lets start…

The <form> Element

In previous blog we have read about HTML Tags & Elements. The <form> element is one of that. It is used to create a basic structure of form in webpages with HTML. Here is the sample code:

<form action="/submit" method="post">
    <label for="fname">First Name:</label><br>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last Name:</label><br>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email"><br><br>
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="Submit">
</form>

In the above code example we can that there is a sample code in HTML for creating form structure. There are different types of labels and input fields for different type of information.

Key Attributes of <form>

  1. action – This specifies where the data should be sent

    • Example: action="submit.php"
  2. method – It defines how the form data should be sent

    • GET: Data is sent in the URL (visible and limited in length).

    • POST: Data is sent in the request body (secure and recommended for sensitive data).

  3. enctype – It specifies encoding type while sending the data.

    • application/x-www-form-urlencoded (default)

    • multipart/form-data (for file uploads)

    • text/plain (for debugging)

  4. autocomplete – Controls autofill behavior.

    • on (default) / off

Common Form Elements

1. Input Fields

  • Text Input: <input type="text">

  • Password Input: <input type="password">

  • Email Input: <input type="email">

  • Number Input: <input type="number">

  • File Upload: <input type="file">

  • Hidden Input: <input type="hidden">

  • Date Input: <input type="date">

  • Radio Button: <input type="radio">

  • Checkbox: <input type="checkbox">

  • Range (Slider): <input type="range">

2. Labels

  • <label> associates text with an input field.

  • Example:

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

3. Textarea

  • Used for multi-line text input.

  • Example:

      <textarea name="message" rows="4" cols="30"></textarea>
    

4. Dropdown (Select)

  • Allows users to choose an option from a list.

  • Example:

      <select name="country">
          <option value="india">India</option>
          <option value="usa">USA</option>
      </select>
    

5. Buttons

  • Submit Button: <button type="submit">Submit</button>

  • Reset Button: <button type="reset">Reset</button>

  • Custom Button: <button type="button">Click Me</button>

Conclusion

We have studied in this blog that how we can make a basic structure of form in HTML. We can also use different types of labels and input fields for different type of data. After that we have also seen some common form elements like textarea, buttons, input field etc.

Hope you enjoyed reading this blog. Please hit the like button to encourage me more about writing these and click the follow button get latest updates as soon as new blog uploaded.