Interactive Forms (<form>)
Forms are how websites listen to users. Without forms, the web would be a one-way street of static documents. A <form> element wraps interactive input fields, checkboxes, and buttons, packaging user responses to send to a backend server.
"Think of a <form> like a physical clipboard at a doctor’s office. The clipboard holds the paper (<form>), with blanks for your name, date of birth, and symptoms (<input>). When you hand it back to the receptionist, that is hitting the submit button!"
Deep Dive: How It Works
<form action="/api/submit" method="POST">: The action attribute is the server endpoint URL where data is delivered. The method attribute is either "GET" (public parameters in URL) or "POST" (secure data payload in request body).
Form Submission: Clicking a <button type="submit"> automatically collects all named fields inside the <form> and sends them to the server.
Preventing Default Refresh: In modern Single Page Apps (React/Next.js), JavaScript handles form submission via e.preventDefault() and fetch() API.
Syntax Blueprint
<form action="/login" method="POST"> <!-- Inputs and buttons go here --> </form>
Form container with destination URL and HTTP transmission method.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Using method="GET" for passwordsWhy it happens: GET attaches form inputs into the visible browser URL bar for anyone looking over your shoulder to see.
How to fix: Always use method="POST" for passwords, credentials, and payment data.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Create a form with POST method
- Create a <form> with action="/login" and method="POST" containing a <button type="submit"> with text "Login"
Finished reading and practicing?
Mark this lesson as completed to update your course progress.