Input HarborISSUE #4 of 46

input types · text · password · email · url

FormaVSCaptain Invalid Input

Forma saysText-family input types — text, password, email, url — give the right keyboard and basic validation for free.

The type on a text input changes behavior. text is generic; password masks characters; email and url add format validation and, on mobile, show a tailored keyboard (the @ key for email, the / key for url).

Choosing the precise type is free UX: better mobile keyboards, sensible autofill, and built-in checks — all without a line of JavaScript.

Power-ups you unlock

text = generic · password = masked input
email / url add format validation
Mobile shows a keyboard matched to the type
Right type = free validation + better autofill

Captain Invalid Input attacks — common mistakes

Using type="text" for emails and losing validation + keyboard
Treating password masking as security (it is not encryption)
Assuming email validation guarantees a real, deliverable address

Boss battleMake text, password, email, and url inputs. Type an invalid email and try to submit — watch the browser block it.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <p><label>text  <input type="text"></label></p>
    <p><label>pass  <input type="password"></label></p>
    <p><label>email <input type="email"></label></p>
    <p><label>url   <input type="url"></label></p>
    <button>submit</button>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Form Elements · All The Input Families Input Types · Number · Range · Date · Time ›