HTML forms collect interactive user input—such as login credentials, search queries, contact messages, and registration details—and submit that data to a server endpoint for processing. You build forms using the <form> tag along with input controls.
The <form> container wraps form controls and configures how data is transmitted to web backend services.
<form action="/api/submit-user" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Submit Form</button>
</form>
Key form attributes:
action: Specifies the target URL or backend API route where submitted form data is sent.method: Defines the HTTP request verb used for form submission:GET (Default): Appends form field data into the URL query string (?username=john). Used for non-sensitive search queries.POST: Sends form data inside the HTTP payload body. Essential for sensitive credentials, file uploads, and state changes.name: Attribute on input elements defining the data field key transmitted to backend scripts.flowchart TD
A["User Fills Form Input"] --> B["User Clicks Submit Button"]
B --> C{"Browser Form Validation Check"}
C -- Fails --> D["Display Browser Validation Error Message"]
C -- Passes --> E["HTTP POST Request to action='/api/login'"]
E --> F["Server Backend Processes Data & Responds"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Form Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>User Registration</h2>
<!-- Styled responsive form -->
<form action="/submit-register" method="POST" style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 400px;">
<div style="margin-bottom: 1rem;">
<label for="email" style="display: block; margin-bottom: 0.5rem;">Email Address:</label>
<input type="email" id="email" name="user_email" required style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #334155;">
</div>
<div style="margin-bottom: 1.5rem;">
<label for="password" style="display: block; margin-bottom: 0.5rem;">Password:</label>
<input type="password" id="password" name="user_password" required style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #334155;">
</div>
<button type="submit" style="background-color: #2563eb; color: #ffffff; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; width: 100%;">
Create Account
</button>
</form>
</body>
</html>
name attribute on input fields: Inputs without a name attribute are ignored during form submission and will not send data to the backend.POST for sensitive form submissions: Never send passwords, payment details, or personal data via GET forms because URL parameter strings get recorded in server log histories and browser URLs.<label for="...">: Ensures form fields are accessible to screen reader users and enlarges touch target tap areas on mobile devices.Write an HTML <form> element configured with action="/login" and method="POST" containing an email field and a submit button!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.