In this short blog we are going to see why wrapping input fields in a form tag is important

Note that, the only pre-requisite is HTML. Even if you are not familiar with HTML5, you can follow along. It is simply written.

In HTML(Hyper text markup language) we are familiar with a variety of elements ranging from semantic (form, section, article, li) to non-semantic (div, span) elements.

Often we require to accept data from users/clients. For example, when registering/signing up to a certain website, we enter our name, email and password.This data is usually entered in the input fields which are the elements of the form.

Following shows an example :

<form id="register">
    <input type="text" class="form-name" id="form-name" 
    placeholder="Enter your name.."/>
    <input type="email" class="form-email" id="form-email" 
    placeholder="Enter your email.."/> 
   <input type="password" class="form-password" id="form-password" 
    placeholder="Enter your password.."/>
    <button type="submit">Submit</button>
</form>

Note: The action tag in the form element is usually for the script which contains the logic of the backend, i.e., how this data is used in the server.

Now let's jump into the importance of it.

1. Once the data is filled up in their respective fields, it has to be submitted. When the user clicks on the submit button with attribute type="submit", the form will have an attribute action, which will get triggered automatically. Now, this reduces our work as we had to listen to the click event with javascript event listeners and deal with the data.

2. Often we have to make sure the user has filled in details before clicking submit. This is done by form validation using javascript. Now, if we wrap our input in form, we can use a boolean attribute known as required in the input tag. This will make sure, that all the required input fields are filled before submitting without writing extra code.

In the picture below, you can see how it looks like

3.A form is a semantic tag, a tag which conveys a meaning to both the browser and the developer. Using semantic tags helps assistive devices like screen readers, bots, web-crawlers better understand the content of the page in the website or web application and help in SEO and ranking of the site.

That is the end. I would personally suggest you to use form tag for forms. I hope I could bring clarity on the why of the topic. If you liked it, share it. Also, if you think there is something wrong or you have any questions, please drop a comment down below so that we can fix it.

Till then, keep developing ! 💙

Follow me on:
Linkedin
Github
Twitter