Forms are one of the most important components in web development. When building a website, we may need to use forms to collect data from visitors. Almost all interactive websites require forms, whether for login, registration, search, or other purposes. HTML provides a highly flexible way to create forms with a clear structure that can be customized to suit specific needs. In this article, we will discuss how to create a form and the functions of each element within the form in HTML.

What is an HTML form?

An HTML form is an element used to collect data from website visitors through inputs that they fill out and submit by pressing the submit button on the form. The data will then be sent to the server for processing, either through the HTTP GET or POST method. Note that all elements related to the form must be contained within the <form> tag. Here is an example of form usage in HTML.

<form action="/submit" method="POST">
  <label>Your Name:</label>
  <input type="text" name="name" required>
  <button type="submit">Submit</button>
</form>

Explanation of the above code.

• <form> is the opening tag for creating a form in HTML.
• action specifies the destination URL where the form data will be sent to the server.
• method specifies the method of data submission.
• <label> is useful for labeling form elements such as inputs.
• <input is an element that is useful for receiving input from users.
• type=‘text’ determines the type of input, that the input used is for text only.
• name is the name of the variable that will be sent to the server.
• required ensures that users must fill in the input before submitting the form.
• <button> is useful for creating button elements on forms.
• type='submit specifies that the button created is a submit button.

Various Methods Available in HTML Forms

Generally, there are two methods that are often used to send data to the server via forms in HTML. These two methods are GET and POST. Here is a complete explanation of these two methods.

1. GET The GET method sends data via the URL. Each input field that is filled in will be added as a query string at the end of the destination URL. An example would be https://www.nganggurdev.com/en/articles?categoryName=HTML. We can use this method when the data being sent does not contain sensitive information.
2. POST In contrast, the POST method sends data through the body of the HTTP request, rather than in the URL like the GET method. This way, the URL will not display the query string in the browser and will look neater. We can use this method when the data being sent contains important or sensitive information, such as registration forms, logins, and so on.

Important Elements in HTML Forms

When creating forms, HTML provides various input elements that can be used according to the type of data you want to collect. Some of these elements are:

• <input is used for various types of data such as text, email, numbers, dates, and so on.
• <textarea> is used for long text inputs such as comments or descriptions.
• <select> and <option> can be used to create a list of options (dropdown).
• label provides a label that is linked to a specific input element.

Complete HTML Form Example

Here is an example of a complete user registration form that is SEO Friendly.

<form action="/register" method="POST">
  <fieldset>
    <legend>Register Form</legend>

    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname" placeholder="Your fullname...." required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="example@email.com" required>

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

    <label for="gender">Gender:</label>
    <select id="gender" name="gender" required>
      <option value="">--Choose your gender--</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>

    <button type="submit">Register Now</button>
  </fieldset>
</form>

Try implementing the code above on your respective devices with the file name form-register.html. Save it, then run it and view it in your browser.

Conclusion

HTML forms are an important element in the interaction between users and websites. By understanding the structure and important elements of forms, you can create functional and SEO-friendly forms.

Thankyou, see you in the next article.