CodeBlanks Logo Icon CodeBlanks
Login Register

Person fields

HTML course · Intermediate · Lesson 43/67

Add name, email and phone fields with correct types.

The text, email and tel types

A contact form has three core person fields: name, email and phone. <input type='text'> takes free text, <input type='email'> validates the email shape, <input type='tel'> opens the right on-screen keyboard for phone numbers.

Pick the right type and the browser does built-in validation, shows the right mobile keyboard and builds user trust in the form. Pick the wrong one and you lose all of that.

required and placeholder

The required attribute marks a field that can't be left empty; the browser stops the submit and warns the user. The placeholder attribute shows a short hint about what to type.

Placeholder is not a default value: it's greyed out until the user types and it's never submitted to the server. Don't use it instead of a label; always name the field with a label.

Exercise Add the email and phone fields

Add two more label+input pairs to the 'Contact details' fieldset. First: label for='email' 'Email', input type='email' id='email' name='email' placeholder='name.surname@example.com' required. Second: label for='phone' 'Phone', input type='tel' id='phone' name='phone' placeholder='+1 555 123 4567'.

Show example solution 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cafe Dem - Contact</title>
  </head>
  <body>
    <form action="/contact" method="post">
      <fieldset>
        <legend>Contact details</legend>
        <label for="name">Your name</label>
        <input type="text" id="name" name="name">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" placeholder="name.surname@example.com" required>
        <label for="phone">Phone</label>
        <input type="tel" id="phone" name="phone" placeholder="+1 555 123 4567">
      </fieldset>
    </form>
  </body>
</html>

Test yourself

  1. Which input type validates the email format automatically?

    <input type="?" name="email">
    • text
    • email
    • tel
    • search
    Show answer

    email — Correct! type='email' tells the browser to validate the email shape.

  2. Fill in: add required

    <input type="email" id="email" name="email" placeholder="name.surname@example.com" ____>
    Show answer 
    <input type="email" id="email" name="email" placeholder="name.surname@example.com" required>

  3. Match types to their expected input

    text
    Full name
    email
    Email address
    tel
    Phone number
    password
    Secret password

All lessons in Intermediate

1 Advanced text elements

  1. Abbr, cite and time
  2. Code, kbd and samp
  3. Sub and sup
  4. Pre and code block
  5. Wbr, bdi, bdo
  6. Summary - Technical doc

2 Advanced links

  1. Download links
  2. Ping and rel types
  3. Hreflang and canonical
  4. Link accessibility
  5. Button vs link
  6. Summary - Multilingual menu

3 Project: Landing page

  1. Project: Product landing page
  2. Hero section
  3. Feature list
  4. Pricing table
  5. Project final - Landing

4 Advanced tables

  1. Col and colgroup
  2. Scope and headers
  3. Table accessibility
  4. Responsive tables
  5. Table visual structure
  6. Summary - Comparison table

5 Project: Data table

  1. Project: Data table
  2. Header and caption
  3. Body data
  4. Summary row
  5. Project final - Data table

6 Advanced form elements

  1. Fieldset and legend
  2. Datalist and output
  3. Progress and meter
  4. Input attributes
  5. Autocomplete and inputmode
  6. Summary - Survey form

7 Form validation

  1. Required and pattern
  2. Min, max and step
  3. Minlength and maxlength
  4. Type-based validation
  5. Novalidate and formnovalidate
  6. Summary - Registration validation

8 Project: Contact form

  1. Project: Contact form
  2. Form skeleton
  3. Person fields
  4. Message and subject
  5. Project final - Contact form

9 Semantic layout

  1. Header structure
  2. Main content
  3. Sidebar and aside
  4. Footer structure
  5. Sectioning rules
  6. Summary - Magazine page

10 Accessibility basics

  1. ARIA basics
  2. Visually hidden heading
  3. Skip link
  4. Form accessibility
  5. Table accessibility
  6. Summary - Accessible card

11 Project: Site skeleton

  1. Project: Multi-page site skeleton
  2. Consistent header/footer
  3. Home page
  4. About and contact
  5. Project final - Site skeleton

12 Intermediate final

  1. Challenge - Advanced text
  2. Challenge - Accessible table
  3. Challenge - Validated form
  4. Challenge - Semantic layout
  5. Challenge - Intermediate capstone