<input> — Text

Since:		HTML 4（1997）

The text-type variants of <input> create a single-line text input field. By specifying the input type via the type attribute, the browser automatically provides an appropriate keyboard and validation.

Syntax

<input type="text" name="field-name" placeholder="hint text" value="default value">

type values (text-based)

type value	Description
text	A single-line text input field. The most basic type, with no restrictions on what can be entered.
password	A password input field where characters are masked with dots or asterisks.
email	An input field for email addresses. The browser validates the format on submission.
url	An input field for URLs. The browser checks for a valid format such as `https://` on submission.
tel	An input field for telephone numbers. On smartphones, a numeric keyboard is displayed.
search	An input field for search keywords. Some browsers display a clear (×) button.

Common attributes

Attribute	Description
name	Specifies the key name for the data when the form is submitted. The server receives the data under this name.
value	Specifies the initial value of the input field.
placeholder	Specifies hint text displayed in light gray when the field is empty.
required	Makes the field required. An error is shown if you try to submit the form with this field empty.
maxlength	Specifies the maximum number of characters that can be entered.
minlength	Specifies the minimum number of characters required.
readonly	Makes the field read-only. The user cannot edit it, but its value is still included in the submitted data.
disabled	Disables the field. The user cannot interact with it, and its value is not included in the submitted data.
autocomplete	Controls the browser's autocomplete behavior. Accepts values such as `on` (enabled) and `off` (disabled).
pattern	Specifies a validation rule using a regular expression. If the value does not match, submission fails.

Sample code

sample_input_text.html

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

  <!-- Text input -->
  <div>
    <label for="username">Username</label>
    <input type="text" id="username" name="username"
      placeholder="e.g. yamada_taro" maxlength="20" required>
  </div>

  <!-- Password input -->
  <div>
    <label for="password">Password (8 characters or more)</label>
    <input type="password" id="password" name="password"
      minlength="8" required autocomplete="new-password">
  </div>

  <!-- Email input -->
  <div>
    <label for="email">Email address</label>
    <input type="email" id="email" name="email"
      placeholder="example@example.com" required>
  </div>

  <!-- Phone number input -->
  <div>
    <label for="tel">Phone number</label>
    <input type="tel" id="tel" name="tel"
      placeholder="090-0000-0000"
      pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}">
  </div>

  <!-- URL input -->
  <div>
    <label for="website">Website</label>
    <input type="url" id="website" name="website"
      placeholder="https://example.com">
  </div>

  <!-- Search box -->
  <div>
    <label for="keyword">Keyword search</label>
    <input type="search" id="keyword" name="q"
      placeholder="Enter a search keyword">
  </div>

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

</form>

Result

Six input fields are displayed — username, password, email address, phone number, URL, and search — along with a Register button. Characters typed into the password field are masked, and the email field is validated on submission. On smartphones, tapping the phone number field brings up a numeric keyboard.

View sample page

Customizing Inputs with CSS

Input field appearances vary across browsers. Use CSS to override the defaults and create a consistent design. Pseudo-classes let you style different states: focused, disabled, and validation states.

<style>
  /* Base style (override browser defaults) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="search"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  /* Focus state: blue border with glow */
  input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
  }

  /* Disabled state: grey background to indicate non-interactive */
  input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
  }

  /* Placeholder color */
  input::placeholder {
    color: #aaa;
  }

  /* Validation error (filled in but invalid) */
  input:invalid:not(:placeholder-shown) {
    border-color: #e74c3c;
  }

  /* Validation success */
  input:valid:not(:placeholder-shown) {
    border-color: #27ae60;
  }

  /* Remove default clear button styling on search inputs */
  input[type="search"] {
    -webkit-appearance: none;
  }
</style>

<input type="text" placeholder="Name">
<input type="email" placeholder="example@example.com">
<input type="text" disabled value="Read-only field">

Notes

By specifying an appropriate value for the type attribute, the browser automatically performs validation. For example, type="email" checks that the value contains an @ symbol, and type="url" checks that it starts with http:// or https://. However, browser-side validation is only supplementary. Always validate input on the server side as well.

Always associate <label> with <input> using the for and id attributes. This ensures that clicking the label moves focus to the field, and that screen readers announce it correctly.

For the form container, see 『form』.