Search code examples
javascripthtmlcssweb-deployment

Arranging input fields on an image in CSS

I am trying to arrange some input fields on top of an image, so that data may be entered as if it were input directly into the image.

enter image description here I currently have a set of input fields (as shown above) and three images with various squares on them. I have to somehow arrange the input fields so that they are inside the squares. I have attached my corresponding HTML / CSS below. This is my first web development project, so any help/suggestions would be highly appreciated.

.allapottab {
  display: none;
  text-align: right;
  height: 850px;
}

.festekoptions {
  width: 20px;
}
<div style="text-align: center;" class="allapottab">Külsõ állapota:
  <br>
  <img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
  <img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
  <img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
  <br>
  <input class="festekoptions" type="number" name="festek1" id="festek1" required>
  <input class="festekoptions" type="number" name="festek2" id="festek2" required>
  <input class="festekoptions" type="number" name="festek3" id="festek3" required>
  <input class="festekoptions" type="number" name="festek4" id="festek4" required>
  <input class="festekoptions" type="number" name="festek5" id="festek5" required>
  <input class="festekoptions" type="number" name="festek6" id="festek6" required>
  <input class="festekoptions" type="number" name="festek7" id="festek7" required>
  <input class="festekoptions" type="number" name="festek8" id="festek8" required>
  <input class="festekoptions" type="number" name="festek9" id="festek9" required>
  <input class="festekoptions" type="number" name="festek10" id="festek10" required>
  <input class="festekoptions" type="number" name="festek11" id="festek11" required>
  <input class="festekoptions" type="number" name="festek12" id="festek12" required>
  <input class="festekoptions" type="number" name="festek13" id="festek13" required>
  <input class="festekoptions" type="number" name="festek14" id="festek14" required>
  <input class="festekoptions" type="number" name="festek15" id="festek15" required>
  <input class="festekoptions" type="number" name="festek16" id="festek16" required>
  <input class="festekoptions" type="number" name="festek17" id="festek17" required>
  <input class="festekoptions" type="number" name="festek18" id="festek18" required>
  <input class="festekoptions" type="number" name="festek19" id="festek19" required>
  <input class="festekoptions" type="number" name="festek20" id="festek20" required>
  <input class="festekoptions" type="number" name="festek21" id="festek21" required>
  <input class="festekoptions" type="number" name="festek22" id="festek22" required>
  <input class="festekoptions" type="number" name="festek23" id="festek23" required>
  <input class="festekoptions" type="number" name="festek24" id="festek24" required>
  <input class="festekoptions" type="number" name="festek25" id="festek25" required>
  <input class="festekoptions" type="number" name="festek26" id="festek26" required>
  <input class="festekoptions" type="number" name="festek27" id="festek27" required>
  <input class="festekoptions" type="number" name="festek28" id="festek28" required>
  <input class="festekoptions" type="number" name="festek29" id="festek29" required>
  <input class="festekoptions" type="number" name="festek30" id="festek30" required>
  <br>
  <label for="seruleselony"><b>Sérülések/Előnyök:</b></label>
  <input type="text" placeholder="Sérülések / Előnyök" name="seruleselony" id="seruleselony" required><br>
</div>

Solution

  • Your approach is not ideal because, in essence, cannot provide a decent UI/UX experience on every possible device.

    One major improvement you could make would be to decouple the input boxes rendering from the car image. The car image should just draw the car, without any box. Ideally it should be an svg, to make sure it renders at the same quality on both large and small screens.

    Then, you decide which are the anchor points of each input and store their positions. Now, because they are points, you are able to decouple the rendering process of each point from the image, based on current device type:

    • on a large screen you might decide to render an input box at each of the points, positioned absolute, relative to the point position; this approach allows you to align the input box differently on each point (left, center, right, top, bottom, middle), based on the point's position in the picture and maybe based on its position in the current viewport/page.
    • on a small screen you might want to only render a circular button which opens a modal where the user inputs data and maybe also have a table under the image showing all the data, if the boxes would be too big to be displayed over the image at the same time.

    The above should give you enough to go on and implement a better UI/UX solution. However, if you do follow this path, the current question would becomes too broad be answered on StackOverflow, so you have to divide it into smaller questions, focused on each particular blocker you have

    Possible smaller questions:

    • how do I create an svg with a set of positions relative to its width/height
    • how do I position an element at fixed point, based on its parent's width/height,
    • etc...

    Most of these questions have already been answered in one form or another and you are required to research every one of them and only ask when you can't find a helpful answer to your specific current problem.