Email Us   Phone : 503-259-0312   
  Home    |    Instructor-led Training    |    Self-Paced Learning    |    Online Training     


Contact Us   -   Why Choose Wintrac   -   Clients    

Courses
ADA
Adobe
Agile
AJAX
Android
Apache
AutoCAD
Big Data
BlockChain
Business Analysis
Business Intelligence
Business Objects
Business Skills
C/C++/Go programming
Cisco
Citrix
Cloud Computing
COBOL
Cognos
ColdFusion
COM/COM+
CompTIA
CORBA
CRM
Crystal Reports
Data Science
Datawarehousing
DB2
Desktop Application Software
DevOps
DNS
Embedded Systems
Google Web Toolkit (GWT)
IPhone
ITIL
Java
JBoss
LDAP
Leadership Development
Lotus
Machine learning/AI
Macintosh
Mainframe programming
Microsoft technologies
Mobile
MultiMedia and design
.NET
NetApp
Networking
New Manager Development
Object oriented analysis and design
OpenVMS
Oracle
Oracle VM
Perl
PHP
PowerBuilder
Professional Soft Skills Workshops
Project Management
Rational
Ruby
Sales Performance
SAP
SAS
Security
SharePoint
SOA
Software quality and tools
SQL Server
Sybase
Symantec
Telecommunications
Teradata
Tivoli
Tomcat
Unix/Linux/Solaris/AIX/
HP-UX
Visual Basic
Visual Foxpro
VMware
Web Development
WebLogic
WebSphere
Websphere MQ (MQSeries)
Windows programming
XML
XML Web Services
Other
Creating, Styling, and Validating Web Forms
Overview

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. It then covers styling forms using CSS including the validation status of form fields. You will then learn to write clean, real-time client-side form validations with JavaScript and regular expressions. Finally, you'll learn to validate forms on the server with Node.js, JSON, and Ajax.

Audience

Student who need to create and process web forms using the latest HTML standards, as well as styling forms using CSS

Prerequisites

Experience in the basics of HTML, CSS and JavaScript.

Course duration

3 Days

Course outline

1. HTML Forms
  • How HTML Forms Work
  • The <form> Tag
  • Get vs. Post
  • Form Elements
  • id and name Attributes
  • Text Fields
  • Labels
  • Text-like Input Types
  • placeholder Attribute
  • pattern Attribute
  • Password Fields
  • Date and Time Fields
  • Number Fields
  • Color Fields
  • Tel, URL, and Email Fields
  • tel
  • url and email
  • Search Fields
  • Hidden Fields
  • Buttons
  • Submit Button
  • Reset Button
  • Button Buttons
  • Exercise 1: Creating a Registration Form
  • Checkboxes
  • Radio Buttons
  • Exercise 2: Adding Checkboxes and Radio Buttons
  • Fieldsets
  • Select Menus
  • Option Groups
  • Textareas
  • Exercise 3: Adding a Select Menu and a Textarea
2. JavaScript Form Validation
  • Server-side Form Validation
  • HTML Form Validation
  • Accessing Form Data
  • Form Validation with JavaScript
  • Exercise 4: Checking the Validity of the Email and URL Fields
  • Checking Validity on Input and Submit Events
  • Adding Error Messages
  • The dataset Property
  • Validating Textareas
  • Validating Checkboxes
  • Validating Radio Buttons
  • Which Radio Button was Selected?
  • Validating Select Menus
  • Exercise 5: Validating the Ice Cream Order Form
  • Giving the User a Chance
3. Styling Forms with CSS
  • General Form Layout
  • Form-field Pseudo-Classes
  • Applying Pseudo-Classes to Forms
  • Radio Buttons, Checkboxes, and Fieldsets
  • Exercise 6: Styling Forms
4. Regular Expressions
  • Getting Started
  • JavaScript's Regular Expression test() Method
  • Regular Expression Syntax
  • Start and End ( ^ $ )
  • Number of Occurrences ( ? + * {} )
  • Common Characters ( . \d \D \w \W \s \S )
  • Grouping ( [] )
  • Negation ( ^ )
  • Subpatterns ( () )
  • Alternatives ( | )
  • Escape Character ( \ )
  • Case-Insensitive Matches
  • Backreferences
  • Form Validation with Regular Expressions
  • Cleaning Up Form Entries
  • Exercise 7: Cleaning Up Form Entries
  • A Slightly More Complex Example
5. Node.js and Server-side Form Validation
  • Welcome to the Server-side
  • What is a web server?
  • Dynamic Websites
  • Google Chrome DevTools: Network Tab
  • Status Codes
  • Welcome to Node.js
  • Installing Node.js
  • package.json
  • Our First App
  • What does npm start do?
  • Our First Web App
  • Stopping the Server
  • Fat-arrow Functions
  • Sending a Response with HTML
  • The favicon.ico Icon
  • Simple Routing and 404 Pages
  • Delivering favicon.ico
  • Express - Node.js Web Application Framework
  • app.js
  • Favicon Middleware
  • Static Files
  • Exercise 8: Responding from the Root
  • Processing a Simple Form
  • Form Validation
  • Validators
  • Validation Chaining
  • not()
  • withMessage(message)
  • Custom Validators
  • Exercise 9: Form Validation
  • Ajax
  • XMLHttpRequest
  • Asynchronous
  • Exercise 10: Form Validation with Ajax
6. JSON
  • JSON
  • Review of Object Literals
  • Arrays
  • Objects
  • Arrays in Objects
  • Objects in Arrays
  • Back to JSON
  • JSON Syntax
  • The built-in JavaScript JSON Object
  • Exercise 11: Using JSON

 
About us
Contact us
Careers at Wintrac
Our Clients
Why Wintrac


Register for a free training CD-ROM drawing
Refer a client or instructor and earn $$$


Wintrac Inc.
16523 SW McGwire Ct.
Beaverton OR 97007
 
Wintrac, Inc. All rights reserved.                                                                               Site Map   |   Terms of Use   |   Privacy Policy