Input types (text, email, password, number) in HTML - Mini Project: Build & Apply

Creating a Simple Form with Different Input Types

📖 Scenario: You are building a simple contact form for a website. The form needs fields for the user's name, email, password, and age.

🎯 Goal: Create an HTML form with input fields for name, email, password, and age using the correct input types.

📋 What You'll Learn

Use the text input type for the name field

Use the email input type for the email field

Use the password input type for the password field

Use the number input type for the age field

Include labels for each input for accessibility

💡 Why This Matters

🌍 Real World

Forms are everywhere on the web for collecting user information like sign-ups, contact details, and surveys.

💼 Career

Knowing how to create accessible and correct input fields is essential for front-end web development jobs.

1

Create the HTML form skeleton

Write the opening <form> tag and the closing </form> tag to create a form container.

HTML

Need a hint?

The form tag wraps all the input fields.

2

Add a text input for the user's name

Inside the <form>, add a <label> with the text Name: and an <input> with type="text" and id="name".

HTML

Need a hint?

Use type="text" for the name input and link the label with for="name".

3

Add email and password inputs

Below the name input, add a <label> with text Email: and an <input> with type="email" and id="email". Then add a <label> with text Password: and an <input> with type="password" and id="password".

HTML

  Name:
  
  
  

Need a hint?

Use type="email" for the email input and type="password" for the password input.

4

Add a number input for age

Below the password input, add a <label> with text Age: and an <input> with type="number" and id="age". Then close the form with a submit button: <button type="submit">Submit</button>.

HTML

  Name:
  
  Email:
  
  Password:
  
  
  

Need a hint?

Use type="number" for the age input and add a submit button to send the form.