Learn Accessibility by Building a Quiz - Step 21

HTML-CSS
1

What does it mean by you should give the input the appropriate name attribute?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a href="#student-info">INFO</a></li>
          <li><a href="#html-questions">HTML</a></li>
          <li><a href="#css-questions">CSS</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">

<!-- User Editable Region -->

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

<!-- User Editable Region -->

        <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>


/* file: styles.css */
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
}

h1,
h2 {
  font-family: Verdana, Tahoma;
}

h2 {
  border-bottom: 4px solid #dfdfe2;
}

Your browser information:

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

Challenge: Learn Accessibility by Building a Quiz - Step 21

Link to the challenge:

2

It means that you get to choose the value you want to use for the name attribute. In other words, there is no correct answer, just as long as you give each one a name attribute with a value.

The same goes for the placeholder attribute.

1 Like
3

best practices means using naming rules.

but it doesn’t go into depth since it can be confusing at first.

for now, just think of it as just a way to name things to make it easier for others to understand your code.

for example,
for an input that takes emails: you might name it ‘email’
if its for first name or last name: you could name it ‘name’ ‘first-name’ or ‘last-name’

all are correct. since they are easy for someone to understand, and when you start on bigger projects, you might forget what part of your code does if given strange names.

theres a great vid on youtube by codemonkey that goes over naming rules and cases

4

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