Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Input type submit - Learn Accessibility by Building a Quiz - Step 40

See original GitHub issue

Describe the Issue

<input type="submit"> already displayed a button with Submit text. However, the hint says that The submit should display the text Submit.

I eventually figure out the correct answer by adding value="Submit" but is it necessary?

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-40

Your code

<!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">
        <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" name="student-name" id="student-name" />
          </div>
          <div class="info">
            <label for="student-email">Email:</label>
            <input type="email" name="student-email" id="student-email" />
          </div>
          <div class="info">
            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
            <input type="date" name="birth-date" id="birth-date" />
          </div>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
          <div class="question-block">
            <p>1</p>
            <fieldset class="question" name="html-question-one">
              <legend>
                The legend element represents a caption for the content of its
                parent fieldset element
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="q1-a1">
                    <input type="radio" id="q1-a1" name="q1" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" name="q1" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
          <div class="question-block">
            <p>2</p>
            <fieldset class="question" name="html-question-two">
              <legend>
                A label element nesting an input element is required to have a
                for attribute with the same value as the input's id
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="q2-a1">
                    <input type="radio" id="q2-a1" name="q2" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" id="q2-a2" name="q2" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
          <div class="formrow">
            <div class="question-block">
              <label for="customer">Are you a frontend developer?</label>
            </div>
            <div class="answer">
              <select name="customer" id="customer" required>
                <option value="">Select an option</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
            </div>
            <div class="question-block">
              <label for="css-questions">Do you have any questions:</label>
            </div>
            <div class="answer">
              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
            </div>
          </div>
        </section>
        <input type="submit">
      </form>
    </main>
  </body>
</html>

Expected behavior

The hints should give better explanation as why the value submit is needed or proper hints that the value=“submit” is needed or if writing <input type="submit"> provides enough accessibility then it should be accepted.

Screenshots

No response

System

Device: PC
OS: Windows 10
Browser: Brave
Version: v1.43.89

Additional context

No response

Issue Analytics

State:
Created a year ago
Comments:11 (6 by maintainers)

Top GitHub Comments

1reaction

ShaunSHamiltoncommented, Oct 19, 2022

@Abhay5855 An issue with the https://github.com/freeCodeCamp/freeCodeCamp/labels/help wanted or https://github.com/freeCodeCamp/freeCodeCamp/labels/first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors.

If you would like to contribute, and have not read the contributors docs, please do so here: https://contribute.freecodecamp.org/#/

If you have any issues with contributing, be sure to join us on the contributors channel, or on the contributors sub-forum

1reaction

ojeytonwilliamscommented, Sep 5, 2022

Nope, you’ve done everything we’d want, thanks. Concise and clear issues are always helpful.

We typically discuss things a little (I’ll add the discussing label to reflect that) before deciding on precisely how the issue should be addressed. Once that’s done, the issue will be opened up for contribution and automatically closed when the PR that fixes them is merged.

Top Results From Across the Web

Learn Accessibility by Building a Quiz - Step 40 - HTML-CSS

elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent ......

[accessibility-quiz]: experience and suggestions · Issue #47554

... starting from the Learn Accessibility by Building a Quiz 1 class, ... with HTML and CSS, I had no idea what this...

Step 1 | Learn Accessibility by Building a Quiz | PLAYCODE

Start this accessibility journey by providing a lang attribute to your html element. This will assist screen readers in identifying the language of...

<input type="submit"> - HTML: HyperText Markup Language

Using submit buttons. <input type="submit"> buttons are used to submit forms. If you want to create a custom button and then ...

HTML Input Attributes - W3Schools

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP,...