图像上的表单字段

Question

参考下面的肢体图像测量。

您可以在其中查看应输入测量值的矩形和圆圈。像左侧矩形显示腿的高度等我希望这个矩形作为html表单字段。我做的是我知道可怜的人。 我把图像放在div的背景中并在div中放入

#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>

因此，对于所有输入字段，我都做了同样的事情。有些人可以告诉我如何让它更专业，因为我不满足于这种方法。

Answer 1

一些想法：

1）使用百分比而不是像素。如果您将来有响应式视图计划，这可以帮助您。

2）如果您需要使用不同的浏览器进行更多控制，最好在每个输入上添加outline:none并添加边框。

3）最好只用图片并用CSS画出线条，箭头和圆圈（如果你需要它们）。再次控制响应式视图和更易维护的应用程序。

Answer 2

扩展我的评论，您可以使用本文中讨论的类似布局：https://alistapart.com/article/prettyaccessibleforms

其中大部分都是简单的HTML和CSS，现在的优势在于您可以拥有更多的控制权，而不仅仅是将框分配到图像上的特定位置。您还会注意到更多容器，这有助于识别特定条目。请记住，以后必须捕获所有这些数据并以某种方式存储。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

由于图像不准确，因此需要进行大量调整。我用边缘来推动事物。另外，我不熟悉每种符号或可能的价值。您可能会考虑为每次测量添加其他注释。如果需要，您可以为每个使用number类型。

这可能看起来像预先做了很多额外的工作，但如果你通过JavaScript或jQuery添加额外的功能，它会非常有用。例如，在输入测量值时，可以突出显示腿部的部分。