Input types (text, email, password, number) in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a text input field for a user's name.

HTML

<label for="name">Name:</label>
<input id="name" type="[1]" name="name">

Drag options to blanks, or click blank then click option'

Aemail

Bnumber

Cpassword

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'email' type for name input, which expects an email format.

Using 'password' type which hides the input characters.

The type="text" creates a simple text input field for general text like a name.

2fill in blank

medium

Complete the code to create an input field that only accepts email addresses.

HTML

<label for="user-email">Email:</label>
<input id="user-email" type="[1]" name="email">

Drag options to blanks, or click blank then click option'

Aemail

Bpassword

Ctext

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text' type which does not validate email format.

Using 'password' type which hides the input.

The type="email" input helps browsers check if the entered text looks like an email address.

3fill in blank

hard

Fix the error in the code to create a password input field that hides the typed characters.

HTML

<label for="pass">Password:</label>
<input id="pass" type="[1]" name="password">

Drag options to blanks, or click blank then click option'

Apassword

Bemail

Ctext

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text' type which shows the password openly.

Using 'email' or 'number' types which are not suitable for passwords.

The type="password" input hides the characters typed, showing dots or stars instead.

4fill in blank

hard

Fill both blanks to create a number input field with a minimum value of 1.

HTML

<label for="age">Age:</label>
<input id="age" type="[1]" name="age" min="[2]">

Drag options to blanks, or click blank then click option'

Anumber

B1

Cemail

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text' type which allows any characters.

Not setting the minimum value correctly.

The type="number" input allows only numbers. The min attribute sets the smallest allowed number, here 1.

5fill in blank

hard

Fill all three blanks to create an email input with a placeholder and required attribute.

HTML

<label for="contact">Contact Email:</label>
<input id="contact" type="[1]" name="contact" placeholder="[2]" [3]>

Drag options to blanks, or click blank then click option'

Atext

Bemail

Crequired

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text' type instead of 'email'.

Forgetting to add the 'required' attribute.

The type="email" input checks for email format. The placeholder shows a hint inside the box. The required attribute makes sure the user cannot leave it empty.