HTML - Forms and Input in HTML

Introduction

Forms in HTML are used to collect information from users. They allow interaction between users and webpages by accepting inputs such as text, selections, or file uploads. Forms are commonly used for login pages, registration, feedback, and search functions.

The element acts as a container that holds different input controls where users enter their data.

The Form Element

The basic structure of a form is:

<form action="submit_page.php" method="post"> </form>

Important attributes:

  • action specifies where the form data will be sent

  • method defines how data is sent (commonly GET or POST)

GET sends data through the URL, while POST sends data securely within the request body.

Input Element

The tag is used to create different types of input fields. The behavior changes based on the type attribute.

Example:

<input type="text" name="username">

This creates a text box for user input.

Common Input Types

Text Input

 
<input type="text">

Used for short text such as names.

Password Input

<input type="password">

Hides typed characters.

Email Input

<input type="email">

Validates email format.

Radio Buttons

 
<input type="radio" name="gender">

Allows selecting one option from a group.

Checkbox

<input type="checkbox">

Allows multiple selections.

Submit Button

<input type="submit" value="Send">

Sends form data.

Label Element

Labels describe input fields and improve accessibility.

<label for="user">Username</label> <input type="text" id="user">

Clicking the label focuses the input field.

Textarea

Used for multi-line text input.

<textarea rows="4" cols="30"></textarea>

Common for comments or feedback.

Select and Option Elements

Used to create dropdown menus.

<select> <option>India</option> <option>USA</option> </select>

Allows choosing from predefined options.

Form Validation Attributes

HTML provides built-in validation:

  • required ensures input must be filled

  • maxlength limits characters

  • placeholder shows hint text

Example:

<input type="text" required placeholder="Enter name">

Importance of Forms

Forms are essential because they:

  • Enable user interaction

  • Collect and process data

  • Support login and registration systems

  • Power search and feedback features

  • Connect frontend with backend processing

Summary

HTML forms provide structured ways to gather user data using input elements such as text fields, buttons, dropdowns, and text areas. By understanding form structure and input types, students can build interactive webpages that communicate with servers and handle real-world user input effectively.