HTML Input

The HTML <input> element is used to collect information from users through forms. It supports different types of data, including text, passwords, email addresses, numbers, dates, and files.

The <input> element is one of the most commonly used HTML form elements. Its type attribute determines how the input field behaves and what kind of information it accepts.

What Is the HTML Input Element?

The <input> element creates an interactive field where users can enter information or select an option. It is a void element, meaning it does not require a closing tag.

Here is a simple example:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

In this example, the user can enter a username in a single-line text field. The id connects the label to the input, while name identifies the field when the form is submitted.

Learn more about HTML Form Elements to understand how input fields work with other form controls.

HTML Input Example

The following example demonstrates different input fields in a registration form.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Input Example</title>
</head>
<body>

    <h1>Registration Form</h1>

    <form action="/register" method="post">

        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>

        <br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>

        <br><br>

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="1" max="120">

        <br><br>

        <button type="submit">Register</button>

    </form>

</body>
</html>

In this example, users can enter their name, email address, password, and age. The required attribute makes the name and email fields mandatory, while min and max set the permitted age range for browser validation.

The /register endpoint must be configured on a server to process the submitted data.

Common HTML Input Types

The type attribute determines the kind of input control displayed by the browser.

Input Type	Purpose
text	Accepts general text
password	Masks entered characters
email	Accepts an email address
number	Accepts numeric values
date	Allows date selection
radio	Selects one option from a group
checkbox	Selects one or more options
file	Allows file selection
submit	Creates a form submission button
reset	Resets form controls to their initial values

Explore HTML Input Types for more examples of these controls.

Important HTML Input Attributes

Input attributes control how fields behave.

• id: Identifies an element and connects it to a label.
• name: Identifies the submitted field.
• value: Specifies an initial value.
• placeholder: Displays a hint inside the field.
• required: Requires a value before submission.
• readonly: Prevents editing while keeping the control generally submittable.
• disabled: Disables the field and excludes it from normal form submission.

For example, you can use placeholder="Enter your name" to guide users when they fill out a form.

Learn more about HTML Form Attributes to understand how these settings work.

Frequently Asked Questions

What is the purpose of the HTML input element?

It collects user information through fields such as text boxes, email inputs, number fields, and checkboxes.

Does the input element need a closing tag?

No. The <input> element is a void element and does not have a closing tag.

Can an HTML input field be required?

Yes. Add the required attribute to make the field mandatory during normal browser form validation.

What is the difference between input and textarea?

An <input> is generally used for a single-line value, while <textarea> supports multi-line text. Explore HTML Textarea to learn how it works.