Onjsdev

Share


HTML Form and Inputs

HTML Form and Inputs


By onjsdev

Dec 28th, 2023

Forms and inputs are essential components of any web page. It allows users to input data and interact with websites. As a result of this interaction, information is obtained and sent to a server for processing, management and storage.

In this article, we will cover how to create a HTML form and input tags placed in the forms. Let's get started.

How To Create A HTML Form

To create a form, HTML provides a wrapper <form> tag. A form tag gets two main attributes, action and method.

Here is an example:

<form action="/submit-form" method="POST">
  <!-- form elements go here -->
</form>

The attributes in this html form are:

  • action: specifies where the form data should be submitted,
  • method: determines the HTTP method used to submit the data

Simply put, when the form above is submitted, it sends a POST request to the /submit-form endpoint on the server, so that the server can process the form data.

What are Input Tags

To obtain data from users, HTML provides several types of input elements, each with its own set of attributes and behaviors.

Here are some of the most common form input elements:

Input Tags

As its name suggests, input tags are used to gather user input from users. The type attribute determines the behavior and functionality of the input tag.

Here are the different types of input tags:

<input type="text" name="username" />
<input type="password" name="password" />
<input type="email" name="email" />
<input type="number" name="age" />
<input type="checkbox" name="agree" />
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />

different types of HTML input tags

Select Tag

Select tag allows users to select an option from a dropdown list. The option tags specify the available options.

<select name="country">
  <option value="usa">United States</option>
  <option value="canada">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

Here is the visual appearance of the select element above:

HTML Select Tag

Textarea

A Textarea tag allow users to enter multiple lines of text.

<textarea name="comments"></textarea>

HTML textarea tag

Conclusion

HTML form and input elements are an essential components of websites. They allow users to input and send data to server. In this article we have covered basics of the HTML form and different types of input elements elements.

Thank you for reading.