Introduction to Creating, Styling, and Validating Web Forms (WFM051)

This Introduction to Creating, Styling, and Validating Web Forms course provides a foundational understanding of web forms, essential for gathering user input and enhancing interactivity on websites. It is crafted for professionals looking to grasp the basics of form creation, styling, and validation, aiding companies in boosting their web development capabilities.

We kick off with the lesson on HTML Forms, where you'll dive into how these forms function and the various elements that comprise them. You'll explore the <form> tag, understanding the differences between GET and POST methods. This foundational lesson covers elements like text fields, labels, password fields, and many others. Special attributes such as id, name, placeholder, and pattern are also discussed. Practical exercises include working with buttons, checkboxes, radio buttons, fieldsets, select menus, and textareas, ensuring you get hands-on experience.

Next, you’ll move on to JavaScript Form Validation, an important aspect of user input management. This lesson starts with server-side form validation before progressing to HTML form validation and then JavaScript-based approaches. You'll learn to access form data, validate text areas, checkboxes, and radio buttons, and implement error messages using the dataset property. By the end of this lesson, you'll be adept at ensuring the validity of user input both on input and submit events.

The course also includes a comprehensive lesson on Styling Forms with CSS. Here, you'll learn about general form layout and how to make your forms visually appealing and user-friendly. This lesson covers form-field pseudo-classes, applying them effectively to various form elements, including radio buttons, checkboxes, and fieldsets, ensuring a cohesive and appealing design.

By completing this course, you will have a solid foundation in creating, styling, and validating forms on web pages. You'll gain the skills needed to enhance user interaction and data accuracy on your company’s websites, contributing significantly to your web development toolbox.

1. HTML Forms
   1. How HTML Forms Work
   2. The <form> Tag
      1. Get vs. Post
   3. Form Elements
      1. id and name Attributes
      2. Text Fields
      3. Labels
      4. Text-like Input Types
      5. placeholder Attribute
      6. pattern Attribute
      7. Password Fields
      8. Date and Time Fields
      9. Number Fields
      10. Color Fields
      11. Tel, URL, and Email Fields
      12. tel
      13. url and email
      14. Search Fields
      15. Hidden Fields
   4. Buttons
      1. Submit Button
      2. Reset Button
      3. Button Buttons
   5. Checkboxes
   6. Radio Buttons
   7. Fieldsets
   8. Select Menus
      1. Option Groups
   9. Textareas
2. JavaScript Form Validation
   1. Server-side Form Validation
   2. HTML Form Validation
   3. Accessing Form Data
   4. Form Validation with JavaScript
   5. Checking Validity on Input and Submit Events
   6. Adding Error Messages
      1. The dataset Property
   7. Validating Textareas
   8. Validating Checkboxes
   9. Validating Radio Buttons
      1. Which Radio Button was Selected?
   10. Validating Select Menus
   11. Giving the User a Chance
3. Styling Forms with CSS
   1. General Form Layout
   2. Form-field Pseudo-Classes
   3. Applying Pseudo-Classes to Forms
   4. Radio Buttons, Checkboxes, and Fieldsets

Each student receives a comprehensive set of materials, including course notes and all class examples.

Experience in the following is required for this JavaScript class: