HTML Forms: Capturing User Input
Forms are how websites listen. Whether you're signing up, searching, or submitting a comment — it all starts with an HTML form. Let’s explore how to build one, piece by piece.
The <form> Tag: Wrapping It All Together
The <form> element defines the start of a form. It typically includes input fields, labels, buttons, and optionally an action (where to send data) and method (how to send it).
<form action="/submit" method="post">
<!-- form content here -->
</form>
For now, we’ll focus on structure and elements rather than sending data to a server.
Input Types: Collecting Values
The <input> tag is used for various types of fields. Let’s look at a few common ones.
Text Input
<form>
<label for="fruit">Favorite Fruit:</label>
<input type="text" id="fruit" name="fruit">
</form>
for in <label> should match the id of the input for accessibility.
Labels and Placeholders
Labels help users understand what each field is for. Placeholders provide hints inside the input field.
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="hello@example.com">
Use placeholders as a gentle nudge, not a replacement for labels.
Select Dropdowns
<select> allows users to choose from a list of options.
<label for="fruit-select">Choose a fruit:</label>
<select id="fruit-select" name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
Checkboxes: Choose Multiple Options
Checkboxes are used when the user can select more than one item.
<p>Select your favorite fruits:</p>
<input type="checkbox" id="apple" name="fruits" value="apple">
<label for="apple">Apple</label>
<br>
<input type="checkbox" id="banana" name="fruits" value="banana">
<label for="banana">Banana</label>
<br>
<input type="checkbox" id="cherry" name="fruits" value="cherry">
<label for="cherry">Cherry</label>
Radio Buttons: Select Only One
Radio buttons allow one selection from a set of options.
<p>Select one fruit:</p>
<input type="radio" id="apple-radio" name="single-fruit" value="apple">
<label for="apple-radio">Apple</label>
<br>
<input type="radio" id="banana-radio" name="single-fruit" value="banana">
<label for="banana-radio">Banana</label>
<br>
<input type="radio" id="cherry-radio" name="single-fruit" value="cherry">
<label for="cherry-radio">Cherry</label>
All buttons must share the same name to work as a group.
Textareas: Multiline Input
Use <textarea> when the user needs space to write more — comments, feedback, descriptions.
<label for="message">Your Message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea>
You can control height with rows and width with cols.
Submit and Reset Buttons
<input type="submit"> sends the form data. <input type="reset"> clears the fields.
<form>
<input type="submit" value="Submit Form">
<input type="reset" value="Clear All">
</form>
Use these to control the form lifecycle — input, validate, and submit or reset.
Complete Example: Simple Fruit Survey
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Hello World"><br><br>
<label for="fruit">Favorite Fruit:</label>
<select id="fruit" name="fruit">
<option>Apple</option>
<option>Banana</option>
<option>Cherry</option>
</select><br><br>
<p>Pick one:</p>
<input type="radio" id="r1" name="vote" value="apple">
<label for="r1">Apple</label><br>
<input type="radio" id="r2" name="vote" value="banana">
<label for="r2">Banana</label><br>
<p>Anything to add?</p>
<textarea name="comment" rows="4" cols="40"></textarea><br><br>
<input type="submit" value="Send">
</form>
Summary
You’ve just opened the gateway to user interaction. HTML forms allow your website to listen and respond. Today you learned to:
- Use the
<form>tag for wrapping inputs - Work with input types like text, email, radio, and checkbox
- Use
<select>for dropdowns and<textarea>for multi-line input - Add labels and placeholders for clarity
- Submit and reset user inputs
What’s Next?
Next, we’ll take your forms to the next level with HTML Form Validation — ensuring data is correct before it’s sent.
