Forms in HTML

Definition

HTML forms are used to collect input from users such as text, email, password, feedback, etc.
The entered data can be sent to a server for processing.

Forms are commonly used for:

  • Login pages
  • Registration forms
  • Contact forms
  • Feedback forms

Form Structure

A form is created using the <form> tag and contains different form elements like input fields, buttons, and text areas.

Basic Syntax

<form>
   <!-- form elements -->
</form>

Input Tag (<input>)

The <input> tag is the most important form element.
Its behavior depends on the type attribute.

Common Input Types

1. Text Input

Used to enter single-line text.

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

2. Password Input

Hides the characters entered by the user.

<input type="password" placeholder="Enter password">

3. Email Input

Accepts only valid email format.

<input type="email" placeholder="Enter email">

4. Number Input

Used for numeric values.

<input type="number">

5. Radio Button

Used to select only one option from multiple choices.

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

6. Checkbox

Used to select multiple options.

<input type="checkbox"> HTML <input type="checkbox"> CSS

7. Submit Button

Used to submit the form.

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

Textarea

Used to enter multi-line text such as feedback or messages.

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

Select and Option (Dropdown)

Used to create a dropdown list.

<select>
   <option>Option 1</option>
   <option>Option 2</option>
   <option>Option 3</option>
</select>

Button Tag

Another way to create a button.

<button type="submit">Send</button>

Form Attributes

AttributeDescription
action                       URL where data is sent
methodGET or POST
requiredMakes field mandatory
placeholderHint text

Complete Form Example

Example Code

<form>
   <label>Name:</label><br>
   <input type="text" required><br><br>

   <label>Email:</label><br>
   <input type="email" required><br><br>

   <label>Message:</label><br>
   <textarea rows="4" cols="30"></textarea><br><br>

   <button type="submit">Submit</button>
</form>

Output

Important Points

Forms are used to collect user data

<input> type defines behavior

POST method is more secure than GET

required ensures validation