HTML Form

 

HTML Form : 

HTML form is used to collect/garther user input/information and send it to a server for processing. e.g. Registration Form, Login Form etc. Forms can include text fields, checkboxes, radio buttons, dropdowns, and buttons. The `<form>` tag wraps all these form elements.

Common Attributes used in <form> tag : 

action : URL where form data is sent after submission.

method : HTTP method (`get` or `post`) used to send data.

name : Name of the form (optional).

id : Unique identifier for the form (optional).

Syntax :

<form action="/registration" method="post" name="registrationForm" id="regForm">

...

...

...

</form>

method attribute has two values. i) post ii) get

method="get"

It sends form data as URL parameters (appended to the action URL).

Visibility: The data is visible in the browser’s address bar.

Use Case: It is suitable for non-sensitive data, search queries, or bookmarking results.

Data Limit: It is limited by URL length (about 2048 characters).

Example:

<form action="/search" method="get">
    <input type="text" name="q">
    <button type="submit">Search</button>
 </form>

 

Effect: After submitting,  the form navigates to `/search?q=yourinput` which can be visible in the browser address bar.

method="post"

It sends form data in the HTTP request body (not visible in the URL).

Visibility: The data is not shown in the address bar.

Use Case: It is suitable for sensitive data (passwords, personal info), file uploads, or large amounts of data.

Data Limit:  No practical size limit for most use cases.

Example:

  

<form action="/submit" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

Effect:  After Submitting, the form sends data to '/submit' in the request body.

Key differences between GET and POST HTTP methods:

Feature	GET	POST
Data Location	Appended in URL (query string)	Sent in the body of the HTTP request
Visibility	Visible in the browser address bar	Not visible in the address bar
Data Size	Limited by URL length (around 2048 characters in most browsers)	No significant size limitation
Security	Less secure (data can be cached, logged, bookmarked)	More secure for sensitive data (e.g., passwords)
Use Case	Retrieving data: search queries, filters, navigation	Sending data: login forms, registration, file uploads

 

HTML elements used inside a <form>....</form> :

Element	Description	Example
<input type="text">	Single-line text input	<input type="text" name="username">
<input type="password">	Password input (hidden characters)	<input type="password" name="pwd">
<input type="email">	Validates email format	<input type="email" name="email">
<input type="number">	Numeric input with optional limits	<input type="number" name="age" min="1" max="100">
<input type="date">	Date selection using a calendar	<input type="date" name="dob">
<input type="radio">	Select one option from a group	<input type="radio" name="gender" value="male"> Male
<input type="checkbox">	Select multiple options	<input type="checkbox" name="hobby" value="music"> Music
<select> <option>	Dropdown menu	<select name="country">   <option value="india">India</option> </select>
<textarea>	Multiline text input	<textarea name="msg" rows="4" cols="30"></textarea>
<input type="file">	File upload field	<input type="file" name="resume">
<input type="submit">	Submit the form	<input type="submit" value="Submit">
<input type="reset">	Reset form fields	<input type="reset" value="Clear">
<input type="hidden">	Send hidden data with form	<input type="hidden" name="id" value="123">
<button>	Custom button, often used with JavaScript	<button type="button">Click Me</button>
<label>	Descriptive label for inputs	<label for="email">Email:</label>
<fieldset> <legend>	Group related fields with a border and title	<fieldset>   <legend>Account Info</legend>   ...form elements... </fieldset>

We will discuss further about all the elements in next chapter.