Creating, Styling, and Validating Web Forms

This course is all about creating and processing web forms. 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 and regular expressions. Finally, you'll learn to validate forms on the server with Node.js, JSON, and Ajax.

Location

Public Classes: Delivered live online via WebEx and guaranteed to run . Join from anywhere!

Private Classes: Delivered at your offices , or any other location of your choice.

Goals
  1. Learn to create HTML forms using the latest HTML standards.
  2. Learn to style forms with CSS.
  3. Learn to validate forms on the client with JavaScript and regular expressions.
  4. Learn to validate forms on the server with Node.js.
  5. Learn to use Ajax techniques to do server-side validation on specific form fields without refreshing the entire page.
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
  4. Regular Expressions
    1. Getting Started
      1. JavaScript's Regular Expression test() Method
    2. Regular Expression Syntax
      1. Start and End ( ^ $ )
      2. Number of Occurrences ( ? + * {} )
      3. Common Characters ( . \d \D \w \W \s \S )
      4. Grouping ( [] )
      5. Negation ( ^ )
      6. Subpatterns ( () )
      7. Alternatives ( | )
      8. Escape Character ( \ )
      9. Case-Insensitive Matches
    3. Backreferences
    4. Form Validation with Regular Expressions
    5. Cleaning Up Form Entries
    6. A Slightly More Complex Example
  5. Node.js and Server-side Form Validation
    1. Welcome to the Server-side
      1. What is a web server?
      2. Dynamic Websites
    2. Google Chrome DevTools: Network Tab
      1. Status Codes
    3. Welcome to Node.js
      1. Installing Node.js
      2. package.json
      3. Our First App
      4. What does npm start do?
    4. Our First Web App
      1. Stopping the Server
    5. Fat-arrow Functions
    6. Sending a Response with HTML
    7. The favicon.ico Icon
    8. Simple Routing and 404 Pages
      1. Delivering favicon.ico
    9. Express - Node.js Web Application Framework
      1. app.js
    10. Favicon Middleware
    11. Static Files
    12. Processing a Simple Form
    13. Form Validation
    14. Validators
      1. Validation Chaining
      2. not()
      3. withMessage(message)
      4. Custom Validators
    15. Ajax
      1. XMLHttpRequest
      2. Asynchronous
  6. JSON
    1. Review of Object Literals
      1. Arrays
      2. Objects
      3. Arrays in Objects
      4. Objects in Arrays
    2. Back to JSON
      1. JSON Syntax
      2. The built-in JavaScript JSON Object
Class Materials

Each student in our Live Online and our Onsite classes receives 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

Training for Yourself

$1,575.00 or 3 vouchers

Upcoming Live Online Classes

  • See More Classes

Please select a class.

Training for your Team

Length: 3 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

What people say about our training

This webinar was a great tool for understanding Excel 2010. I am trying to get my boss to have more staff members take this class so we can all be on the same page, which will make sharing Excel spreadsheets a lot easier!
Lisa Drymon
BioResource International, Inc
I really learned a lot about MS Access and would recommend this course to anyone.
Marcellia Kemp
Econometrica Inc
Webucator as a whole exceeded my expectations. Signing up for the course and accessing the site the day of the event was easy. The course content was well thought out and I really enjoyed working within the online lab environment. The instructor was flexible with adjusting to my learning pace and style and was very knowledgeable on the topic as a whole.
Kristine Hicks
ManTech
Effective and concise. Real world experience in the subject matter made for relevant examples that I will be able to apply in the office.
David Kawalauskas
FortisAlberta Inc

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

63,451

Students who have taken Instructor-led Training

11,895

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.29

Students rated our trainers 9.29 out of 10 based on 29,928 reviews

Contact Us or call 1-877-932-8228