What does the <input> element do?

HTMLJunior~2 min read

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 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 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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What does the <input> element do?

#1. General syntax

#2. Main types

#3. Key attributes

#4. How it works with a form

#5. Features

#Summary: