Welcome to Day 5 of the 7 Days HTML Tutorial!
Forms are a big deal in web development — they allow visitors to interact with your website by sending input like their name, email, feedback, or anything else you want to collect.
By the end of this lesson, you’ll be able to:
- Create a simple HTML form
- Use text inputs, radio buttons, checkboxes, and dropdowns
- Add a submit button and understand form structure
Let’s build your first HTML form!
Table of Contents
What is an HTML Form?
An HTML form is used to collect data from the user. For example, login forms, contact forms, search boxes, etc.
👉 Basic Structure of a Form
<form action="#" method="post">
<!-- Form elements go here -->
</form><form>is the tag that wraps everythingactionis where the form data will be sent (use#for now)methoddefines how the data is sent (postorget)
Basic Input Fields
1. Text Input
<label for="name">Name:</label>
<input type="text" id="name" name="username">2. Email Input
<label for="email">Email:</label>
<input type="email" id="email" name="email">3. Password Input
<label for="password">Password:</label>
<input type="password" id="password" name="password">4. Submit Button
<input type="submit" value="Submit">🔘 Radio Buttons
Used when the user should select only one option.
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>❗ Use the same
nameattribute for grouped radio buttons.
☑️ Checkboxes
Used when the user can select multiple options.
<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="Reading">
<label for="reading">Reading</label>
<input type="checkbox" id="travel" name="hobby" value="Traveling">
<label for="travel">Traveling</label>⬇️ Dropdown Menu (<select>)
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
📝 Textarea (Multi-line Text Box)
<label for="message">Your message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea>Mini Project: Build a Simple Contact Form
Try this complete example:
<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
</head>
<body>
<h1>Contact Form</h1>
<form action="#" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<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>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male"> Male
<input type="radio" id="female" name="gender" value="Female"> Female<br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
</select><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>Save this as contact.html, open it in a browser and try filling out your form!
Quick Recap
- Use
<form>to group inputs - Collect text, email, and passwords using
<input> - Use radio buttons for single-choice and checkboxes for multi-choice
- Use
<select>for dropdowns and<textarea>for long responses - Don’t forget to include a submit button!
Practice Task
📝 Create your own “Sign-Up Form” that includes:
- Name, Email, and Password Fields
- Gender radio buttons
- At least two checkboxes for interests
- A drop-down for country
- A textarea for feedback
- A submit button
What’s Next?
On Day 6, we’ll explore semantic HTML — the clean and meaningful way to structure web pages that’s super important for accessibility and SEO!
👉 You’re doing great — keep building!
🎯 Want to test your learning so far?
Check out the 7 Days HTML Challenge with Solutions to practice and validate your understanding with hands-on tasks!