Creating, Styling, and Validating Web Forms

Creating, Styling, and Validating Web Forms

This course will guide students through creating forms with HTML, styling forms with CSS, and validating forms with JavaScript and regular expressions. The course also introduces students to server-side form validation using Node.js and working with JSON for data exchange. It also introduces students to Ajax.

Benefits

1. Practical Skills: Students will learn to create functional and visually appealing web forms, providing them with practical skills to enhance their web development projects.
2. Validation Techniques: The course equips students with the knowledge to implement client-side and server-side form validation, ensuring data integrity and security.
3. Flexibility and Customization: By understanding various form elements and attributes, students will be able to create highly customizable forms tailored to specific user requirements.
4. Improved User Experience: The skills gained in this course will enable students to design user-friendly forms, enhancing the overall user experience on their web applications.

Outline

1. HTML Forms
2. How HTML Forms Work
3. The <form> Tag
4. Get vs. Post
5. Form Elements
6. id and name Attributes
7. Text Fields
8. Labels
9. Text-like Input Types
10. placeholder Attribute
11. pattern Attribute
12. Password Fields
13. Date and Time Fields
14. Number Fields
15. Color Fields
16. Tel, URL, and Email Fields
17. Search Fields
18. Hidden Fields
19. Buttons
20. Submit Button
21. Reset Button
22. Button Buttons
23. Checkboxes
24. Radio Buttons
25. Fieldsets
26. Select Menus
27. Option Groups
28. Textareas
29. JavaScript Form Validation
30. Server-side Form Validation
31. HTML Form Validation
32. Accessing Form Data
33. Form Validation with JavaScript
34. Checking Validity on Input and Submit Events
35. Adding Error Messages
36. The dataset Property
37. Validating Textareas
38. Validating Checkboxes
39. Validating Radio Buttons
40. Which Radio Button was Selected?
41. Validating Select Menus
42. Giving the User a Chance
43. Styling Forms with CSS
44. General Form Layout
45. Form-field Pseudo-Classes
46. Applying Pseudo-Classes to Forms
47. Radio Buttons, Checkboxes, and Fieldsets
48. Regular Expressions
49. Getting Started
50. JavaScript's Regular Expression test() Method
51. Regular Expression Syntax
52. Start and End ( ^ $ )
53. Number of Occurrences ( ? + * {} )
54. Common Characters ( . \d \D \w \W \s \S )
55. Grouping ( [] )
56. Negation ( ^ )
57. Subpatterns ( () )
58. Alternatives ( | )
59. Escape Character ( \ )
60. Case-Insensitive Matches
61. Backreferences
62. Form Validation with Regular Expressions
63. Cleaning Up Form Entries
64. A Slightly More Complex Example
65. Node.js and Server-side Form Validation
66. Welcome to the Server-side
67. What is a web server?
68. Dynamic Websites
69. Google Chrome DevTools: Network Tab
70. Status Codes
71. Welcome to Node.js
72. Installing Node.js
73. package.json
74. Our First App
75. What does npm start do?
76. Our First Web App
77. Stopping the Server
78. Fat-arrow Functions
79. Sending a Response with HTML
80. The favicon.ico Icon
81. Simple Routing and 404 Pages
82. Delivering favicon.ico
83. Express - Node.js Web Application Framework
84. app.js
85. Favicon Middleware
86. Static Files
87. Processing a Simple Form
88. Form Validation
89. Validators
90. Validation Chaining
91. not()
92. withMessage(message)
93. Custom Validators
94. Ajax
95. XMLHttpRequest
96. Asynchronous
97. JSON
98. Review of Object Literals
99. Arrays
100. Objects
101. Arrays in Objects
102. Objects in Arrays
103. Back to JSON
104. JSON Syntax
105. The built-in JavaScript JSON Object

Required Prerequisites

• Basic HTML
• Basic CSS
• Basic JavaScript

‍