Lesson 5: Simple forms

What you'll learn

• How to connect labels to inputs
• How to add placeholders
• Make a simple form card

Explain like I'm 10

A form is a little box where you can type your name.

<label>Name</label>
<input placeholder="Type your name">

What are forms?

Forms collect user input (text, email, choices) and send it to a server or JavaScript when submitted. The <form> element wraps inputs and controls how data is sent.

<form action="/submit" method="post">
  <!-- inputs go here -->
</form>

Labels and inputs (for / id)

Link a <label> to an <input> using for="id" on the label and the same id on the input. This improves accessibility and makes clicking the label focus the input.

<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Your name">

Input types and labels

Common input types: text, email. Use type="email" to get basic validation. A placeholder is hint text inside the input; a label should always be present for clarity and accessibility.

<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="you@example.com">

Buttons: submit vs button

<button type="submit"> sends the form (default when inside a form). type="button" prevents submission and is used for JS actions. Be explicit to avoid accidental submits.

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

Form layout and styling

Keep inputs stacked with proper spacing and provide a clear focus ring for keyboard users.

.form-card { max-width: 380px; border: 1px solid #e6e6e6; padding:16px; border-radius:10px; }
.form-card label{ display:block; margin-top:12px; }
.form-card input, .form-card textarea { width:100%; padding:8px; margin-top:6px; border:1px solid #ccc; border-radius:6px; }
.form-card input:focus, .form-card textarea:focus { outline: 3px solid #ffd54f; }

Example: name + email form

<form class="form-card" action="/subscribe" method="post">
  <label for="name">Full name</label>
  <input id="name" name="name" type="text" placeholder="Jane Doe" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" placeholder="you@example.com" required>

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

Common mistakes & fixes

• Missing for/id: Labels not linked to inputs — add matching for and id.
• Button defaults: Buttons inside a form default to submit; use type="button" if you don't want submission.
• No name attributes: Inputs without name won't send data to the server — include name="...".

Practice tasks

1. Create the name + email form above and test it in the browser.
2. Add a textarea for a message and label it correctly.
3. Style the form card and add a visible focus ring for accessibility.

Mini challenge

Enhance the form: add helper text under the email input, and optionally style an invalid state using :invalid.

Mini challenge

• Add a short message under the button.
• Make the button a different color.