Day 5: Forms & Input

Goal

Learn how to collect data from users using forms and input elements.

Topics

• Form structure: <form>
• Input types: text, number, password, email, checkbox, radio
• Buttons: <button>
• Labels: <label> for accessibility

Form Example

Basic form structure with a label, input, and submit button:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <button type="submit">Submit</button>
</form>

Input Types

• text – single line text
• number – numeric input
• password – hidden text for passwords
• email – validated email format
• checkbox – select multiple options
• radio – select one option

Practice

Build a contact form that collects:

• Name (text input)
• Email (email input)
• Message (textarea)
• Submit button

Example Solution

<h2>Contact Form</h2>
<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

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

  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>

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

Extra Tips

• Always use <label> with for attribute to improve accessibility.
• Use different input types to get proper validation automatically (e.g., email for emails).
• Use textarea for multi-line text input.