Learn Accessibility by Building a Quiz - Step 41

HTML-CSS
1

Tell us what’s happening:

Your code so far

    freeCodeCamp<br />
    San Francisco<br />
    California<br />
    USA
    <a href="https://freecodecamp.org"></a>FreeCodeCamp</a>

User Agent is: Mozilla/5.0 (Windows NT 6.1; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge: Learn Accessibility by Building a Quiz - Step 41

Link to the challenge:

2

Not sure what the code you pasted above has to do with step 41? The only thing you should do in step 41 is add a submit button with the text Send. You should as this as the very last element in the form.

3

I put “Send” right above the closing “” (the line the program gave me), the button showed up where it was supposed to and I still get a fail. It’s clearly within the form element. The fail message says" You should place the submit button within the form element."… I wish there was a way to speak with someone about these things.

4

You’ll need to show us all of your HTML so we can see exactly what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

That’s what this forum is for, to speak with people about the issues you are having.

1 Like
5 
<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>
        <submit><button>Send</button></submit>
      </form>
6

That’s what this forum is for, to speak with people about the issues you are having.
[/quote]

By speak, I meant vocally. But I understand that’s not a possibility.

Thank you for offering to help!!

7

Ahh, I see your issue. There is no such element as submit. So you just want to use the button element here and then set its type to “submit” using the type attribute.

8

Oh wow! lol! It’s all coming back to me now. I really appreciate your help!!

1 Like
9

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