Assessment wanted for Basic controls 1, 2 & 3 skill test

MDN Learn
1

Hello,
Trust you are doing great? :slight_smile:

I have studied and implemented the Assessment exercise for Basic Controls Skill Test on MDN Web Docs: Basic Controls Skill Test 1, 2 and 3.

I would like to have my code assessed for the exercise below;
Basic Controls Skill Test 1, 2 & 3

Thank you :slight_smile:

2

Hey there @tuhamworld!

Great work! :1st_place_medal: I will post a reply for each assessment. The first one is well done. I have one question for you, is there a specific reason you wrapped the copy for the label inside a span element? Nothing wrong with it, just curious.

Then, because you are using the for attribute you do not technically need to wrap the input with the label element. Again, nothing wrong with what you have done, in fact, always using the for attribute on the label element is better for accessibility. Just as an alternative approach you could also write that as follows:

<label for="user_id">User ID:</label>
<input type="text" id="user_id" name="username" />

–
Schalk
Staff Community Manager - MDN Web Docs

3 Likes
3

Great work on the second one. :1st_place_medal:

There is a small typo in your first input element:

<input type="checkbox" id="vegan" name="Hotdog" valye="Vegan">

<input type="checkbox" id="vegan" name="Hotdog" value="Vegan" />

I also notice that on the last CSS style block you are missing a closing brace.

–
Schalk
Staff Community Manager - MDN Web Docs

3 Likes
4

Again, well done! The only thing missing from this task is the ability to select multiple files. If you are uncertain how to accomplish this, have a look at the additional attribute here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes

Thank you for being part of the MDN Web Docs learning community!

–
Schalk
Staff Community Manager - MDN Web Docs

2 Likes
5

Thank you for the comments.

There’s no reason for wrapping the copy for label inside the span element. I discovered that method in one of the MDN docs and thought its how it should be done. I just discovered now that it did not really add any effect to it - hence I have removed it.

As for wrapping the input inside the label, I didn’t know that is optional too. I will move the input tag to outside of the label tag

6

Thank you for pointing those out :grinning:
I have made the necessary corrections

7

Oh, I must have forgot about that :slight_smile:

I have add the ability to select multiple files to it.

Once again, thank you so much @schalkneethling.

Your feedback are very helpful

8

One instance where this is commonly done is if you want to hide the text visually but still make it available to screen readers. Something like this:

<button type="button" class="icon-button">
  <span class="visually-hidden">Close dialog</span>
</button>

The CSS for the visually-hidden class would look like this:

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
2 Likes
9

Great work, @tuhamworld :1st_place_medal:

1 Like
10

Okay.
Then it implies, it is optional.

Thank you :slight_smile: