Assessment wanted for my HTML5 controls 1 and 2 Skill test

MDN Learn
1

Hello. Here is the link to the Assessment task: https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_HTML5_controls .

Here’s a a link to my finished work for HTML5 Controls 1 and 2 Skill test

Thank you

2

Hey @tuhamworld,

Great work on continuing your learning journey. :tada: The only comment I have on the first exercise is that:

  1. You probably do not need to paragraph elements you use for each input and label group.
  2. If you did want to use paragraph elements, you would need to place them inside the list items, or else it would not be valid HTML.

I would probably just mark it up as follows:

<li>
  <label for="e-mail">Email:</label>
  <input type="email" id="e-mail" name="email" />
</li>

Again, if you wanted to use paragraph element, you would do that as follows:

<li>
  <p>
    <label for="e-mail">Email:</label>
    <input type="email" id="e-mail" name="email" />
  </p>
</li>

–
Schalk
Staff Community Manager - MDN Web Docs

3 Likes
3

Well done on the second one as well. :1st_place_medal:

My only comment is that I would probably have marked this one up in one of the following two ways depending on what you styling needs would be:

<div class="wrapper">
  <h2>HTML5 controls: Task 2</h2>
  <form>
    <div class="input-group">
      <label for="max-invite">Select maximum number of invitations</label>
      <input type="range" id="max-invite" min="1" max="30" value="10" />
    </div>
    <output class="invite-output" for="price"></output>
    <button type="submit">Submit</button>
  </form>
</div>

<div class="wrapper">
  <h2>HTML5 controls: Task 2</h2>
  <form>
    <ul>
      <li>
        <label for="max-invite">Select maximum number of invitations</label>
        <input type="range" id="max-invite" min="1" max="30" value="10" />
        <output class="invite-output" for="price"></output>
      </li>
    </ul>

    <button type="submit">Submit</button>
  </form>
</div>

You are doing great! Keep going on your learning journey.

–
Schalk
Staff Community Manager - MDN Web Docs

3 Likes
4

Thank you for this.
I initially did not want to add a paragraph but thought the elements were too close and <li> is not enough.

I have removed all the <p> tags from it and I guess everything’s fine now :slight_smile:

1 Like
5

From your reply, seems the two mistakes I made was adding <li> tag to the Submit button and also using the <h2> tag inside the form instead of outside the form.

I have made those corrections and thank you so much!

6

I would not say using the h2 inside the form element is wrong, but in this case, it might make for an improved document structure if you have it outside the form. Wither ay, good work, @tuhamworld :1st_place_medal:

1 Like
7

Thank you for the clarification.
Thought it was a semantic error, now I understand it is for improved document structure. :slight_smile: