Web Forms - 2022 Build and Master Advanced Web Forms

Focused View

SkillZone .

21:17:58

124 View

00001 Course Introduction.mp4

05:05

00002 Introduction to Forms.mp4

04:41

00003 How Are Web Forms Created.mp4

04:11

00004 Why Do We Need to Wrap Our Web Form in a form Element.mp4

08:05

00005 Quick Recap on Web Forms.mp4

02:17

00006 Project Introduction - Let s Build a Web Form.mp4

04:07

00007 Profile Header - Setting It Up.mp4

04:34

00008 Profile Header - Finishing It Off.mp4

06:28

00009 Creating Our First Web Form Widget input.mp4

04:55

00010 A Little More Information about the input Element.mp4

01:43

00011 Styling Our input Widget.mp4

06:27

00012 Creating an Email Widget.mp4

06:16

00013 Introduction to Radio Buttons.mp4

02:33

00014 Building Our Radio Button.mp4

08:30

00015 Take a Step Back - Radio Buttons.mp4

02:09

00016 Styling Our Radio Button.mp4

07:37

00017 Adding a Dropdown Menu to Our Web Form.mp4

07:26

00018 Adding a textarea Widget to Our Web Form.mp4

07:21

00019 Adding a Checkbox to Our Web Form.mp4

04:58

00020 Adding a Submit Button to Our Web Form.mp4

07:30

00021 What Happens When You Submit a Form.mp4

03:44

00022 Recap of the Entire Section.mp4

04:43

00023 Outro.mp4

00:53

00024 Section Introduction - Table Versus Web Form.mp4

04:26

00025 The form Element.mp4

01:39

00026 Attributes on the form.mp4

03:06

00027 Why is Knowing about the form Attributes Important.mp4

06:09

00028 Attribute - accept-charset ISO and ASCII.mp4

12:25

00029 Attribute - accept-charset UTF.mp4

09:39

00030 Take a Step Back - accept-charset.mp4

02:19

00031 What Happens If You Use a Character Outside of the Specified Encoding Type.mp4

04:58

00032 Theta Example - URL Encoding Part 1 of 3.mp4

04:06

00033 Theta Example - Numerical Character References Part 2 of 3.mp4

07:21

00034 Theta Example - Servers Understand Hex Part 3 of 3.mp4

02:58

00035 Name Attribute.mp4

06:26

00036 Accept Attribute.mp4

02:00

00037 Action Attribute.mp4

04:03

00038 Action Attribute Example - Front-End Example.mp4

04:45

00039 Action Attribute Example - Introduction to URLSearchParams.mp4

07:13

00040 Action Attribute Example - Making Our Form Dynamic.mp4

06:31

00041 Method Attribute - GET.mp4

06:41

00042 Method Attribute - POST.mp4

05:18

00043 GET Versus POST.mp4

03:59

00044 HTTP Versus HTML When It Comes to METHOD Types.mp4

05:15

00045 Enctype Attribute - Introduction.mp4

04:18

00046 Enctype Attribute - GET Example.mp4

03:19

00047 Enctype Attribute - POST.mp4

10:40

00048 Enctype Attribute - What Is Boundary.mp4

07:42

00049 Enctype Example - Setting Up HTML.mp4

07:47

00050 Enctype Example - Setting Up a Node.js Server.mp4

07:57

00051 Enctype Example - Analysis of Multipart Versus application x-www-form-urlencoded.mp4

09:04

00052 Enctype - Take a Step Back.mp4

02:51

00053 REL Attribute.mp4

05:15

00054 Autocomplete Attribute.mp4

08:34

00055 Autocomplete - Example.mp4

04:08

00056 novalidate - Attribute Introduction.mp4

03:21

00057 novalidate - Example.mp4

04:06

00058 Target Attribute Introduction.mp4

06:36

00059 Target - Example.mp4

07:17

00060 Summary of the form Wrapper.mp4

03:38

00061 Outro.mp4

00:29

00062 URL Encoding - Introduction.mp4

03:30

00063 Why Do We See International Characters.mp4

02:07

00064 A Little about URLs.mp4

07:13

00065 Understanding Hex.mp4

09:41

00066 How Does URL Encoding Work.mp4

06:57

00067 International Characters.mp4

17:26

00068 How Does Your Browser URL Encode Spaces.mp4

05:46

00069 Custom Encoding with JavaScript - Example.mp4

06:57

00070 The Structure of a Web Form.mp4

06:29

00071 fieldset - Introduction.mp4

02:24

00072 fieldset - Examples.mp4

06:57

00073 fieldset - Attributes.mp4

05:12

00074 fieldset - Using the Form Attribute.mp4

10:38

00075 Using the Form Attribute for Styling Purposes Using HTMLFormElement.elements.mp4

04:41

00076 The input Element Is Like a Lime.mp4

03:41

00077 Where Does the input Element Come From.mp4

03:34

00078 input type=text - Common Attributes and Introduction.mp4

09:44

00079 input type=text - Spellcheck Attribute and Value Property.mp4

03:31

00080 Assignment - Web Form Introduction.mp4

01:56

00081 Assignment - Solution without CSS.mp4

04:45

00082 Assignment - Solution with CSS.mp4

09:34

00083 Label Attribute.mp4

08:25

00084 What Are the Original input Types.mp4

05:02

00085 Keep Going Web Forms Are Awesome.mp4

00:54

00086 Input Type=Password.mp4

05:23

00087 Using the Pattern Title and Required Attribute with the Password Type.mp4

04:29

00088 Password Does Not Help Us with Security.mp4

00:37

00089 Regular Expressions - Introduction.mp4

10:08

00090 Input Type=Hidden.mp4

05:35

00091 URLSearchParams - Introduction.mp4

06:06

00092 Hidden Input Type and Databases.mp4

02:25

00093 Submitting a Timestamp with input type= hidden.mp4

10:02

00094 Buttons - Two Ways to Create Buttons.mp4

07:37

00095 Using New Attributes on Buttons and the Difference Between button and input.mp4

07:28

00096 Different Button Types - Fun Example.mp4

07:21

00097 Checkable Items.mp4

04:36

00098 Checkbox.mp4

12:42

00099 Radio Buttons.mp4

08:36

00100 checked Pseudo Class.mp4

07:15

00101 Checkbox Challenge - Introduction.mp4

02:32

00102 Checkbox Challenge - Solution.mp4

14:03

00103 Checkbox Challenge - Solution with Check Mark.mp4

06:54

00104 Image Type.mp4

03:51

00105 Image Type - Heatmap Example.mp4

05:26

00106 File Type.mp4

03:14

00107 File Type - How to Style It.mp4

07:13

00108 File Type - Using JavaScript to Improve UI.mp4

08:13

00109 Outro.mp4

01:53

00110 Newer Input Types - High Level.mp4

03:47

00111 Email Type - Introduction.mp4

03:54

00112 Email Type - Validation and Benefits.mp4

06:36

00113 Search Type - Introduction.mp4

03:14

00114 Search Type - Styling with CSS.mp4

05:06

00115 Search Type - Pseudo Classes and Pseudo Elements.mp4

06:03

00116 Tel Type.mp4

05:37

00117 Url Type.mp4

02:52

00118 Number Type.mp4

05:40

00119 Step Back.mp4

03:06

00120 Range Type.mp4

05:22

00121 Using JavaScript to Display Dynamic Range Values.mp4

04:42

00122 Date and Time Pickers.mp4

09:01

00123 Date Type - Example.mp4

03:22

00124 Color Type.mp4

03:29

00125 Common Attributes You Will Find on Form Widgets.mp4

12:18

00126 1 Web Form Email Challenge - Introduction.mp4

01:10

00127 1 Web Form Email Challenge - Solution.mp4

04:07

00128 2 Custom Toggle - Introduction.mp4

03:11

00129 2 Custom Toggle - Building HTML.mp4

09:49

00130 2 Custom Toggle - Finishing Off the Toggle.mp4

11:08

00131 3 Color Picker Challenge - Introduction.mp4

02:22

00132 3 Color Picker Challenge - Building the HTML.mp4

13:58

00133 3 Color Picker Challenge - Adding JavaScript.mp4

09:38

00134 4 Custom Range Picker Challenge - Introduction.mp4

02:18

00135 4 Custom Range Picker Challenge - Building the HTML.mp4

10:55

00136 4 Custom Range Picker Challenge - Adding JavaScript.mp4

15:23

00137 5 Simple Web Form Challenge - Introduction.mp4

02:21

00138 5 Simple Web Form Challenge - Solution.mp4

20:59

00139 Introduction.mp4

01:37

00140 Non input Elements.mp4

00:48

00141 textarea - What Is It.mp4

08:25

00142 textarea Versus input type=text.mp4

09:39

00143 textarea - Common Attributes.mp4

06:32

00144 textarea - Resize Property and Summary.mp4

02:08

00145 textarea Challenge 1 - -valid -invalid not and -placeholder-shown.mp4

01:58

00146 textarea Challenge 1 - Solution.mp4

05:47

00147 textarea Challenge 2 - Focus and Blur Events.mp4

02:43

00148 textarea Challenge 2 - Solution.mp4

06:54

00149 Dropdown Controls and the Select Box.mp4

10:27

00150 Autocomplete box - datalist.mp4

05:18

00151 Autocomplete - Attribute.mp4

02:40

00152 Two Important Questions about datalist.mp4

03:24

00153 Creating a Dynamic datalist Dropdown.mp4

09:54

00154 datalist Versus select - Summary.mp4

01:56

00155 Dropdown Menus - Summary.mp4

02:11

00156 Output Element - Introduction.mp4

05:10

00157 Output Element - The oninput Event.mp4

07:52

00158 Output Element Challenge 1 - Multiplication.mp4

01:44

00159 Output Element Challenge 1 Solution - Multiplication.mp4

04:17

00160 Output Element Challenge 2 - Display Slider Value.mp4

01:30

00161 Output Element Challenge 2 Solution - Display Slider Value.mp4

03:50

00162 Progress Bar - Introduction.mp4

02:32

00163 Progress Bar - Detail.mp4

06:29

00164 Meter Bar - Introduction.mp4

03:24

00165 Meter Bar - Detail.mp4

07:53

00166 Meter and Progress Bar - Summary.mp4

02:02

00167 Progress Bar Challenge 1 - Introduction Video Progress.mp4

03:03

00168 Progress Bar Challenge 1 - Solution Video Progress.mp4

07:36

00169 Progress Bar Challenge 2 - Introduction Form Progress.mp4

03:17

00170 Progress Bar Challenge 2 - Solution Form Progress - HTML + CSS.mp4

10:31

00171 Progress Bar Challenge 2 - Solution Form Progress - JavaScript.mp4

13:52

00172 Outro.mp4

01:01

00173 Section Introduction.mp4

00:45

00174 Styling Forms with CSS Pseudo Classes and Pseudo Elements - Introduction.mp4

05:32

00175 Styling Web Forms.mp4

07:15

00176 CSS Box Model.mp4

04:01

00177 Pseudo Classes - Introduction.mp4

04:51

00178 Pseudo Classes - For Forms.mp4

08:09

00179 required.mp4

03:13

00180 Building Our Base Web Form Also Used in Future Lectures.mp4

13:48

00181 Generated Content.mp4

02:51

00182 Adding Generated Content to Our Form Using - -after.mp4

06:55

00183 valid and -invalid.mp4

02:43

00184 Adding -valid and -invalid Styling to Our Form Using - -before.mp4

07:22

00185 in-range and -out-of-range.mp4

09:29

00186 enabled and -disabled.mp4

02:13

00187 Web Form Example - Rundown of the HTML.mp4

07:05

00188 Web Form Example - Building Our JavaScript.mp4

14:05

00189 Radio Boxes and Checkboxes - -checked State.mp4

04:52

00190 Radio Boxes and Checkboxes - -default State.mp4

04:28

00191 Radio Boxes and Checkboxes - -indeterminate State.mp4

04:50

00192 Pseudo-Classes - Summary.mp4

04:53

00193 Section Introduction.mp4

02:15

00194 Two Types of Client-Side Validation on Web Forms.mp4

03:45

00195 Built-In Validation - Overview.mp4

04:58

00196 Quick Example - -valid -invalid and required.mp4

04:43

00197 Built-In Validation - Pattern Attribute.mp4

06:08

00198 JavaScript Validation - Introduction.mp4

09:07

00199 JavaScript Validation - The Constraint Validation API.mp4

02:52

00200 setCustomValidity Method - Two Easy Examples.mp4

07:48

00201 Challenge Introduction - setCustomValidity Method.mp4

03:33

00202 Challenge Solution - setCustomValidity Method.mp4

10:16

00203 Section Introduction.mp4

03:29

00204 Organizing the Assets.mp4

05:15

00205 CSS Grid - An Overview.mp4

05:19

00206 Building the HTML.mp4

04:57

00207 Finishing Off with CSS.mp4

20:33

00208 Section Introduction.mp4

02:36

00209 AJAX Versus ACTION.mp4

04:02

00210 AJAX - Introduction.mp4

04:04

00211 AJAX Example - Building the HTML.mp4

05:26

00212 AJAX Example - Building the PHP File.mp4

09:17

00213 AJAX Example - Building the AJAX Query.mp4

14:35

00214 AJAX Example - Error Messages and Finishing Off the Project.mp4

12:53

00215 How to Submit Web Form Data to a Server - Client-Side Recap.mp4

04:28

00216 PHP - How to Receive Form Data.mp4

07:42

00217 NODE - How to Receive Form Data.mp4

12:19

00218 Course Summary.mp4

01:11

Web-Forms---2022-Build-and-Master-Advanced-Web-Forms-main.zip

Description

An HTML form is another name for a webform. It’s a site where people can enter data, which is then processed by a server.

This course will give you solid fundamentals and practicals regarding forms. It can be taken alone (you don’t need to do any other course) to achieve your goals. You will emerge from this course with an advanced understanding and practical experience of building forms. It will take you to the point where you will understand what method (GET or POST) to use when sending form data, how to define where the data goes, and how to perform advanced client-side validation (checking errors on the form before it is sent to the server), how to write custom pattern validation rules (using regular expressions), how to run servers, and how to view all HTTP request information. This is awesome knowledge.

This course will captivate you and catapult you to the next level and set you well on your way to becoming a true grandmaster in front-end webform development.

By the end of this course, you will be able to "speak” and "walk” FORMS by gaining an understanding of how you can build it, manipulate it, and style it in meaningful and practical ways. We dig deeper into every lecture, and this course has many bonus lectures that will extend your knowledge base and test your skills.

All the resources are available at https://github.com/PacktPublishing/Web-Forms---2022-Build-and-Master-Advanced-Web-Forms

More details

User Reviews

Rating

average 0

Total votes0

Focused display

Web Development

CSS

HTML

SkillZone .

Instructor's Courses

SkillZone has the simple goal of teaching complicated concepts in an effortless way. They are Johannesburg-based and create quality, easy-to-understand eLearning solutions. In today’s rapidly evolving workplace, it is imperative to make sure you have the skills and expertise required to succeed. The content we offer ensures that the learning materials and delivery approach are aligned to meet intended outcomes and address your specific training needs without covering topics that may be unnecessary or irrelevant. The author’s goal is to help you with in-depth learning whilst avoiding the pitfalls that he discovered the hard way. He is enthusiastic and has a lot of fun teaching and brings his personality and charisma to the teaching platform to benefit his students the most.

PacktPub

View courses PacktPub

Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.