How to Make a Text Box in HTML

Screenshot of a simple HTML text box on a webpage

A text box in HTML is created using the <input> element with the type="text" attribute. This creates a single-line input field where users can enter text.

Basic HTML Text Box Code

The simplest way to create a text box is with this HTML code:

<input type="text">

This will display a basic text input field. You can add more attributes to customize it.

Customizing Your Text Box

Add attributes to your text box to control its appearance and behavior:

name: Identifies the input field when the form is submitted
value: Sets default text in the box
placeholder: Shows hint text when the box is empty
size: Controls the visible width in characters
maxlength: Limits how many characters can be entered

Complete Example with Form

Here's a full example showing a text box within an HTML form:

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter your username"><br>
  <input type="submit" value="Submit">
</form>

Text Box vs Other Input Types

Input Type	Description	Example
text	Single-line text input	`<input type="text">`
password	Single-line masked input	`<input type="password">`
textarea	Multi-line text input	`<textarea></textarea>`

Common Mistakes to Avoid

When creating text boxes, avoid these common errors:

Forgetting the type="text" attribute (it defaults to "text" but being explicit is good practice)
Not including a label element for accessibility
Setting maxlength lower than needed for the expected input
Using value and placeholder attributes together (they serve different purposes)

According to the MDN Web Docs, the text input type is one of the most commonly used form elements. It's essential for creating user registration forms, search boxes, and other interactive web elements.