Lesson Plan: for IT-324 Web Development 3(2-1)

Lesson Plan: for IT-324 Web Development 3(2-1)

Week #3: HTML Form Controls & Attributes

Lecture: Exploring HTML Input Controls & Attributes

Learning Objectives:

By the end of this session, students will be able to:
✅ Understand and implement various HTML form input controls.
✅ Use email control to validate user email input.
✅ Implement file control for file uploads in forms.
✅ Utilize the reset button to clear form data.
✅ Apply the placeholder attribute to improve form usability.

Topics Covered:

1. Email Input Field (<input type="email">)
   • Ensures users enter a valid email address.
   • Built-in validation in modern browsers.
2. File Input Control (<input type="file">)
   • Allows users to upload files.
   • Accepts attributes like multiple and accept for file type restrictions.
3. Reset Button (<input type="reset">)
   • Clears all form inputs when clicked.
   • Use cases and limitations.
4. Placeholder Attribute (placeholder="Enter text")
   • Provides a hint inside the input field.
   • Improves user experience but should not replace labels.

Hands-on Activities:

🔹 Create an HTML form with email, file upload, and reset functionalities.
🔹 Experiment with the placeholder attribute for different input fields.
🔹 Test form validation and behavior in different browsers.

Resources:

📖 Lecture Notes (Add actual link)
📌 Resource: HTML5 Form Controls – MDN Documentation 📌 Reference Book: Networking Essentials, Chapter 5

Assignments & Tasks:

📂 HTML Examples: Review and practice Examples 5.1 - 5.6 to understand the implementation of HTML form controls and attributes. 📝 Task: Complete and submit tasks #1 by the next session.