Learn Accessibility by Building a Quiz - Step 21

HTML-CSS
1

Step 21

Keeping in mind best-practices for form inputs, give each input an appropriate type and name attribute. Then, give the first input a placeholder attribute.

I don’t see a “name” attribute in the input type list on w3. HTML Input Types

So I assume its type=text on the input but that is not passing.

Hint you should give the first input an appropriate name attribute.

Your code so far

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 
       <section role="region" aria-labelledby="student-info">
         <h2 id="student-info">Student Info</h2>
         <div class="info">
           <label for="student-name">Name:</label>
           <input type="text" id="student-name" placeholder="student-name" />
         </div>
         <div class="info">
           <label for="student-email">Email:</label>
           <input type="email" id="student-email" />
         </div>
         <div class="info">
           <label for="birth-date">D.O.B.:</label>
           <input type="date" id="birth-date" />
         </div>
       </section>
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
       </section>
       <section role="region" aria-labelledby="css-questions">
         <h2 id="css-questions">CSS</h2>
       </section>
     </form>
   </main>
 </body>
</html>


   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 21

Link to the challenge:

2 
name="student-name"

is not working either

<section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="info">
            <label for="student-name">Name:</label>
            <input type="text" id="student-name" placeholder="student-name"  name="student-name"/>
          </div>
          <div class="info">
            <label for="student-email">Email:</label>
            <input type="email" id="student-email" />
          </div>
          <div class="info">
            <label for="birth-date">D.O.B.:</label>
            <input type="date" id="birth-date" />
          </div>
        </section>
3

Hello! You are missing the name element, it is a different one form the type element.

Here’s an example of how to use it
https://www.w3schools.com/html/html_forms_attributes.asp

4

Got just just as you responded. Thank you. It was only reminding me of the first when I forgot all three. Thank you!

1 Like
5

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

3 Likes
6

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