Practical Exercise 9: Forms with Checkboxes

Learn to create an HTML form from scratch with checkboxes and their correct implementation, as well as hidden fields and file uploads.

Activity

Add <input type="checkbox"> checkboxes to the previous form.

Interactive Solution

AI PlatformTurn Code into Customers.Try it free

Solution with Complete HTML Code

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form with Checkboxes</title>
  </head>
  <body>
    <h1>Form</h1>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <label for="gender">Gender:</label>
      <input type="radio" id="male" name="gender" value="male" />
      Male
      <input type="radio" id="female" name="gender" value="female" />
      Female
      <br />
      <label for="country">Country:</label>
      <select id="country" name="country">
        <option value="usa">United States</option>
        <option value="canada">Canada</option>
        <option value="mexico">Mexico</option>
      </select>
      <br />
      <label>Interests:</label>
      <input type="checkbox" id="music" name="interests" value="music" />
      Music
      <input type="checkbox" id="sports" name="interests" value="sports" />
      Sports
      <input type="checkbox" id="reading" name="interests" value="reading" />
      Reading
      <br />
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Exercise Variants

Variant 1: Checkboxes with `checked` and Data Arrays

When you mark an option by default with checked, the user already has it preselected. To send multiple checkboxes as an array, use name with square brackets.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Checkboxes with Checked</title>
  </head>
  <body>
    <h1>Newsletter Subscription</h1>
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />
      <br /><br />

      <p>Select the topics you're interested in:</p>
      <input type="checkbox" id="html" name="topics[]" value="html" checked />
      <label for="html">HTML</label><br />
      <input type="checkbox" id="css" name="topics[]" value="css" checked />
      <label for="css">CSS</label><br />
      <input type="checkbox" id="js" name="topics[]" value="javascript" />
      <label for="js">JavaScript</label><br />
      <input type="checkbox" id="python" name="topics[]" value="python" />
      <label for="python">Python</label><br />
      <br />

      <button type="submit">Subscribe</button>
    </form>
  </body>
</html>

The name="topics[]" sends the selected values as an array to the backend. checked preselects HTML and CSS.

Variant 2: Hidden Field with `<input type="hidden">`

Hidden fields send data to the server without showing it to the user. They're useful for IDs, tokens, or metadata.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form with Hidden Field</title>
  </head>
  <body>
    <h1>Edit Profile</h1>
    <form action="/update-profile" method="POST">
      <!-- Hidden field with the user ID -->
      <input type="hidden" name="user_id" value="12345" />
      <!-- Anti-CSRF security token -->
      <input type="hidden" name="csrf_token" value="aB3xZ9..." />

      <label for="name">Name:</label>
      <input type="text" id="name" name="name" value="John Smith" />
      <br /><br />

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" value="john@email.com" />
      <br /><br />

      <button type="submit">Save Changes</button>
    </form>
  </body>
</html>

hidden fields are not visible on the page but travel with the form. The server uses them to identify the user and validate the request.

Variant 3: File Upload with `<input type="file">`

For forms that allow attaching files, use type="file" and enctype="multipart/form-data".

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>File Upload</title>
  </head>
  <body>
    <h1>Apply for the Position</h1>
    <form action="/applications" method="POST" enctype="multipart/form-data">
      <label for="name">Full Name:</label>
      <input type="text" id="name" name="name" required />
      <br /><br />

      <label for="resume">Resume (PDF):</label>
      <input
        type="file"
        id="resume"
        name="resume"
        accept=".pdf,.doc,.docx"
        required
      />
      <br /><br />

      <label for="photo">Profile Picture:</label>
      <input
        type="file"
        id="photo"
        name="photo"
        accept="image/*"
      />
      <br /><br />

      <button type="submit">Submit Application</button>
    </form>
  </body>
</html>

enctype="multipart/form-data": mandatory for file uploads. Without it, the file is not sent.
accept=".pdf,.doc,.docx": filters file types in the selection dialog.
accept="image/*": accepts any image format.

Mini-Challenge: Put It to the Test

Create a subscription form containing:

Name and Email (with required)
Preferences (4 checkboxes with name="preferences[]", at least 1 with checked)
Profile Picture (<input type="file" accept="image/*">)
A hidden field plan with value "free"
Don't forget enctype="multipart/form-data"

Try to build it completely without looking at the examples. If you get stuck, go back to the variant you need.

Common Mistakes with Checkboxes and Files

Mistake	Why It's a Problem
Confusing checkbox with radio button	Checkbox allows multiple selection; radio button allows only one option. Use checkbox when the user can choose multiple things
Forgetting `enctype="multipart/form-data"` on file uploads	The file is not sent to the server. This attribute is mandatory for `<input type="file">`
Not limiting file size	Users can upload huge files that overwhelm the server. Validate size in frontend (`accept`) and backend
Using `checked` instead of `selected`	`checked` is for checkbox/radio, `selected` is for `<option>`. They are different attributes
Forgetting `name` with square brackets for multiple checkboxes	Without `name="topics[]"`, the server only receives the last checked value, not all of them

Frequently Asked Questions

Checkbox or radio button?

Use checkbox when the user can select multiple options at once (interests, preferences, settings). Use radio button when they must choose a single option from several (gender, payment plan, yes/no). If visually in doubt, ask yourself: can they check more than one? If yes → checkbox. If no → radio.

How do I style checkboxes with CSS?

Native checkboxes are hard to style directly. The most common technique is to hide <input type="checkbox"> with display: none or opacity: 0 and create a custom <span> or <label> next to it that acts as a visual indicator with pure CSS or pseudo-elements.

info

🔎 Explore all the details in this section 👉 Creating HTML Forms

Practical Exercise 9: Forms with Checkboxes

Activity​

Interactive Solution​

Solution with Complete HTML Code​

Exercise Variants​

Variant 1: Checkboxes with checked and Data Arrays​

Variant 2: Hidden Field with <input type="hidden">​

Variant 3: File Upload with <input type="file">​

Mini-Challenge: Put It to the Test​

Common Mistakes with Checkboxes and Files​

Frequently Asked Questions​

Checkbox or radio button?​

How do I style checkboxes with CSS?​