---

TH

TH

SPACEEEEEEEEEEEEEEEEEEEEEEEE

index

---

SPAcE

Day 1

SPACEE

|

SPAcECEE

Day 2

SPACEEEE

|

SPAcE

Day 3

SPACEEE

|

SPAcECE

Day 4

SPACEEE

|

SPAcE

Day 5

SPACEEE

|

SPAcE

Day 6

SPA

|

---

📝 Forms in HTML

The First Principle: The Web Needs to Be a Two-Way Street

The fundamental truth is that a website isn't just a brochure for you to read. For the web to be useful,

it needs a way to **collect information *from* the user** 

and send it back to the server.

Without this, you couldn't log in, search for a video, buy a product, post a comment, or send a message. The web would be a read-only library.

The Core Problem

How do we create a standardized, reliable system to:

1. Display interactive fields for a user to fill in (text boxes, checkboxes, dropdowns).



2. Packagethe user's data neatly.



3. Send that package to a specific destination on a server.



4. Tell the server how the data is being sent.

The logical solution to this entire problem is the HTML  <"form">.

How do I Implement forms? (Input tag)

<input> This is the most common form tag. It's a self-closing tag that creates an input field. Its behavior changes based on its type attribute.

Basic Role

- <input> is a self-closing tag.
- It collects data from the user.
- That data is usually sent to a server when the form is submitted.

---

The "type" Attribute

---

Text Field

A single-line input for normal text.

Code: <input type="text" name="username">
Working:

---

Password Field

Hides typed characters (for passwords)

Code: <input type="password" name="pass">
Working:

---

Email Field

Accepts only valid email addresses

Code: <input type="email" name="email">
Working:

---

Number Field

Allows numeric values only.

Code: <input type="number" name="age">
Working:

---

Checkbox

Lets user select multiple options (on/off)

Code: <input type="checkbox" name="subscribe">
Working:
Subscribe

---

Radio Button

Lets user pick only one option from a group

Code:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Working:
Male Female

---

File Upload

Lets user upload a file from device

Code: <input type="file" name="resume">
Working:

---

Submit Button

Creates a button to submit the form

Code: <input type="submit" value="Send">
Working:

---

Normal Button

A general button (no default behavior).

Code: <input type="button" value="Click Me">
Working:

---

Important Attributes

---

1. name → Gives the input a key, so when submitted, the server knows which field the data belongs to.


2. value → Default or pre-filled value.


3. placeholder → Grey text hint inside the field.


4. required → Makes input mandatory.


5. readonly → Field can’t be edited but can be copied.


6. disabled → Field is inactive and not sent with the form.


7. maxlength → Limits the number of characters.

---

How Data is Sent

---

When you put <input> inside a <form>, and hit submit:
- The browser collects all inputs with a "name".
- Creates a data package like:
  username=John&password=1234
- Sends it to the server (to the URL in the form’s "action").

Example:
<form action="/submit" method="POST">
  <label>Username:</label>
  <input type="text" name="username" placeholder="Enter username" required>

  <label>Password:</label>
  <input type="password" name="password" required>

  <input type="submit" value="Login">
</form>

If we combine all this we get a proper form as shown below