Should or should not? "name" attribute used as interactive design identifiers

Question

I tried a course for JS that made a Hover Gallery project. 5 thumbnails were shown in a line and whichever you hovered, was displayed in a bigger size under them.

Now, the code didn't contain any JS in it, only HTML and CSS. Here it is:

<div class="slider">
  <img class="arrow" onclick="sliderBackward()" src="img/left-arrow.png">              // later added
  <img onmouseover="preview.src=img1.src" name="img1" class="thumbnail" src="img/1.jpg" alt="1">
  <img onmouseover="preview.src=img2.src" name="img2" class="thumbnail" src="img/2.jpg" alt="2">
  <img onmouseover="preview.src=img3.src" name="img3" class="thumbnail" src="img/3.jpg" alt="3">
  <img onmouseover="preview.src=img4.src" name="img4" class="thumbnail" src="img/4.jpg" alt="4">
  <img onmouseover="preview.src=img5.src" name="img5" class="thumbnail" src="img/5.jpg" alt="5">
  <img class="arrow" onclick="sliderForward()" src="img/right-arrow.png">              // later added
</div>
<div class="preview">
  <img name="preview" src="img/1.jpg">
</div>

My question: Is using the name attribute this way alright? I think that this mini project is a good example to show features but not one, that should be put in practise in bigger projects. Is that right?

Goal: I wanted to show the further added thumbnails when I click on an arrow button and hide the other end of the list. (It would always show 5). For this I'm thinking if I should just delete the name attributes and approach it only through JS.

Answer 1

I think its better practice to use id rather than name to create unique identifiers. Name is often used in forms (I believe that's really what its for) and you could have multiple inputs with the same name. ID on the other hand is a very handy way to identify/select elements within the dom and should be unique.

That being said, there is nothing against you using name in this manner, its just not what its for.