Form fields on image - forms

Question

Refer to the below Measurement of limbs image.
where you can see rectangles and circles where measurement values should be entered. like left side rectangle shows height of leg etc. I want this rectangle as html form field. What I did is i know pathetic one like.
I put image in background of a div and in div put this
#txtDiv1 {
position: absolute;
left: 36px;
top: 10px;
width: 50px;
height: 32px;
z-index: 100;
}
<div id="txtDiv1"><input name="leglength" type="text" style="width:30px; height:20px; border:none" /></div>
So for all input fields I did the same. Can some body tell me how to make it more professional as i m not satisfy with this approach.

Answer 1

Expanding on my comment, you can use a similar layout discussed in this article: https://alistapart.com/article/prettyaccessibleforms
Most of it is simple HTML and CSS, the advantage is now you have more control than just assigning boxes to specific locations on the image. You will also notice more containers, this helps in identifying specific entries. Remember that all this data has to be captured later and stored somehow.
#form-1 .form-background {
background-image: url('https://i.stack.imgur.com/P2W8v.png');
background-repeat: no-repeat;
height: 400px;
}
#form-1 .form-background label {
display: block;
background: white;
text-align: center;
height: 30px;
}
#form-1 .right-leg {
background-position: 0 -10px;
display: inline-block;
width: 175px;
}
#form-1 .left-leg {
background-position: -200px -11px;
width: 180px;
float: right;
}
#form-1 ul {
padding: 0;
margin: 0;
list-style: none;
}
#form-1 ul .box {
background: white;
border: 1px solid black;
border-radius: 3px;
height: 25px;
width: 52px;
}
#form-1 ul .circle {
background: white;
border: 1px solid black;
border-radius: 50%;
height: 37px;
width: 37px;
}
#form-1 ul li.box.right {
margin-left: 120px;
}
#form-1 ul li.box.left {
margin-left: 2px;
}
#form-1 ul li.circle.right {
margin-left: 129px;
margin-bottom: 12px;
}
#form-1 ul li.circle.left {
margin-left: 10px;
margin-bottom: 12px;
}
#form-1 ul li input {
background: transparent;
border: 0;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form-1" class="form-wrapper">
<div class="form-background right-leg">
<label>Right Leg</label>
<ul>
<li class="box right" style="margin-top: 33px;"><input type="number" /></li>
<li class="circle right"><input type="text" /></li>
<li class="circle right" style="margin-bottom: -14px;"><input type="text" /></li>
<li class="box left"><input type="number" /></li>
<li class="box right" style="margin-top: 30px; margin-left: 116px;"><input type="number" /></li>
<li class="circle right" style="margin-left: 124px;"><input type="text" /></li>
<li class="box left" style="margin-top: -19px;"><input type="number" /></li>
</ul>
</div>
<div class="form-background left-leg">
<label>Left Leg</label>
<ul>
<li class="box left" style="margin-top: 32px; margin-left: 5px;"><input type="number" /></li>
<li class="circle left"><input type="text" /></li>
<li class="circle left" style="margin-bottom: -14px;"><input type="text" /></li>
<li class="box right"><input type="number" /></li>
<li class="box left" style="margin-top: 30px; margin-left: 5px;"><input type="number" /></li>
<li class="circle left"><input type="text" /></li>
<li class="box right" style="margin-top: -19px;"><input type="number" /></li>
</ul>
</div>
</div>
Since the image is not exact, there is lots of adjustments to be made. I used margins to push things around. Also, I am not familiar with each notation or possible value. You may consider that additional notes may want to be added for each measurement. You can use number type for each if you want.
This may seem like a lot of extra work upfront, yet can be very helpful if you add in additional functionality via JavaScript or jQuery. For example, the section of the leg could be highlighted when that measurement is being entered.

Answer 2

Some ideas:
1) Work with percentage instead of pixel. This could help you if you have a responsive view plan in future.
2) Better to add outline:none on each input and add border if you need to have more control with different browsers.
3) Better to have just the picture and draw the lines, arrows and circles(if you need them) with CSS. Again more control on responsive view and more maintainable app.