Suggest an edit

Improve this article

Refine the answer for “How does the <form> element connect input fields and data submission?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `<form>` element links **all input fields on the page** (for example, `<input>`, `<select>`, `<textarea>`) into a **single data structure** that the browser can **send to the server** when the "Submit" button is clicked (`<button type="submit">`).

In other words: `<form>` is a **container** that brings together all related elements and manages the process of transmitting the entered information.

---

### 1. Example: how the form "gathers" data

```html
<form action="/register" method="post">
  <label>Name:</label>
  <input type="text" name="username">

<label>Email:</label>
  <input type="email" name="useremail">

<button type="submit">Sign up</button>
</form>
```

What happens:

1. The user fills in the fields (`username`, `useremail`).
2. When the **Submit** button is clicked, the browser:
  - collects all fields that have a `name` attribute,
  - builds **"key=value" pairs** from them,
  - and sends them to the server at `/register`.

For example:

```javascript
username=Oleh&useremail=oleh@example.com
```

---

### 2. How exactly the form links fields

The link is made **through the** `name` **attribute**.
It is the "key" for each value.

| Element | Attribute `name` | Value sent |
|---|---|---|
| `<input type="text" name="login" value="Alex">` | `login` | `Alex` |
| `<input type="email" name="email" value="a@mail.com">` | `email` | `a@mail.com` |

The final data set that `<form>` will send:

```javascript
login=Alex&email=a@mail.com
```

Without `name`, the element **will not be included** in the submission.

---

### 3. How submission happens

1. The user clicks the `<button type="submit">` button.
2. The browser takes all field values inside `<form>`.
3. It encodes them depending on `method`:
  - `GET`: adds them to the URL (`/register?login=Alex&email=a@mail.com`);
  - `POST`: sends them "inside" the HTTP request (in the request body).
4. It sends them to the server at the address from `action`.

---

### 4. Other ways to link fields

- You can have **several forms on a page**, each one collects only "its own" fields.
- Form elements can be **linked by identifier** using the `form` attribute:

```html
  <form id="feedback" action="/send" method="post"></form>
  <input type="text" name="name" form="feedback">
  <button type="submit" form="feedback">Submit</button>
  ```
→ Even if the field is not inside the form, it will still be submitted along with it.

---

### 5. After submission

The server receives `key=value` pairs, for example:

```json
{
  "username": "Oleh",
  "useremail": "oleh@example.com"
}
```

and it can:

- save the data to a database,
- check its correctness,
- return a response to the user (a "successfully submitted" page).

---

### Summary:

| Mechanism | Description |
|---|---|
| `<form>` | Container that brings together input fields |
| Attribute `name` | Links values to their "keys" |
| `<button type="submit">` | Trigger for data submission |
| `action` | Specifies the server's address |
| `method` | Determines the transfer method (`GET` or `POST`) |

---

**In simple terms:**
`<form>` is like an **envelope**,
each field is a **filled-in line in the letter**,
and the "Submit" button is the **mail carrier** that takes all the contents to the server.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts474 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.