Forms and Inputs
What is an HTML Form?
Forms are how users send data to a web application — signing up, logging in, searching, or contacting you. The <form> element is the wrapper for all form controls.
<form action="/submit" method="POST">
<!-- form controls go here -->
</form>
Key attributes:
action— the URL where the form data is sentmethod—GET(data in URL) orPOST(data in request body, used for sensitive data)
The <input> Element
<input> is the most versatile form element. The type attribute changes what kind of input it renders:
<!-- Text -->
<input type="text" placeholder="Your name" />
<!-- Email — validates email format automatically -->
<input type="email" placeholder="you@example.com" />
<!-- Password — hides characters -->
<input type="password" placeholder="••••••••" />
<!-- Number -->
<input type="number" min="1" max="100" />
<!-- Date -->
<input type="date" />
<!-- Checkbox -->
<input type="checkbox" /> Remember me
<!-- Radio buttons -->
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> Pro
<!-- File upload -->
<input type="file" accept="image/*" />
<!-- Hidden field -->
<input type="hidden" name="source" value="homepage" />
<!-- Submit button -->
<input type="submit" value="Send" />
Labels
Every input should have a <label> linked to it. This improves accessibility and usability — clicking the label focuses the input:
<!-- Method 1: label wraps the input -->
<label>
Full Name
<input type="text" name="fullname" />
</label>
<!-- Method 2: for/id linking -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email" />
Textarea
For multi-line text:
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" placeholder="Type your message here..."></textarea>
Select Dropdown
<label for="track">Choose a track</label>
<select id="track" name="track">
<option value="">-- Select --</option>
<option value="frontend">Frontend Engineering</option>
<option value="backend">Backend Engineering</option>
<option value="data">Data Analysis</option>
<option value="design">UI/UX Design</option>
</select>
Important Input Attributes
| Attribute | Purpose |
|---|---|
name | Key used when form data is submitted |
id | Links to a <label>'s for attribute |
placeholder | Hint text shown inside empty input |
required | Prevents form submission if empty |
disabled | Makes the field non-editable |
readonly | Field is visible but cannot be edited |
value | Default value |
min / max | Range for number/date inputs |
maxlength | Maximum character count |
<input
type="email"
id="email"
name="email"
placeholder="you@example.com"
required
maxlength="100"
/>
Buttons
<!-- Submits the form -->
<button type="submit">Send Message</button>
<!-- Resets all fields to default -->
<button type="reset">Clear</button>
<!-- General button, no form behaviour -->
<button type="button">Click Me</button>
Always set type on buttons inside a form — without it, the default is type="submit", which can cause unexpected form submissions.
Grouping with Fieldset
<fieldset> groups related controls; <legend> labels the group:
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" />
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" />
</fieldset>
A Complete Contact Form
<form action="/contact" method="POST">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required placeholder="Amara Okafor" />
<label for="email">Email</label>
<input type="email" id="email" name="email" required placeholder="amara@example.com" />
<label for="track">Interested Track</label>
<select id="track" name="track">
<option value="">-- Select --</option>
<option value="frontend">Frontend Engineering</option>
<option value="backend">Backend Engineering</option>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" placeholder="Tell us about yourself..."></textarea>
<label>
<input type="checkbox" name="newsletter" /> Subscribe to our newsletter
</label>
<button type="submit">Send Message</button>
</form>
Try it yourself
Key Takeaways
- The <form> element wraps all form controls; action sets the submission URL and method sets GET or POST
- The <input> element is versatile — the type attribute determines whether it is text, email, password, checkbox, radio, and more
- Always link a <label> to each input using for and id to improve accessibility and usability
- The required attribute prevents form submission if a field is empty; type='email' validates email format automatically
- Use <select> for dropdown menus and <textarea> for multi-line text input
- Always set type='button' on buttons that should not submit the form — the default is type='submit'
Quick Quiz
1.What is the difference between method='GET' and method='POST' on a form?
2.Why should every <input> have an associated <label>?
3.Which input type validates that the user has entered a properly formatted email address?
4.What does the required attribute do on an input?
5.What is the default type of a <button> inside a form?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx