REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<form>

AI & DATA SCIENCE // form-tag

The <form> element is a container for interactive controls that collects user input and submits it to a server (or handles it via JavaScript).

Syntax

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Send</button>
</form>

Deep Dive Course

**`<form>`** groups related input controls and defines how their values get submitted: **`action`** is the URL the data is sent to, and **`method`** is either `get` (appends data to the URL, visible and bookmarkable, only for non-sensitive reads) or `post` (sends data in the request body, used for anything that changes data or includes sensitive info like passwords). Pressing Enter in a text field, or clicking a `type="submit"` button inside the form, both trigger submission.

1Understanding <form>

`<form>` groups related input controls and defines how their values get submitted: `action` is the URL the data is sent to, and `method` is either get (appends data to the URL, visible and bookmarkable, only for non-sensitive reads) or post (sends data in the request body, used for anything that changes data or includes sensitive info like passwords). Pressing Enter in a text field, or clicking a type="submit" button inside the form, both trigger submission.

💡

Never use method="get" for a form containing a password or other sensitive field — GET puts the values directly in the URL, which can end up logged in browser history, server logs, or shared links.

editor.html

<form action="/login" method="post">
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <button type="submit">Log In</button>
</form>

localhost:3000

2Practical Example

Here is a real-world application of <form> showing how it is used in production HTML.

editor.html

<!-- Intercepting submission with JavaScript instead of a full page reload -->
<form id="searchForm">
  <input type="search" name="q">
</form>
<script>
  document.getElementById('searchForm').addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('Search submitted without reloading the page');
  });
</script>

localhost:3000

3Best Practices

Follow these guidelines when working with <form>:

1. Use method="post" for anything that creates/changes data or includes sensitive fields

2. Use method="get" only for simple, non-sensitive searches/filters where a bookmarkable URL is useful

3. Give every form control a name attribute — unnamed fields aren't included in the submitted data

⚠️

Tip: Never use method="get" for a form containing a password or other sensitive field — GET puts the values directly in the URL, which can end up logged in browser history, server logs, or shared links.

editor.html

<form action="/login" method="post">
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <button type="submit">Log In</button>
</form>

localhost:3000

Examples

Example 01Basic Usage

<form action="/login" method="post">
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <button type="submit">Log In</button>
</form>

Example 02Advanced Example

<!-- Intercepting submission with JavaScript instead of a full page reload -->
<form id="searchForm">
  <input type="search" name="q">
</form>
<script>
  document.getElementById('searchForm').addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('Search submitted without reloading the page');
  });
</script>

Best Practices

Use method="post" for anything that creates/changes data or includes sensitive fields
Use method="get" only for simple, non-sensitive searches/filters where a bookmarkable URL is useful
Give every form control a name attribute — unnamed fields aren't included in the submitted data

Interview Question

What's the difference between GET and POST as a form's method, and when should each be used?▼

Hint: Think about where the submitted data ends up, and what that means for sensitive information.

GET appends the form's data as a query string directly onto the request URL, making it visible in the address bar, browser history, and server access logs — fine for a non-sensitive search or filter form where a shareable/bookmarkable URL is actually useful. POST sends the data in the request body instead, keeping it out of the URL, which is required for anything sensitive (passwords, personal data) and generally preferred for actions that create or modify data on the server.

Exercises

EasyPractice using <form> in a real scenario.

View Solution

<form action="/login" method="post">
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <button type="submit">Log In</button>
</form>

Frequently Asked Questions

What's the difference between GET and POST as a form's method, and when should each be used?▼

Related Functions

input-tagbutton-taglabel-tag