Forms allow users to enter information and send it to a server.

Examples include:

• Login Forms
• Registration Forms
• Contact Forms
• Search Forms
• Checkout Forms

---

The <form> Element

The <form> element acts as a container for all form controls.

<form>
    Form Elements Here
</form>

For example:

<form>
    <label>Name</label>

    <input type="text">

    <button>
        Submit
    </button>
</form>

Everything users interact with belongs inside a form.

---

Labels (label)

A <label> describes the purpose of an input field.

<label>Name</label>
<input type="text">

Output:

Name: [________]

Labels can also be connected to an input.

<label for="email">
    Email
</label>

<input
    id="email"
    type="email">

Clicking the label automatically focuses the input.

This also improves accessibility and screen reader support.

---

Inputs (input)

The <input> element collects user information.

A basic text input:

<input type="text">

Output:

[____________]

A placeholder can provide a hint.

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

Output:

[Enter your name]

---

Common Input Types

Text:

<input type="text">

Email:

<input type="email">

Password:

<input type="password">

Output:

[••••••••]

Number:

<input type="number">

Date:

<input type="date">

Checkbox:

<input type="checkbox">

Output:

☐

Radio Button:

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

Output:

○

Color Picker:

<input type="color">

Range Slider:

<input
    type="range"
    min="0"
    max="100">

---

Common Input Attributes

Attribute	Purpose
type	Input type
placeholder	Hint text
value	Default value
required	Required field
disabled	Disable input
readonly	Read-only input
min	Minimum value
max	Maximum value

For example:

<input
    type="number"
    min="1"
    max="100">

---

Select Dropdown (select)

The <select> element lets users choose one option from multiple choices.

<select>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</select>

Output:

▼ HTML

A dropdown consists of:

Element	Purpose
select	Dropdown
option	Choice

A default option can be selected.

<select>
    <option>HTML</option>

    <option selected>
        CSS
    </option>
</select>

---

Textarea (textarea)

The <textarea> element accepts multi-line text.

<textarea></textarea>

Output:

┌─────────────┐
│             │
│             │
└─────────────┘

A placeholder may also be added.

<textarea
    placeholder="Enter your message">
</textarea>

Rows and columns can control the size.

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

---

Buttons (button)

Buttons allow users to perform actions.

Basic button:

<button>
    Click Me
</button>

Output:

[ Click Me ]

Submit button:

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

Reset button:

<button type="reset">
    Reset
</button>

Button types:

Type	Purpose
submit	Submit form
reset	Reset form
button	Custom action

---

File Uploads

Users can upload files using:

<input type="file">

Output:

Choose File

Example:

<input type="file">

Restrict uploads to images:

<input
    type="file"
    accept="image/*">

Allow only PDF files:

<input
    type="file"
    accept=".pdf">

Allow multiple files:

<input
    type="file"
    multiple>

---

Form Validation

Validation checks whether user input is valid before submitting the form.

A required field:

<input
    type="text"
    required>

The browser prevents submission if the field is empty.

---

Email validation:

<input
    type="email"
    required>

Valid:

test@example.com

Invalid:

testexample.com

---

Minimum length:

<input minlength="6">

Maximum length:

<input maxlength="20">

Number range:

<input
    type="number"
    min="1"
    max="100">

Pattern validation:

<input
    pattern="[A-Za-z]+">

This pattern accepts only letters.

---

A simple validated form:

<form>

    <label>Name</label>

    <input
        type="text"
        required>

    <label>Email</label>

    <input
        type="email"
        required>

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

</form>

---

Form Attributes

The action attribute specifies where form data is sent.

<form action="/submit">

The method attribute specifies how the data is sent.

GET:

<form method="GET">

Commonly used for:

• Search forms
• Public information

POST:

<form method="POST">

Commonly used for:

• Login
• Registration
• Sensitive information

---

Complete Form Example

<form
    action="/register"
    method="POST">

    <label for="name">
        Name
    </label>

    <input
        id="name"
        type="text"
        required>

    <label for="email">
        Email
    </label>

    <input
        id="email"
        type="email"
        required>

    <label>
        Course
    </label>

    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>

    <label>
        Message
    </label>

    <textarea></textarea>

    <input type="file">

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

</form>

---

Form Limitations

HTML provides basic validation, but it has limitations.

Validation happens only in the browser.

Users can bypass attributes such as:

required

Always validate data on the server as well.

---

HTML cannot check:

• Password strength
• Username uniqueness
• Database records

These require JavaScript or backend validation.

---

Validation messages also differ between browsers.

For example:

Chrome:

Please fill out this field.

Firefox may display a different message.

Most modern websites use JavaScript for a better user experience.

---

HTML also cannot:

• Scan uploaded files for viruses
• Verify file contents
• Resize images

These tasks must be handled by the backend.

---

Best Practices

Always use labels.

<label for="email">
    Email
</label>

Use the correct input type.

type="email"
type="password"
type="date"

Validate on both the frontend and backend.

Frontend Validation
        +
Backend Validation

Keep forms simple and ask only for the information you actually need.

---

Key Takeaway

<form>

    <label>Name</label>
    <input type="text">

    <label>Email</label>
    <input type="email">

    <select>
        <option>HTML</option>
    </select>

    <textarea></textarea>

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

</form>

Forms are one of the most important parts of web development because they allow users to interact with websites by submitting information, uploading files, logging in, registering accounts, and communicating with web applications.