HTML Forms – Theoretical Concepts

The <form> Tag

The <form> tag is the container for all form elements. It defines how data is sent to the server.

action: Destination URL where data is sent.
method: Defines how data is sent.
- GET: Appends data in URL, visible in browser. Suitable for small, non-sensitive data.
- POST: Sends data in request body. Suitable for sensitive or large data.

Form Input Elements (<input>)

The <input> tag creates interactive fields. The type attribute defines its behavior. The name attribute identifies the data on the server.

text: Single-line text input.
password: Masks characters for sensitive input.
submit: Button to send form data.
checkbox: Allows multiple selections.
radio: Allows only one selection from a group.
file: Upload files from device.
email: Email field with validation.
number: Numeric input, supports min and max.
date: Opens a date picker.
color: Color picker.
range: Slider control.

Other Form Tags

<label>: Describes an input field. Uses for with input id.
<textarea>: Multi-line input field.
<select> + <option>: Creates dropdown menus.
<button>: Creates a button (submit, reset, or custom).

Extra Attributes

name: Key sent to server with the value.
id: Unique identifier, links label to input.
placeholder: Hint text inside the field.
required: Makes field mandatory.
value: Predefined value sent if selected.

Quick Reference Table

HTML Forms Revision

Why Forms Exist

Forms collect information from users. They allow websites to log in, search, comment, and place orders.

<form> – The Container

Groups fields together for submission.

<input> – The Box for Data

Creates input fields. Behavior changes with type (text, radio, checkbox).

<label> – Meaning for Inputs

Labels describe inputs. Use for with id for accessibility.

First Name:

name Attribute – The Data Key

The name tells the server what the data represents.

Radio Buttons (Select One)

Only one option can be selected at a time.

Small
Medium
Large

Checkboxes (Select Many)

Users can select multiple options.

Pepperoni
Mushrooms
Onions

<button> – A Better Submit

<textarea> – Multi-line Input

Comments:

<select> + <option> – Dropdown

Country:

HTML5 Specialized Inputs

Password Input

Use type="password" for hidden text entry.

Password:

Number Input (with min and max)

Use type="number" to accept numeric values only.

Age (18-99):

Date Input

Use type="date" to show a calendar picker.

Date of Birth:

Other Useful Types

More input types introduced in HTML5:

type="color" → Color picker
type="range" → Slider control
type="file" → File upload

Extra Attributes

Useful form attributes:

required → Makes input mandatory
placeholder → Shows hint text inside the box

Example with placeholder and required

Tag/Attribute	Purpose
<form>	Main container for form elements
action	URL where data is sent
method	HTTP method (GET or POST)
<input type="text">	Single-line text input
<input type="password">	Hidden/masked text input
<input type="submit">	Submit button
<input type="checkbox">	Select multiple options
<input type="radio">	Select only one option from a group
<input type="file">	File upload
<input type="email">	Email field with validation
<input type="number">	Number input with min/max
<input type="date">	Date picker
<input type="color">	Color picker
<input type="range">	Slider input
<label>	Describes an input field
<textarea>	Multi-line input field
<select> & <option>	Dropdown list with choices
<button>	Customizable button
name	Key to identify submitted data
id	Unique identifier within page
placeholder	Hint text inside field
required	Makes input mandatory
value	Predefined value sent with form