Forms are one of the most important parts of HTML, because they allow us to interact with a web page.
HTML is generally all just content: paragraphs, headings, lists, images.
You have links, that let you navigate to other pages.
And then forms, that let visitors enter data and send it to the server.
They allow users to interact with the page and
- sign up and log in
- search for something on the site
- trigger filters to trim result pages
- send information
With JavaScript you can add any kind of interactivity to a web page, but forms work out of the box.
You fill in some input fields, ☑️ a checkbox, hit submit and data is going somewhere.
It’s really an essential piece of functionality. And it’s built-in, very powerful and flexible.
In this section we’re going to first see how to create forms with a simple input element, the default behavior of forms, and how to submit a form.
We’ll then see how to change the default behavior to do what you want.
We’ll explore the most popular form elements.
And we’ll see how to style forms with CSS (and Tailwind).
Then we’ll see how to do some cool things combining forms and JavaScript.
Let’s start.
Lessons in this unit:
| 0: | ▶︎ Introduction |
| 1: | Creating a form |
| 2: | Submitting a form |
| 3: | Receiving the form data |
| 4: | Form validation |
| 5: | More tags useful in forms |