HTML Forms Guide | Nikhil Learn Hub

Introduction to HTML Forms

What is an HTML Form?

An HTML form collects user input and sends it to a server for processing. Forms are built with the <form> element and various input controls such as <input>, <textarea>, <select>, and <button>. Every login page, search box, checkout page, or feedback form you see on the web is powered by HTML forms.

Basic Form Structure

Example: Contact Form

HTML Code:

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

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

Common Input Types

The <input> element supports many different type values. Some of the most common are:

type="text" – single-line text input.
type="email" – email address input with basic validation.
type="password" – masked password field.
type="checkbox" – multiple-choice options where more than one can be selected.
type="radio" – a single choice from a named group of options.
type="submit" – submit button to send the form.

Select, Textarea & Buttons

In addition to <input>, HTML provides several other important form controls:

<textarea> – multi‑line text input for longer messages.
<select> and <option> – dropdown menus.
<button> – flexible button element, often used for submit or reset actions.

Example: Feedback Form Controls

HTML Code:

<label for="topic">Topic</label>
<select id="topic" name="topic">
    <option value="">Choose a topic</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
</select>

<label for="feedback">Feedback</label>
<textarea id="feedback" name="feedback" rows="4"></textarea>

Labels & Accessibility

Every input should be associated with a <label> to improve usability and accessibility.

Use for on labels to match the input id.
Ensure form controls have clear, descriptive labels.

Accessible Label Example:

<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

Important Form Attributes

action - URL where form data is submitted.
method - HTTP method, usually get or post.
autocomplete - helps browser fill known values.
enctype - required for file uploads (multipart/form-data).

Example:

<form action="/register" method="post" autocomplete="on">
    ...
</form>

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="resume">
</form>

Real-World Example: Job Application Form

Full Name

Phone

Experience (Years)

Role

Cover Letter