Javascript Web Forms

And how this differs from an HTML form?

HTML forms are limited. You can't validate as the user is typing, customize UI error states, or show whether a form is being submitted. Handling multistep forms is very difficult as well. Any webapp that has a rich UX uses a Javascript based Web Form, powered by popular frontend frameworks like React, Vue, or Angular.

---

What are some basic HTML forms?

00:40

There are HTML forms and Javascript forms. HTML forms uses a <form> element. Inside that form element, you can have various inputs. Such as:

• input text fields
• radio buttons
• checkbox toggles
• textareas

And then the submit button. This usually submits a HTTP POST requests to a server. A really common example you might find in a tutorial is through FreeCodeCamps Survey project.

HTML forms can either use HTTP POST or HTTP GET. A good example of an HTTP GET is a form that searches for a list of contacts. HTTP POST are more common for sending data to be created in the database

HTML forms have built in validation methods using regular expression to make sure the user must specify an email. However, HTML forms have limited UI customization when it comes to validation.

Also backend frameworks like Laravel can generate these forms for you

What are Javascript Forms?

11:40

Javascript Forms has more extensibility than basic HTML Forms. More customizations related to the UI, validation states, debouncing, HTTP calls, etc. Most webapps today are using Javascript forms. If you use React or any other popular frontend framework, these are Javascript Web Forms

Javascript forms can be set in a number of different ways. You can have the user press the submit button, and use document.querySelector to grab the corresponding inputs to then use an HTTP post method. Validation can be done as the user is typing, which is something that cannot be done with HTML forms

What about the technical part of forms? And multistep form wizards?

15:30

These are forms that have multiple steps associated with it. There's many form libraries for popular frameworks like formik for React. These handle common validation and error states, seperating the state variables that are submitted.

Forms can be complex since it can be in many states, depending on if it's being submitted, if there's an error on it, etc. Here's some examples of states:

• touched
• active
• dirty
• error
• submitting
• initialValues
• pristine

Some frameworks have built in form libraries. Angular 4/8 has this out of the box, and its agnostic in terms of how it's written across the board. Vue and Angular both have models for two way binding.

Javascript Web Forms can validate as the user is typing. A common example is for passwords, e.g. does it have at least one capital letter, a lower case letter, and a random character?

Integrating HTTP requests in a multistep form can be done in different ways. You can use a GET request to grab any data already persisting in the system from the beginning. And make HTTP Post/Patch requests between every step so the data is persisted across the user-experience.

A rule of thumb is to also never trust the frontend from the backend perspective. Make sure the user is who the say they are via an authentication token.

What about the User Experience on a form?

34:50

Collect as few data points as you need, especially if its redundant data. For instance, if you have the user enter a zipcode, you already have the state. Make the user experience as seamless as possible.

Don't add too much validation on your inputs either. Too much validation limits the extent of how the form can be used. A good example of this is shipping addresses for international shippping. You generally don't have a standard city, state, zip, country combination like the USA.

Add auto-filling experiences. And support common password chrome extensions like lastpass for auto-login.

Make sure the forms are accessible as well. This means add Aria-compliant tags to support screen-reading technology.

Pick the best form inputs for the best experience. Pinterest for example list a set of recommended categories to follow instead of adding a typeahead.

When the user submits a form, you should also consider adding success/error toast messages. This lets the user know they paid for items on a shopping cart for instance at checkout.

When you ask questions on a form, ask the right questions. Think about how the questions are asked. If you ask "React is better than Angular, right?". This would skew the results towards "yes". Instead, ask questions in a less biased manner.

DESSERT TIME! - Cats and Raspberry Pis

45:00

Vincent talks about his cat and cat zoomies. Also getting cat toys, TV, lasers, and taking the cat to the vet.

German talks about hosting a website via a raspberry pi! And how blazing fast it is

Social Media

• German's Twitter
• Vincent's Twitter
• Vincent's Instagram
• Tweet us your thoughts on @codechefsdev