HTML Forms – Input Fields, Labels, Buttons & More | Web Development for Beginners

🧾 Day 4: HTML Forms - Input Fields, Buttons & More

Forms are essential for collecting user input in HTML. Today you'll learn how to create forms using input fields, labels, checkboxes, and submit buttons.

---

📦 What is a Form?

A form is created using the <form> tag. It can include:

• <input> – for text, email, password, etc.
• <label> – describes each field
• <textarea> – multi-line text
• <select> – dropdowns
• <button> or <input type="submit"> – to submit

✍️ Basic Form Example

<form>
  <label>Name:</label><br/>
  <input type="text" /><br/><br/>
  <label>Email:</label><br/>
  <input type="email" /><br/><br/>
  <input type="submit" value="Submit" />
</form>

📌 Input Types

Here are some common <input> types:

• text – single line input
• email – requires email format
• password – hides text
• checkbox – toggle option
• radio – choose one from many
• submit – send the form

✔️ Checkbox & Radio Example

<input type="checkbox" /> I agree to terms
<br/>
<input type="radio" name="gender" /> Male
<input type="radio" name="gender" /> Female

📝 Textarea Example

<label>Message:</label><br/>
<textarea rows="4" cols="30"></textarea>

🔽 Dropdown Example

<label>Choose Country:</label><br/>
<select>
  <option>Pakistan</option>
  <option>India</option>
  <option>USA</option>
</select>

🧪 Practice Task

• Create a contact form with Name, Email, and Message
• Use checkboxes for newsletter opt-in
• Use a dropdown for city selection

🚀 What’s Next?

In Day 5, we’ll explore Semantic HTML tags like <header>, <main>, <footer>, and more!

Coming Soon: Day 5 - Semantic HTML