The Form Element
What is a Form Wrapper?
Think of a physical paper application. It has a section header, empty blanks to write in, and a mailing address at the top telling you where to send the application once it is filled out.In HTML, the <form> element is the outer wrapper that collects user inputs and sends them to a backend server. It uses two main settings:
action: The URL endpoint on the server where the form data should be sent (e.g., /login).method: How the data is sent. get attaches the data to the URL (visible to users), while post sends the data securely in the background (hidden from the URL).Why does it matter?
Without the<form> tag, any inputs you write (like textboxes or buttons) are just static components on the page. The form wrapper is what allows inputs to be compiled, validated, and sent to a database to log users in, save files, or complete checkout actions.
How to write it
Wrap all input elements inside the<form> tag:
<form action="/login" method="post">
<!-- Inputs and buttons go here -->
</form>
<form action="/login" method="post">
</form>
Common Mistakes
method="get" for passwords: Never use GET for sensitive forms like registration or login. Since GET places input data directly into the browser URL bar, passwords will be saved in browser histories and server logs, creating security leaks.Quick Reference
<form action="URL" method="get|post"> — Forms container.method="post" — Sends data securely (best for logins/signups).method="get" — Appends data to URL (best for search bars).Your Task
Create a `<form>` element with `action="/login"` and `method="post"`.
index.html
Type code above to start the lesson.
Live Preview