HTML Text Fields

HTML text fields allow users to enter single-line text into a webpage form. They are commonly used to collect names, usernames, city names, and other short pieces of information.

Text fields are created using the <input> element with type="text". Developers can customize these fields using attributes such as placeholder, required, maxlength, and value.

What Is an HTML Text Field?

An HTML text field is an input control that accepts ordinary text from users. It is one of the most common form elements used in registration forms, contact pages, and search interfaces.

Here is a basic example:

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

The type="text" attribute creates a single-line text field. The id connects the field to its label, while the name identifies its value when the form is submitted.

Learn more about HTML Input to understand how input fields work.

HTML Text Field Example

The following example demonstrates how to create a form containing text fields.

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

    <h1>Personal Information</h1>

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

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

        <br><br>

        <label for="city">City:</label>
        <input type="text" id="city" name="city"
               placeholder="Enter your city">

        <br><br>

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

    </form>

</body>
</html>

In this example, users can enter their name and city. The placeholder text provides a hint, while required makes the name field mandatory during normal browser form validation.

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

Important HTML Text Field Attributes

HTML provides several attributes to control text fields.

Attribute	Purpose
placeholder	Displays a hint inside an empty field
value	Sets an initial value
required	Requires a value before normal form submission
maxlength	Limits the maximum number of characters
minlength	Sets the minimum number of characters for validation
readonly	Prevents users from editing the field
disabled	Disables the field
autocomplete	Allows the browser to suggest previously entered information

For example, maxlength="30" limits a text field to 30 characters.

Explore HTML Form Attributes to learn more about these settings.

Styling HTML Text Fields with CSS

CSS can improve the appearance of text fields by adding borders, spacing, and rounded corners.

input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 250px;
}

input[type="text"]:focus {
    border-color: blue;
    outline: 2px solid lightblue;
}

The first rule styles text fields, while :focus changes their appearance when users select them.

HTML Text Fields vs Textarea

A text field and a textarea serve different purposes.

Text Field	Textarea
Uses <input type="text">	Uses <textarea>
Accepts single-line text	Accepts multiple lines
Suitable for names and usernames	Suitable for messages and comments

Learn more about HTML Textarea for multi-line text input.

Frequently Asked Questions

What is the HTML text field tag?

Use <input type="text"> to create a single-line text field.

Can a text field be mandatory?

Yes. Add the required attribute to prevent normal browser form submission when the field is empty.

How do I set a maximum character limit?

Use the maxlength attribute, such as maxlength="20".

Can text fields be styled with CSS?

Yes. CSS can control their width, border, background, padding, font, and focus appearance.