Forms Foundations

Forms let users send information to a website. Search bars, sign-up pages, feedback forms, login screens, booking flows, and checkout pages all rely on form markup.

Forms are one of the most important parts of HTML because they connect users to actions.

A form can:

• collect names and email addresses
• submit feedback
• upload files
• search content
• choose dates
• collect passwords
• select preferences

Why Forms Matter

Forms affect:

• usability
• accessibility
• validation
• data quality
• conversion rates
• trust

A form that is clear, well-labeled, and easy to use usually performs much better than one that is confusing or incomplete.

The <form> Tag

Purpose:

• wraps all controls that belong to one form submission

Important attributes:

• action
• method
• autocomplete
• novalidate
• target
• name
• enctype

Common method values:

• get
• post

Common enctype values:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

What action Does

The action attribute tells the browser where to send the form data.

Example:

<form action="/submit" method="post">

What method Does

• get usually appends form values to the URL
• post sends data in the request body

Use get for:

• search forms
• filters
• bookmarkable query pages

Use post for:

• sign-up forms
• login forms
• contact forms
• sending larger or sensitive data

Labels and Inputs

<label>

Purpose:

• gives an accessible name to a form control

Important attribute:

• for

The value of for should match the control's id.

Example:

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

Why labels matter:

• they make forms easier to understand
• they improve click targets
• they help screen reader users

The <input> Tag

Purpose:

• creates many kinds of form controls depending on the type

Common input types:

• text
• email
• password
• number
• checkbox
• radio
• file
• date
• search
• url
• tel
• range
• color
• hidden

Important Input Attributes

• type
• name
• id
• value
• placeholder
• required
• disabled
• readonly
• checked
• min
• max
• step
• minlength
• maxlength
• pattern
• autocomplete

name

Purpose:

• defines the key used when the form is submitted

Without a name, a control usually does not send useful form data.

required

Purpose:

• marks a field as mandatory

placeholder

Purpose:

• shows example or hint text inside a control

Important note:

• placeholders are not replacements for labels

checked

Purpose:

• preselects a checkbox or radio input

min, max, and step

Purpose:

• help constrain numeric or date-style input values

Other Core Form Tags

<textarea>

Purpose:

• collects multi-line text

Useful attributes:

• name
• id
• rows
• cols
• placeholder
• maxlength

Example:

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

<select>

Purpose:

• creates a dropdown menu

Useful attributes:

• name
• id
• required
• multiple
• size

<option>

Purpose:

• defines one selectable option inside <select> or <datalist>

Useful attributes:

• value
• selected
• disabled
• label

<button>

Purpose:

• creates a clickable button

Common type values:

• submit
• button
• reset

Example:

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

Checkboxes and Radio Buttons

Checkboxes and radio inputs are especially common.

Checkbox Example

<label>
    <input type="checkbox" name="newsletter" checked>
    Subscribe to updates
</label>

Use checkboxes when:

• more than one option may be selected
• the answer can be true or false

Radio Example

<p>Choose a plan:</p>
<label><input type="radio" name="plan" value="basic"> Basic</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>

Use radio buttons when:

• only one choice should be selected from a group

All related radio buttons should share the same name.

Example Form

<form action="/join" method="post">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>

    <label for="topic">Favorite topic</label>
    <select id="topic" name="topic">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="js">JavaScript</option>
    </select>

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

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

Common Input Use Cases

• type="email" for email addresses
• type="password" for hidden password entry
• type="search" for search bars
• type="date" for date pickers
• type="file" for uploads
• type="number" for numeric values
• type="checkbox" for toggles and multiple selections
• type="radio" for one-choice groups

A Visual Reminder

This Wikimedia Commons checklist image works well as a simple symbol of form completion, tasks, and structured input.

Source: Wikimedia Commons, "Checklist icon.png"

Text description of the image:

• it shows a checklist-style symbol
• the image suggests selection, completion, and organized input
• it connects nicely to the idea of collecting and validating user responses

Validation and User Guidance

Browsers can help with built-in validation if you use the right input types and attributes.

Examples:

• type="email" checks for email-like formatting
• required prevents empty submission
• minlength and maxlength limit text length
• pattern can enforce custom input formats

Validation helps, but it should also be kind and understandable to the user.

Good validation habits:

• explain what is wrong
• explain how to fix it
• avoid making users re-enter unnecessary data

Form Best Practices

• every control should have a label
• use the correct type
• keep field names meaningful
• group related inputs clearly
• keep forms short when possible
• help users recover from mistakes
• do not rely only on placeholder text

Common Mistakes

• leaving out name
• using placeholder text instead of labels
• choosing the wrong input type
• not grouping radio buttons with the same name
• using reset buttons when they may erase user progress by accident
• making required fields unclear