Passwords & Email Validation Fields
What are Secure Inputs?
Think of writing down your password in public. You cover the paper with your hand so onlookers can't see the letters.HTML provides specialized input fields to handle sensitive or structured data:
<input type="password">: Masks the typed characters with dots or stars so they cannot be read over the shoulder.<input type="email">: Tells the browser that the text must be a valid email address (e.g., must contain @ and a domain). The browser will block form submissions if the email format is invalid.Why does it matter?
Using<input type="password"> is vital for security. Using <input type="email"> triggers modern mobile keyboards to show the @ symbol on the main keyboard layout, improving mobile user experiences, and provides instant built-in format validation.
How to write it
Nest these inputs inside your form:<form>
<input type="password" id="pass">
<input type="email" id="mail">
</form>
Common Mistakes
type="text" for passwords: If you use type="text", passwords will be fully visible on screen, exposing sensitive user credentials to security risks.Quick Reference
<input type="password"> — Masks input text.<input type="email"> — Validates email addresses and adjusts mobile keyboards.Your Task
Create a `<form>`. In it, place:
1. A password field `<input>` with `type="password"` and `id="pass"`.
2. An email field `<input>` with `type="email"` and `id="mail"`.
index.html
Type code above to start the lesson.
Live Preview