HTML for Absolute Beginners

Forms and Inputs

3 min read Last updated 44 minutes ago

Forms are how you collect data from visitors — contact messages, searches, logins and more.

The form element

html

<form action="/subscribe" method="post">
    <!-- fields go here -->
</form>

action — where the form data is sent
method — get or post

Labels and inputs

Every input needs a <label>. Clicking the label focuses its input:

html

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

<label for="password">Password</label>
<input type="password" id="password" name="password" minlength="8" required>

✓

Why labels matter

Labels improve accessibility and enlarge the clickable area of small inputs. Never rely on placeholder text as a substitute for a label.

Common input types

html

<input type="text">        <!-- single line text -->
<input type="email">       <!-- email with basic validation -->
<input type="number">      <!-- numeric input -->
<input type="date">        <!-- date picker -->
<input type="checkbox">    <!-- boolean checkbox -->
<input type="radio">       <!-- single choice from a group -->
<input type="file">        <!-- file upload -->
<input type="submit">      <!-- the submit button -->

A complete form

html

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

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5"></textarea>

    <label for="topic">Topic</label>
    <select id="topic" name="topic">
        <option value="support">Support</option>
        <option value="feedback">Feedback</option>
    </select>

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

Validation attributes

html

<input type="email" required maxlength="255">
<input type="number" min="1" max="10">
<input type="url" required>

These give you client-side validation for free. Always validate on the server too — client-side checks are a convenience, not a security boundary.

Previous Images, Video and Embedding