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.
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 attributeaction
, 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.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
inform
, we can use aboolean attribute
known asrequired
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 ! 💙
Top comments (0)