HTML: Forms & Input Elements

What you will learn

How to create interactive forms that collect user input, the different input types available, and how labels connect to inputs.

A basic form

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

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

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

Key form attributes

Attribute	What it does
`action`	URL where the form data is sent
`method`	HTTP method: `GET` or `POST`
`name`	The key sent to the server (required for data to be submitted)
`id`	Used by `<label for="...">` to connect the label to the input
`required`	Browser will not submit without this field filled
`placeholder`	Hint text inside the input (disappears on typing)

Common input types

<input type="text">        <!-- Single-line text -->
<input type="email">       <!-- Email with built-in validation -->
<input type="password">    <!-- Masked characters -->
<input type="number">      <!-- Numeric input with arrows -->
<input type="checkbox">    <!-- On/off toggle -->
<input type="radio">       <!-- Single choice from a group -->
<input type="file">        <!-- File picker -->
<textarea></textarea>       <!-- Multi-line text -->
<select>                    <!-- Dropdown menu -->
    <option>Option A</option>
</select>

Connecting labels to inputs

Use the for attribute on <label> matching the input's id:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

This makes the label clickable — clicking the label focuses the input. This is important for accessibility.

Common mistakes

Forgetting the name attribute on inputs — the server won't receive the data.
Using <input> instead of <button> for the submit button — <button> is easier to style.
Not wrapping checkbox labels correctly — click the text to toggle.
Using GET for login forms — the data appears in the URL. Always use POST for sensitive data.

Quick check below!