Step:27 input type file

Tell us what’s happening:
Describe your issue in detail here.

Step 27

Moving on to the final fieldset. What if you wanted to allow a user to upload a profile picture?

Well, the input type file allows just that. Add a label with the text Upload a profile picture: , and add an input accepting a file upload.

It’s telling me that I need to “You should nest an input element inside the label element”. I am confused as to what this should look like or if there is an example out there. I’ve attempted to look up “input types” but the examples online don’t seem to be connecting with me

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <title>Registration Form</title>
	  <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <h1>Registration Form</h1>
   <p>Please fill out this form with the required information</p>
   <form action='https://register-demo.freecodecamp.org'>
     <fieldset>
       <label>Enter Your First Name: <input type="text" required /></label>
       <label>Enter Your Last Name: <input type="text" required /></label>
       <label>Enter Your Email: <input type="email" required /></label>
       <label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
     </fieldset>
     <fieldset>
       <label><input type="radio" name="account-type" /> Personal Account</label>
       <label><input type="radio" name="account-type" /> Business Account</label>
       <label>
         <input type="checkbox" required /> I accept the
				    <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
			  </label>
     </fieldset>
     <fieldset>
       <input type="file" id="file" name="file">
       <label for="file">Upload a profile picture:</label>
       

     </fieldset>
     <input type="submit" value="Submit" />
   </form>
 </body>
</html>
/* file: styles.css */
body {
 width: 100%;
 height: 100vh;
 margin: 0;
 background-color: #1b1b32;
	color: #f5f6f7;
}

label {
	display: block;
	margin: 0.5rem 0;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Step 27

Link to the challenge:

Yes there is. In fact, you have already done it several times :slight_smile:

<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>

Does this look familiar? It should, it’s the HTML you created in previous steps.

Just to be clear, you have created the new input and label elements correctly. You just need to nest them appropriately.

I made this way harder than it should’ve been. I kept typing it into Google and was getting confused. I started thinking what they were asking for was completely different than what I had completed previously. Thank you

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.