Introduction to Creating, Styling, and Validating Web Forms

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

Course Length: 8.0 hours
Delivery Methods: Multiple delivery options
Course Overview

This course is a shortened version of our Creating, Styling, and Validating Web Forms course. . It starts with using the latest HTML standards to create and provide basic validation for an HTML form. Then it covers styling forms using CSS. This includes showing the validation status of form fields. You'll then learn to write clean, real-time client-side form validation with JavaScript.

Course Benefits
  • Learn to create HTML forms using the latest HTML standards.
  • Learn to style forms with CSS.
  • Learn to validate forms on the client with JavaScript.
Available Delivery Methods
Self-Paced
Learn at your own pace with 24/7 access to an On-Demand course.
Course Outline
  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
Class Materials

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

Class Prerequisites

Experience in the following is required for this JavaScript class:

  • Basic HTML
  • Basic CSS
  • Basic JavaScript
Live Private Class
  • Private Class for your Team
  • Live training
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Proposal
Self-Paced Course
1 coupon
  • On Demand 24/7
  • Readings
  • Presentations
  • Exercises
  • Quizzes
  • Full Year of Access
  • Learn more
Register Now