Form in HTML

In HTML we use <form> tag to create form inside a website. This form contains input field, text area, buttons, radio buttons, and many more. Let’s look into more.

<!-- Form Syntax -->
<form action="login.js" method="GET/POST"> 
    <!-- Form field inside here -->
</form>

As you can see the above code there is form tag with two attributes, one is “action” and another is “method”.

action: This parameter is used specify where we are going to submit the data.
method: This method specify that user is fetching data or sending data so the value can either “GET” or “POST”

The link can be different depending on method after submit button clicked

For example:
- GET: https://example.com/login.js?var1=name1&var2=name2
- POST: https://example.com/redirected_path.com

Input fields:

<form action="login.js" method="GET/POST"> 
    <input type="text" name="name" placeholder="Enter your name"/>
    <input type="password" name="passw" />
    <input type="submit" value="Submit"/>
</form>

The above code has some input fields like text field, password field, and submit field. Let’s break it down one by one:

text field: In the above code input with type text is text field where user insert their name. It has placeholder attribute which shows message on the text field before entering any character.
password field: In the above code input with type password is password field and It hides any character you type inside it like using bullet symbol (*)
submit: Submit field is button with the text Submit. Once you click Submit button it sends the data to the specified page which mentioned in the form action attribute.
NOTE: The reason why I gave name attribute to every input is because is to specify in which we are sending data to login.js

Warning: Well, we know which field is for name and which field is for password but, how a user can identify it? that means there must be label. That’s where we use label tags.

<form action="login.js" method="GET/POST"> 
    <label for="name">Enter your name:</label>
    <input type="text" name="name" placeholder="Enter your name" id="name"/>
    <label for="passw">Enter password</label>
    <input type="password" name="passw" id="passw"/>
    <input type="submit" value="Submit"/>
</form>

Label is used name the input field in the UI section. The “for” attribute used to specify which input the label is referring to and using id bind them.

Small example:

<!-- Example of GET Method -->
<form action="/search" method="GET">
    <label for="query">Search:</label>
    <input type="text" id="query" name="query" placeholder="Type a search term">
    <input type="submit" value="Search">
</form>

<!-- Example of POST Method -->
<form action="/register" method="POST">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <input type="submit" value="Register">
</form>

Major thing you need to notice:

In this above article, I specified name and password but, it’s not like this in real world products It will user_id , user_name, user_email and password.
When user using login page the method of the form is GET and when the user is using register page the method is POST.
In the old days table is used inside the align the elements when styling after flexbox and grid introduced, there will div tags which separates a section which holds label and input field of particular section like name section or password section. (I don’t know the full details, but I have seen it)
There are lot of things that I didn’t mention but, it’s just basic knowledge including other input types is your option.

Thank you for reading this article. There might be something mistake that I have made in this article, if you find it then please inform me.