HtmlHow-ToBeginner · 3 min read

How to Create Text Input in HTML: Simple Guide

To create a text input in HTML, use the <input> element with the attribute type="text". This creates a box where users can type text. For example, <input type="text"> adds a simple text input field.

📐

Syntax

The basic syntax to create a text input is using the <input> tag with type="text". You can add attributes like name to identify the input, placeholder to show a hint inside the box, and value to set a default text.

type="text": Defines the input as a text box.
name: Gives the input a name for form data.
placeholder: Shows a light hint inside the input.
value: Sets default text inside the input.

html

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

Output

A single empty text box with the placeholder text 'Enter your name'.

💻

Example

This example shows a simple form with a text input where users can type their name. The placeholder guides the user what to enter.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Input Example</title>
</head>
<body>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

A webpage with a labeled text box showing 'Name:' and a placeholder 'Enter your name', plus a Submit button.

⚠️

Common Pitfalls

Some common mistakes when creating text inputs include:

Forgetting to set type="text", which defaults to text but is clearer to specify.
Not using the label element, which helps accessibility by linking text to the input.
Using value incorrectly to set placeholder text instead of the placeholder attribute.
Missing the name attribute, which is needed to identify the input when submitting forms.

html

<!-- Wrong: placeholder text set with value attribute -->
<input type="text" value="Enter your name">

<!-- Right: placeholder attribute used -->
<input type="text" placeholder="Enter your name">

Output

The first input shows default text that must be deleted before typing; the second input shows a light hint that disappears when typing.

📊

Quick Reference

Attribute	Description	Example
type	Defines input type; use "text" for text input
name	Name for form data identification
placeholder	Hint text shown inside input
value	Default text inside input
id	Unique identifier for label linking

✅

Key Takeaways

Use to create a text input field in HTML.

Always add a linked with the input's id for better accessibility.

Use the placeholder attribute to show hints, not the value attribute.

Include the name attribute to identify the input in form submissions.

Test your input in a browser to see how it looks and behaves.