Command Palette

Search for a command to run...

Hectal
PHASE 4Intermediate ~20 min· topic 2 of 8

Topic 4.2

Text Inputs

In one line

<input> is one element with many types: text, email, password, search, tel, url and number each look similar but change the keyboard, the checking and what the value means.

0/8 · 0%

Think of it like this

Different boxes on a delivery form. The phone-number box has little digit squares, the email box expects an @, the PIN box hides what you write. They're all "boxes to write in", but each one is shaped for what goes inside it. The type attribute is how you tell the browser which shape you want.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

input
The element for one-line boxes and many other controls. Its type attribute picks which kind.
type
The attribute that sets what kind of input it is, such as text, email or number.
value
The text inside the box. The value attribute is the starting text; the .value property is what is there now.
String
A piece of text. Input values are always strings, even when they look like numbers.
placeholder
Grey hint text shown only while the box is empty. It is not a label and is not sent.
maxlength
The most characters a person can type into the box.
readonly
The value can be seen and is sent with the form, but can't be changed.
disabled
The control is switched off: it can't be used, can't be focused and is not sent.

Step by step

01The plain text box

A one-line box for free text. Give it a name so its value is sent, and a label so people know what to type (labels are the next topic).

index.htmlwhole filehtml
<label for="full">Full name</label>
<input id="full" name="full" type="text">

02Pick the type that matches the data

Changing only the type changes a lot: the phone keyboard, the automatic checking, and how screen readers announce the box. It costs you nothing, so always choose the most specific type.

index.htmlwhole filehtml
<input name="email" type="email">     <!-- keyboard with @, checks the format -->
<input name="pw" type="password">     <!-- hides the characters -->
<input name="q" type="search">        <!-- search box, may show a clear button -->
<input name="phone" type="tel">       <!-- number pad, no format check -->
<input name="site" type="url">        <!-- keyboard with / and .com, checks it is a URL -->
<input name="qty" type="number">      <!-- spin buttons, numbers only -->

03Starting values and hints

value fills the box in advance. placeholder only shows a hint when the box is empty. If you want text the person is meant to keep, use value; if you want an example of the format, put it in a visible hint under the label instead of relying on placeholder alone.

index.htmlwhole filehtml
<input name="city" value="Pune">
<input name="nick" placeholder="e.g. asha_07" maxlength="10">

04readonly vs disabled

Both stop typing, but they behave differently. readonly is still part of the form: it can be focused, copied and is sent. disabled is switched off completely and is left out of the submission.

readonly vs disableddiagram
Rendering diagram…

05Reading values in JavaScript

.value is always a string. For a number input, .valueAsNumber gives a real number (or NaN, "not a number", when the box is empty). Mixing them up is why "2" + "3" becomes "23" instead of 5, a classic bug you'll meet again in the JavaScript course.

terminal
$ qty.value + 1 // qty holds 2
── expected output ──
"21"

Try it yourself

  1. 1

    Predict the fallback

    In the first example, change type="banana" to type="date", which is a real type (Topic 4.5). Predict what the console prints for mood, then run it. (It prints date, and the box becomes a date picker.)

  2. 2

    Type past the limit

    In the second example's preview, click into Nickname and try typing more than 10 characters. The box stops accepting characters at 10.

  3. 3

    Swap readonly and disabled

    Put disabled on the invite code and readonly on the plan. Predict the new Sent: line before you run it: plan=Free&nick=.

Code & diagrams

Every text-like type, and the fallback New tab

`type="banana"` isn't a real type, so the browser quietly treats it as text. On a phone, tap each box to see a different keyboard.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

full is type text
email is type email
pw is type password
q is type search
phone is type tel
site is type url
qty is type number
mood is type text
string 3 3
value + 1 = 31 but valueAsNumber + 1 = 4
placeholder, maxlength, readonly and disabled New tab

The placeholder is not a value, readonly is sent, disabled is not. `maxlength` only limits typing: a script can still set a longer value.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Sent: code=ABC123&nick=
Nickname value is empty? true
maxLength: 10
Script-set value length: 20

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Add numbers from inputs

In the first example, add console.log(qty.value + qty.value); at the end.

terminal
$ Console
── what you'll see ──
33

Break #2

Use a placeholder instead of a label

Replace the label "Nickname" with only placeholder="Nickname", then type in the box.

terminal
$ the page shows
── what you'll see ──
a box containing "asha" with nothing saying what it is for

Myth vs fact

Myth

type="number" is right for any digits, like a PIN or card number.

Fact

Use it only for real quantities you might add up. For codes, use type="text" with inputmode="numeric", so leading zeros and long digit strings are kept and the mouse wheel can't change them.

Myth

type="password" encrypts the password.

Fact

It only hides the characters on screen. The value is plain text in the page and in the request; HTTPS protects it on the way.

Myth

A placeholder is enough to explain a field.

Fact

It vanishes when you type, is often hard to read, and is not a reliable accessible name. Use a real label.

Myth

type="tel" checks the phone number.

Fact

It only changes the keyboard. Add pattern (Topic 4.7) if you need a format.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    Unknown type values fall back to text, which makes HTML forward compatible: new types like datetime-local degrade to a text box in old browsers instead of breaking the form.

  • ▸

    maxlength counts UTF-16 code units, not visible characters, so many emoji count as 2. minlength/maxlength validity (tooShort, tooLong) only applies after the user edits the field; values set by script are never flagged.

  • ▸

    Browsers sanitise values by type: setting .value = "abc" on a number input gives "", and an email input trims leading and trailing spaces. Read .value after setting it if you rely on it.

  • ▸

    readonly is ignored on types where it makes no sense (checkbox, radio, file, range, color); use disabled or JavaScript there. A readonly field is also skipped by constraint validation, so required has no effect on it.

Remember this

  1. 1

    <input> is a void element (no closing tag, Topic 1.1). With no type, or a type the browser doesn't know, it is type="text": a single line of free text. Its value is always a string (a piece of text), even for type="number".

  2. 2

    type="email" and type="url" check the format before the form is sent (Topic 4.7) and show a keyboard with @ or .com on phones. type="tel" does not check anything, because phone formats differ around the world, but it shows a number pad. type="search" behaves like text, may show a clear (×) button and lets assistive technology announce a search box. type="password" hides the characters on screen (the value is still plain text in the page and in the request).

  3. 3

    type="number" shows a spin button and only accepts numbers. It has min, max and step (Topic 4.7). Its .value is still a string like "3"; read .valueAsNumber to get the number 3. Don't use it for things that only look like numbers, such as card numbers, PINs or postcodes: leading zeros, scrolling the mouse wheel and spin buttons all cause trouble there. Use type="text" with inputmode="numeric" (Topic 4.8).

  4. 4

    The value attribute sets the starting value. As soon as someone types, the live value (the .value property) changes, but the attribute stays the same; that's why a reset button can put the original back (Topic 4.6). placeholder shows grey hint text only while the box is empty. It is not a value, it is not sent, and it is not a label: it disappears when you type, is often too faint to read, and many screen readers treat it as a weak fallback.

  5. 5

    maxlength stops the person from typing more than that many characters (and minlength sets a minimum, Topic 4.7). size sets the visible width in characters, but CSS width is the usual way.

  6. 6

    readonly means "you can see and select this, but not change it": the value is still sent with the form and the box can still be focused. disabled means "this is switched off": it's greyed out, can't be focused or clicked, and its value is not sent. Pick readonly for a fixed value the server needs, disabled for something that doesn't apply right now.

Explain it without notes

01

What changes when you switch an input from type="text" to type="email"?

02

Why is a placeholder not a replacement for a label?

03

Explain the difference between readonly and disabled.

04

Why does a number input's .value give "3" and how do you get the number?

Practice

01

Build a small sign-up section with a text input for the name, an email input, a password input with maxlength="64", and a number input for age. Give each a name.

02

Add a readonly input that shows a referral code HECTAL10 and check with FormData that it is sent.

Trade-offs

  • ↔

    Specific types (email, url, number) give free keyboards and checks but their built-in rules may not match yours; text with your own pattern gives full control at the cost of the special keyboard (which inputmode can bring back).

Done when you can

  • I can choose the right input type for names, emails, passwords, searches, phones, URLs and numbers.

  • I know that every input value is a string.

  • I can explain why a placeholder is not a label.

  • I can use maxlength, readonly and disabled and say what each does to the submitted data.

  • I know what happens with an unknown type.