Skip to content

Text Input

Text inputs allow users to enter short, single-line pieces of text such as names, email addresses, or search queries.

<form action="/signup" method="post" name="textExample">
<label for="firstname">First Name:</label>
<input
type="text"
id="firstname"
name="firstname"
placeholder="Enter your first name"
maxlength="30"
required
/>
<label for="email">Email Address:</label>
<input
type="text"
id="email"
name="email"
placeholder="you@example.com"
pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
required
/>
<input type="submit" value="Submit" />
</form>

Text input elements are self-closing and require both the name and type attributes.
The type attribute is set to "text" to indicate plain text input.

The value attribute can be used to set an initial value that appears when the page loads.
To prompt the user with a hint inside the input box, use the placeholder attribute.

Validation and formatting can be enhanced with the pattern, maxlength, and required attributes.