Project 19: Profile Settings Card

HTML Masterclass

Builds on these lessons

Input Date Input Time Input Color Input Range Input Number Input File Forms Autocomplete Forms Inputmode

Step 1 of 4

Project

Avatar Upload & Birthday

Add an <input type="file" accept="image/*"> for a profile photo — accept restricts the file picker to images — and an <input type="date"> for a birthday, which gives every browser a native date picker with zero markup beyond the type.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile Settings</title>
</head>
<body>
  <h1>Profile Settings</h1>
  <form action="/profile" method="POST" enctype="multipart/form-data">
    <label for="avatar">Profile Photo</label>
    <input type="file" id="avatar" name="avatar" accept="image/*">
    <label for="birthday">Birthday</label>
    <input type="date" id="birthday" name="birthday">
  </form>
</body>
</html>

← Previous Next →