Text Inputs (text, password, search)

The text, password, and search input types all accept a single line of free-form text, but each carries a different meaning to the browser and to the user — different rendering, different keyboard behavior, and different semantics.

type="text" — The Default

HTML

<label for="full-name">Full name</label>
<input type="text" id="full-name" name="full-name" maxlength="80">

Note

type="text" is also what you get if you omit type entirely — it's the baseline single-line text field with no special validation or keyboard hints.

type="password" — Masked Input

password renders the same as a text field but masks every character as a dot or asterisk, and signals to the browser that this value should never appear in autofill suggestions for unrelated fields, browser history, or the URL.

HTML

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  name="password"
  minlength="8"
  autocomplete="current-password"
  required
>

Warning

Masking is a UI convenience, not encryption. The value is still sent as plain text (unless you're on HTTPS, which you always should be) and is fully visible in DevTools — never treat type="password" as a security control on its own.

type="search" — Semantic Search Fields

search looks nearly identical to a text input in most browsers, but it carries real semantic and UX benefits: some browsers add a small "clear" (×) button automatically, mobile keyboards may show a "Search" key instead of "Enter"/"Go", and it signals intent to assistive technology and browser extensions.

HTML

<form action="/search" method="get" role="search">
  <label for="site-search" class="visually-hidden">Search this site</label>
  <input type="search" id="site-search" name="q" placeholder="Search...">
  <button type="submit">Search</button>
</form>

Type	Masks input?	Mobile keyboard hint	Typical clear (×) button
text	No	Generic keyboard	No (browser-dependent)
password	Yes	Generic keyboard	No
search	No	Search-labeled Enter key	Often yes

placeholder vs label — Never a Substitute

placeholder shows greyed-out hint text inside an empty field, but it disappears the moment the user types and is not a reliable accessible name. Always pair a real <label> with any optional placeholder hint — never use placeholder alone.

HTML

<!-- Bad -->
<input type="text" name="username" placeholder="Username">

<!-- Good -->
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="e.g. ana_dev">

maxlength and minlength

Both attributes constrain the number of characters, measured in UTF-16 code units.{' '} maxlength prevents the user from typing beyond the limit at all; minlength fails validation (but does not block typing) if the value is shorter than required on submit.

HTML

<label for="bio">Short bio</label>
<textarea id="bio" name="bio" maxlength="200"></textarea>

<label for="username2">Username</label>
<input type="text" id="username2" name="username" minlength="3" maxlength="20" required>

Attribute	Behavior
maxlength	Browser physically blocks further typing/pasting past the limit
minlength	Does not block typing — only flags the field as invalid on submit if too short

Tip

Pair maxlength/minlength with a visible character counter in JavaScript for a better UX — the native attributes alone give no visual feedback about how close a user is to the limit.

A Combined Example

HTML

<form action="/signup" method="post">
  <label for="signup-username">Username</label>
  <input type="text" id="signup-username" name="username" minlength="3" maxlength="20" required>

  <label for="signup-password">Password</label>
  <input
    type="password"
    id="signup-password"
    name="password"
    minlength="8"
    autocomplete="new-password"
    required
  >

  <button type="submit">Create account</button>
</form>

Key Takeaways

type="text" is the plain, unmasked single-line default.
type="password" masks input visually — it is a UI feature, not encryption, so HTTPS is still required.
type="search" signals search intent, often adding a clear button and a Search-labeled mobile Enter key.
placeholder is a hint, never a substitute for a real <label>.
maxlength blocks typing past the limit; minlength only fails validation on submit without blocking input.