Hungry Web Developer Podcast
<form> element. Inside that form element, you can have various inputs. Such as:
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
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
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:
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.
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.
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.
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