Suggest an edit

Improve this article

Refine the answer for “What does the <input> element do?”. 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 `<input>` element is the **core form element** intended for **user data entry**.
It creates an **interactive field** where you can enter text, pick an option, tick a box, upload a file and much more.

In effect, `<input>` is a universal "container" for different kinds of user input, determined by the `type` attribute.

---

### 1. General syntax

```html
<input type="text" name="username" placeholder="Enter your name">
```

Here:

- `type="text"` sets the field type (plain text in this case);
- `name="username"` is the field's name (needed to send data to the server);
- `placeholder="Enter your name"` is the hint text inside the field.

---

### 2. Main <input> types

| Type (`type`) | Purpose | Example |
|---|---|---|
| `text` | Single-line text field |  |
| `password` | Password field (characters hidden) |  |
| `email` | Email address entry (checks the format) |  |
| `number` | Number entry, with up/down arrows |  |
| `tel` | Phone number entry |  |
| `url` | Link entry (checks the URL format) |  |
| `search` | Search field (styled by the browser) |  |
| `checkbox` | Checkbox (several can be selected) |  |
| `radio` | Radio button (only one can be selected) |  |
| `file` | File upload |  |
| `date` | Date picker |  |
| `range` | Range slider |  |
| `color` | Color picker |  |
| `hidden` | Hidden field (not visible to the user) |  |
| `submit` | "Submit form" button |  |
| `reset` | Resets all form fields |  |
| `button` | Plain button (for JS handling) |  |

---

### 3. Key <input> attributes

| Attribute | Purpose |
|---|---|
| `name` | Field name (key for sending data) |
| `value` | Default value |
| `placeholder` | Hint inside the field |
| `required` | Makes the field mandatory |
| `readonly` | Field is read-only |
| `disabled` | Field is disabled (cannot be edited) |
| `maxlength` | Maximum number of characters |
| `min` / `max` | Minimum and maximum value (for numbers, dates, etc.) |
| `step` | Increment step (e.g. 0.5) |
| `checked` | Sets the checkbox/radio as checked by default |

---

### 4. How it works with a form

If an `<input>` element is **inside** a `<form>` and has a `name` attribute, then on form submission the browser will send its value as a pair:

```javascript
name=value
```

Example:

```html
<form action="/send" method="post">
  <input type="text" name="user" value="Oleh">
  <input type="checkbox" name="subscribe" checked>
  <button type="submit">OK</button>
</form>
```

The server will receive:

```javascript
user=Oleh&subscribe=on
```

---

### 5. Features

- `<input>` is a **void tag** (it has no `</input>`).
- Different `<input>` types provide **different interfaces and validation**.
- It can be combined with `<label>` for a convenient selection:

```html
  <label>
    <input type="checkbox"> I agree to the terms
  </label>
  ```

---

### Summary:

| Property | Description |
|---|---|
| Purpose | Getting data from the user |
| Types | `text`, `password`, `email`, `checkbox`, `radio`, `file` and others |
| Sending | Via the `name` attribute on form submit |
| Feature | Void, universal, configured via `type` |
| Placement | Usually inside a `<form>` |

---

**In simple terms:**
`<input>` is a **"point of entry"** for the user.
It turns a static page into an **interactive** one, letting the site *receive information* rather than just display it.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.