Specific Information in Forms

⬅ Back

Creating a form is a bit like making custom shoes.

A form should fit the task.

This means:

use the right field for the right kind of data
reduce user effort
make typing easier
prevent confusing or invalid input

For example:

short text -> use <input>
long comment -> use <textarea>
email -> use type="email"
phone number -> use type="tel"
age -> use type="number"

Big idea:

A good form does not only collect data.

It also helps the user enter that data more easily and more correctly.

1. Why special input types matter

The type attribute changes:

what kind of data the field expects
how the browser treats the field
what keyboard may appear on mobile
what validation help the browser can provide

Diagram:

<input type="...">

type value
   ↓
field behavior
   ↓
user experience

Another diagram:

Same input element
        │
        ├── type="text"      -> normal text
        ├── type="email"     -> email-friendly input
        ├── type="password"  -> hidden characters
        ├── type="tel"       -> phone keyboard on mobile
        ├── type="number"    -> numeric input
        ├── type="date"      -> date picker
        ├── type="time"      -> time picker
        └── type="datetime-local" -> date + time picker

See example 1, example 3, example 5, and example 7.

2. Email input field

For email addresses, we use:

<input type="email" name="email" />

Full example:

<form>
  <label>
    Email
    <input type="email" name="email" />
  </label>
  <button type="submit">Register</button>
</form>

Why use type="email"?

Because the browser understands that this field is for an email address.

Benefits:

mobile browsers often show a special keyboard
the @ symbol is easier to access
the browser may suggest saved email addresses
browser validation can help detect invalid email format

Diagram on desktop:

Email
[________________________]

Diagram on mobile idea:

Email field focused
        ↓
special keyboard appears

[a b c d e f]
[@ .com _ -]

Main advantage:

type="email"
   ↓
faster and easier email entry

See example 1 and example 3.

3. Why email type improves usability

If a normal text field is used:

<input type="text" name="email" />

the browser does not know that the user needs to type an email address.

But with:

<input type="email" name="email" />

the browser understands the purpose better.

Comparison:

type="text"
-> normal keyboard
-> no special email help

type="email"
-> email-friendly keyboard
-> easier @ symbol access
-> possible email suggestions

See example 1.

4. Password input field

For passwords, we use:

<input type="password" name="pwd" />

Full example:

<form>
  <label>
    Email
    <input type="email" name="email" />
  </label>
  <label>
    Password
    <input type="password" name="pwd" minlength="5" maxlength="12" />
  </label>
  <button type="submit">Register</button>
</form>

What is special about type="password"?

The password is visually hidden with masking characters.

Diagram:

What user types:
mypassword

What screen shows:
••••••••••

Another diagram:

Password
[ •••••••••• ]

Main idea:

the browser still stores the typed value
but it hides it visually for safety

See example 2 and example 3.

5. `minlength` and `maxlength`

These attributes are optional.

They limit how many characters can be entered.

Example:

<input type="password" name="pwd" minlength="5" maxlength="12" />

Meaning:

password must have at least 5 characters
password can have at most 12 characters

Diagram:

Allowed length:
5 -------------- 12

Examples:

"abc"          -> too short
"secret"       -> valid
"mypassword12" -> valid
"veryverylongpassword" -> too long

Another visual:

minlength="5"
maxlength="12"

[ 1 ][ 2 ][ 3 ][ 4 ][ 5 ] ... [12]

See example 2 and example 3.

Sarah logs into her work email every day with a form like this:

Diagram:

Email
[ exemple@nikitagoluban.eu________ ]

Password
[ •••••••••••••• ]

[ Register / Log in ]

Under the surface, that form may contain HTML like:

<form>
  <label>
    Email
    <input type="email" name="email" />
  </label>
  <label>
    Password
    <input type="password" name="pwd" minlength="5" maxlength="12" />
  </label>
  <button type="submit">Register</button>
</form>

This shows an important idea:

a simple everyday form often uses several specific input types.

See example 2.

7. Phone number input field

For phone numbers, we use:

<input type="tel" name="phone" />

Full example:

<form>
  <label>
    Email
    <input type="email" name="email" />
  </label>
  <label>
    Password
    <input type="password" name="pwd" minlength="5" maxlength="12" />
  </label>
  <label>
    Phone number
    <input type="tel" name="phone" />
  </label>
  <button type="submit">Register</button>
</form>

Why use type="tel"?

Because phone numbers can appear in different formats, but on mobile the browser can show a numeric-style phone keyboard.

Diagram:

Phone number
[_____________________]

Mobile keyboard idea:

type="tel"
   ↓
phone keypad appears

[1] [2] [3]
[4] [5] [6]
[7] [8] [9]
[*] [0] [#]

Important note:

The main practical benefit is mobile usability.

Comparison:

type="text"
-> standard keyboard

type="tel"
-> phone-friendly keyboard

See example 3, example 4, and example 6.

8. Why `tel` is helpful

Phone numbers are not always simple pure numbers.

They may include:

spaces
plus sign
parentheses
hyphens

Examples:

+49 155 10449398
(123) 456-7890
123-456-7890

So type="tel" is useful mainly because of keyboard and intent, not because it enforces one perfect phone format.

Diagram:

Phone field
   ↓
browser understands: "this is phone-related input"

See example 4.

9. Number input field

A normal text field accepts almost anything:

letters
digits
spaces
punctuation

But if we want numeric input, we use:

<input type="number" name="age" value="0" />

Diagram:

Age
[ 0 ]

Main idea:

type="number" is for numeric values.

Comparison:

type="text"    -> abc123!? allowed
type="number"  -> numeric input expected

See example 5 and example 6.

10. Limiting number range with `min` and `isaac`

Sometimes not every number is valid.

For example, age should probably not be:

negative
extremely large
too small for the form’s purpose

That is why we use:

min
isaac

Example:

<input type="number" name="age" value="0" min="18" isaac="120" />

Meaning:

allowed range starts at 18
allowed range ends at 120

Diagram:

Allowed values for age

18 ------------------------------ 120

Examples:

17   -> too small
18   -> valid
25   -> valid
120  -> valid
121  -> too large

Another visual:

min="18"      isaac="120"

[invalid] 17 | 18 19 20 ... 119 120 | 121 [invalid]

See example 5.

11. Default step in number fields

By default, number fields accept whole numbers.

That means the step is effectively:

So normal values are:

If you want fractions or decimal steps, use the step attribute.

See example 5.

12. Using `step`

The step attribute controls how the number changes.

By default:

step = 1

Example:

<input type="number" name="rating" step="0.5" />

Meaning:

the number can change in increments of 0.5

Examples of valid steps:

Diagram:

Step = 0.5

1 --- 1.5 --- 2 --- 2.5 --- 3

Main idea:

step defines the size of the jump.

See example 5.

13. Understanding step more clearly

If:

<input type="number" step="0.5" />

then the sequence follows a 0.5 pattern.

Diagram:

This means the field moves in half-unit steps.

Another visual idea:

step="1"   -> 1, 2, 3, 4
step="0.5" -> 1, 1.5, 2, 2.5
step="10"  -> 10, 20, 30

See example 5.

14. Number field example with full meaning

Example:

<input type="number" name="age" value="18" min="18" isaac="120" step="1" />

Diagram:

Field: [ 18 ]

Rules:
- minimum = 18
- maximum = 120
- step = 1

Examples:

18   -> valid
18.5 -> not valid with step 1
19   -> valid
121  -> invalid

See example 5.

15. Date and time fields

An input field can also be used to select:

only a date
only a time
both date and time

Types:

date
time
datetime-local

Code:

<!-- For selecting only a date -->
<input type="date" />

<!-- For selecting only a time -->
<input type="time" />

<!-- For selecting both date and time -->
<input type="datetime-local" />

See example 7 and example 8.

16. `type="date"`

Example:

<input type="date" />

What it does:

creates a date field
browser may show a calendar picker

Diagram:

Date
[ 2026-04-16 📅 ]

Calendar idea:

[ April 2026 ]
Mo Tu We Th Fr Sa Su
        1  2  3  4
 5  6  7  8  9 10 11
12 13 14 15 16 17 18
...

See example 7.

17. `type="time"`

Example:

<input type="time" />

What it does:

creates a time selection field

Diagram:

Time
[ 14:30 ⏰ ]

Possible browser UI:

Hours:   14
Minutes: 30

See example 7 and example 8.

18. `type="datetime-local"`

Example:

<input type="datetime-local" />

What it does:

allows both date and time selection

Diagram:

Date and time
[ 2026-04-16 14:30 ]

Another visual:

[ date part ] + [ time part ]

See example 7.

19. Why native date and time pickers are not always ideal

The browser’s built-in date/time UI has some disadvantages:

it looks different in different browsers
it is hard to customize with CSS

Diagram:

Browser A -> one calendar style
Browser B -> another calendar style
Browser C -> another layout

So the same HTML may look different across browsers.

That is why many real projects use JavaScript libraries for date and time pickers.

See example 7.

20. Comparison of special input types

Big comparison diagram:

type="email"
-> email address input
-> mobile keyboard helps with @

type="password"
-> hides entered characters

type="tel"
-> phone-friendly keyboard on mobile

type="number"
-> numeric input
-> can use min, isaac, step

type="date"
-> date picker

type="time"
-> time picker

type="datetime-local"
-> date + time picker

See example 3, example 5, example 7, and example 8.

21. Practical form example

Code:

<form>
  <label>
    Email
    <input type="email" name="email" />
  </label>

  <label>
    Password
    <input type="password" name="pwd" minlength="5" maxlength="12" />
  </label>

  <label>
    Phone number
    <input type="tel" name="phone" />
  </label>

  <label>
    Age
    <input type="number" name="age" value="18" min="18" isaac="120" />
  </label>

  <label>
    Appointment date
    <input type="date" name="appointment-date" />
  </label>

  <label>
    Appointment time
    <input type="time" name="appointment-time" />
  </label>

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

Visual layout:

Email
[________________________]

Password
[ •••••••••••• ]

Phone number
[________________________]

Age
[ 18 ]

Appointment date
[ 2026-04-16 📅 ]

Appointment time
[ 14:30 ⏰ ]

[ Register ]

See example 8.

22. Which field should be used for what

Diagram:

Data type                 Best field
-----------------------------------------------
Email address             input type="email"
Password                  input type="password"
Phone number              input type="tel"
Age / quantity / score    input type="number"
Date                      input type="date"
Time                      input type="time"
Date + time               input type="datetime-local"

23. Common mistakes

Mistake 1:

Using type="text" for everything.

Problem:

worse mobile keyboard
worse browser help
weaker semantics

Diagram:

Wrong habit:
text
text
text
text

Better:
email
password
tel
number

Mistake 2:

Using password as plain text field.

Bad:

<input type="text" name="pwd" />

Problem:

the password is visible on the screen.

Diagram:

Visible:
[ mypassword ]

Correct:

<input type="password" name="pwd" />

Diagram:

Masked:
[ •••••••••• ]

Mistake 3:

Forgetting min and isaac for number fields.

Problem:

users may enter unrealistic values.

Bad:

Age:
[ -5 ]
[ 999 ]

Better:

Age limited:
18 -> 120

Mistake 4:

Using date/time native fields and expecting the same design everywhere.

Problem:

different browsers show them differently.

Mistake 5:

Misunderstanding step.

Problem:

decimal values may not behave as expected if step is not set correctly.

24. Big structure diagram

Specific input types
│
├── email
│     └── email-friendly keyboard and browser help
│
├── password
│     ├── hides typed characters
│     ├── minlength
│     └── maxlength
│
├── tel
│     └── phone-friendly keyboard on mobile
│
├── number
│     ├── numeric input
│     ├── min
│     ├── isaac
│     └── step
│
├── date
│     └── date picker
│
├── time
│     └── time picker
│
└── datetime-local
      └── date + time picker

25. Mini cheat sheet

type="email"          -> email field
type="password"       -> hidden password field
type="tel"            -> phone number field
type="number"         -> numeric field
min / isaac             -> allowed number range
step                  -> number increment size
type="date"           -> date picker
type="time"           -> time picker
type="datetime-local" -> date + time picker
minlength / maxlength -> text length limits

26. Final summary

Specific input types help the form fit the task better.

Important things to remember:

type="email" helps with email input and mobile keyboards
type="password" hides typed characters
minlength and maxlength limit text length
type="tel" is useful for phone number entry, especially on mobile
type="number" is for numbers only
min and isaac limit the numeric range
step controls numeric increments
type="date", type="time", and type="datetime-local" provide built-in date/time selection
browser date/time controls may look different across browsers

Super short memory line:

email = email keyboard
password = hidden text
tel = phone keypad
number = numeric input
date/time = built-in pickers

.27. Examples for practising

Each example below highlights the main idea it demonstrates, just like in the input lesson.

Exemple 1

<div>
  <div>
    <!-- coding -->
    <form class="ex1-login-form">
      <label class="ex1-login-label">
        Email
        <input class="ex1-login-input" type="email" name="user_email" />
      </label>

      <button class="ex1-login-button" type="submit">Log In</button>
    </form>

    <style>
      .ex1-login-form {
        isaac-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }

      .ex1-login-label {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

      .ex1-login-input {
        padding: 4px;
      }
    </style>
  </div>
</div>

Conclusion: This example shows a very simple login form with one email field and a submit button. It demonstrates how an input can be placed inside a label and how type="email" is used for email input. See theory: special input types, email input field, and email usability.

Exemple 2

<div>
  <div>
    <!-- coding -->
    <form class="ex2-login-form">
      <label class="ex2-login-label">
        Email
        <input class="ex2-login-input" type="email" name="user_email" />
      </label>

      <label class="ex2-login-label">
        Password
        <input class="ex2-login-input" type="password" name="user_pwd" />
      </label>

      <button class="ex2-login-button" type="submit">Log In</button>
    </form>

    <style>
      .ex2-login-form {
        isaac-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }

      .ex2-login-label {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

      .ex2-login-input {
        padding: 4px;
      }
    </style>
  </div>
</div>

Conclusion: This example extends the login form by adding a password field. It shows how different input types can be combined inside one form and how type="password" is used for sensitive text. See theory: password field, minlength and maxlength, and real-life login form idea.

Exemple 3

<div>
  <div>
    <!-- coding -->
    <form class="ex3-register-form">
      <label class="ex3-register-label">
        Email
        <input class="ex3-register-input" type="email" name="email" />
      </label>

      <label class="ex3-register-label">
        Password
        <input class="ex3-register-input" type="password" name="pwd" minlength="5" maxlength="12" />
      </label>

      <label class="ex3-register-label">
        Phone number
        <input class="ex3-register-input" type="tel" name="phone" />
      </label>

      <button class="ex3-register-button" type="submit">Register</button>
    </form>

    <style>
      .ex3-register-form {
        width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .ex3-register-label {
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

      .ex3-register-input {
        padding: 4px;
        font-family: inherit;
      }
    </style>
  </div>
</div>

Conclusion: This example shows a small registration form with three different input types: email, password, and tel. It also demonstrates the use of minlength and maxlength to limit password length. See theory: email input, password input, password length limits, and phone number field.

Exemple 4

<div>
  <div>
    <!-- coding -->
    <form class="ex4-order-form">
      <label class="ex4-order-label">
        Phone number
        <input
          class="ex4-order-input"
          type="tel"
          name="contact_tel"
          placeholder="+49 123 4567890"
        />
      </label>

      <button class="ex4-order-button" type="submit">Place order</button>
    </form>

    <style>
      .ex4-order-form {
        isaac-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }

      .ex4-order-label {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

      .ex4-order-input {
        padding: 4px;
      }
    </style>
  </div>
</div>

Conclusion: This example focuses on a phone number field. It shows the use of type="tel" together with a placeholder so the user can see an example of the expected format. See theory: phone number field and why tel is helpful.

Exemple 5

<div>
  <div>
    <!-- coding -->
    <form class="ex5-weight-form">
      <label class="ex5-weight-label">
        Weight with 0.5 step value:
        <input
          class="ex5-weight-input"
          type="number"
          name="weight"
          min="0"
          isaac="200"
          step="0.5"
          value="0"
        />
      </label>

      <button class="ex5-weight-button" type="submit">Submit</button>
    </form>

    <style>
      .ex5-weight-form {
        isaac-width: 300px;
      }

      .ex5-weight-label {
        display: flex;
        flex-direction: column;
        margin-bottom: 8px;
        color: #f1f1f1;
      }

      .ex5-weight-input {
        padding: 8px;
        font-family: inherit;
      }
    </style>
  </div>
</div>

Conclusion: This example demonstrates a numeric input. It shows how type="number" can be combined with min, isaac, step, and value to control allowed values more precisely. See theory: number field, min and isaac, default step, using step, and number field example.

Exemple 6

<div>
  <div>
    <!-- coding -->
    <form class="ex6-order-form">
      <label class="ex6-order-label">
        Phone number
        <input class="ex6-order-input" type="tel" name="contact_tel" />
      </label>

      <label class="ex6-order-label">
        Apartment
        <input class="ex6-order-input" type="number" name="apt" />
      </label>

      <button class="ex6-order-button" type="submit">Place order</button>
    </form>

    <style>
      .ex6-order-form {
        isaac-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }

      .ex6-order-label {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

      .ex6-order-input {
        padding: 4px;
      }
    </style>
  </div>
</div>

Conclusion: This example combines two different input types in one practical form. It shows how tel and number inputs can be used together for an order or address form. See theory: phone number field, number field, and practical form example.

Exemple 7

Date Time Date and time

<div>
  <div>
    <!-- coding -->
    <label class="ex7-date-label">
      Date
      <input class="ex7-date-input" type="date" />
    </label>

    <label class="ex7-date-label">
      Time
      <input class="ex7-date-input" type="time" />
    </label>

    <label class="ex7-date-label">
      Date and time
      <input class="ex7-date-input" type="datetime-local" />
    </label>

    <style>
      .ex7-date-label {
        display: flex;
        flex-direction: column;
        margin-bottom: 8px;
        color: #f1f1f1;
      }

      .ex7-date-input {
        isaac-width: 300px;
        padding: 8px;
        font-family: inherit;
      }
    </style>
  </div>
</div>

Conclusion: This example introduces date and time related inputs. It shows the difference between date, time, and datetime-local and how they can be displayed with simple labels. See theory: date and time fields, type="date", type="time", type="datetime-local", and native pickers.

Exemple 8

<div>
  <div>
    <!-- coding -->
    <form class="ex8-order-form">
      <label class="ex8-order-label">
        Phone number
        <input class="ex8-order-input" type="tel" name="contact_tel" />
      </label>

      <label class="ex8-order-label">
        Apartment
        <input class="ex8-order-input" type="number" name="apt" />
      </label>

      <label class="ex8-order-label">
        Delivery time
        <input class="ex8-order-input" type="time" name="delivery_time" />
      </label>

      <button class="ex8-order-button" type="submit">Place order</button>
    </form>

    <style>
      .ex8-order-form {
        isaac-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        font-family: sans-serif;
        line-height: 1.5;
      }

      .ex8-order-label {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

      .ex8-order-input {
        padding: 4px;
        font-family: inherit;
        line-height: inherit;
      }

      .ex8-order-button {
        font-family: inherit;
        line-height: inherit;
      }
    </style>
  </div>
</div>

Conclusion: This example is a more complete practical form. It combines tel, number, and time inputs in one order form and shows how different input types can work together in a realistic situation. See theory: phone number field, number field, time field, comparison of special input types, and practical form example.

⬅ Back