html - 带有 for 标签的标签位于预期元素之外

Question

我有一个表单，上面有一些基本的输入控件。每个都有一个带有跨度的标签，用于在验证时显示错误消息。

问题是，出于某种原因，我似乎无法弄清楚当我单击提交按钮时标签显示的表单有错误，但它显示在表单底部的提交按钮旁边而不是内部错误所在的元素输入控件。

当我检查页面时，标签位于表单的正确 dom 中，但定位不正确，即使我使用的是绝对位置。

表单代码

<section>
  <div class="block color-scheme-1">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-8 col-md-offset-2  col-md-offset-2">
          <div class="section-sub-title center">
            <article class="section-title-body white">
              <h1 class="head-title"><span>Adress</span> Information</h1>
            </article>
          </div>
          <div class="text-center white">
            <h4 class="widget-title">Mosaic Design Studio <br><br>Avanue street 255, NA</h4>

          </div>
          <div class="text-center white">
            <p>(10 808) 321-1785-952
              <br>(10 808) 321-1785-953
            </p>
            <p>mosaic-design@domain.com
              <br>support@yoursite.com
            </p>
            <br>
            <br>
          </div>
          <div class="section-sub-title center">
            <article class="section-title-body white">
              <h1 class="head-title"><span>Send</span> Massage</h1>
            </article>
          </div>
          <div id="form-wrapper">
            <div id="form-inner">
              <div id="ErrResults">
                <!-- Error Here -->
              </div>
              <div id="MainResult">
                <!-- Response Here -->
              </div>
              <div id="MainContent">
                <form id="MyContactForm" name="MyContactForm" method="post">
                  <p class="name">
                    <input type="text" name="name" id="name" placeholder="Your Name">
                    <label for="name" id="nameLb"><span class="error">*Name Field Required</span>
                    </label>
                  </p>
                  <p>
                    <input type="email" name="email" id="email" placeholder="Your Email">
                    <label for="email" id="emailLb">
                      <span class="error error1">*Email Field Required</span> 
                      <span class="error error2">*Email Not Valid</span>
                    </label>
                  </p>
                  <p>
                    <input type="text" name="phone" id="phone" placeholder="Your Telephone">
                    <label for="phone" id="phoneLb"><span class="error">*Telephone Field Required</span>
                    </label>
                  </p>
                  <p class="textarea">
                    <textarea name="message" id="message" placeholder="Your Message" rows="4"></textarea>
                    <label for="message" id="messageLb"><span class="error">*Message Field Required</span>
                    </label>
                  </p>
                  <div class="clearfix"></div>
                  <div class="text-center">
                    <a href="#" class="contact-btn">Send Message</a> 
                  </div>

                </form>
              </div>
              <!--MainContent-->
            </div>
            <!--form-inner-->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

#form-wrapper #MyContactForm .error {
  bottom: 30px;
  color: #FF2255;
  font-family: inherit;
  font-size: 12px;
  font-weight: normal;
  left: auto;
  letter-spacing: 0;
  position: absolute;
  right: 20px;
  text-transform: capitalize;
  width: auto;
}

Answer 1

从 .error 中删除 position: absolute

Demo

您已经为您的错误设置了绝对位置，但没有为它们的容器设置相对位置。因此，它们的位置与您页面上更靠前的内容有关。

更新:要在输入中定位错误，您需要将 position:relative 添加到 p 标记。您可能应该为您希望定位的那些 p 标签分配一个类，这样它就不会与页面上其他地方的 p 标签发生冲突，如果有的话。

示例:

p {
   position: relative;
}

然后在 .error 上使用绝对定位，和一些定位坐标，像这样:

.error {
  position: absolute;
  top: 5px;
  left: 3px;
}

您会注意到您的错误出现在输入框中，并与输入占位符发生冲突。您可能需要一个脚本来在显示错误时隐藏占位符。

Updated demo

注意:我不确定在输入框中放置错误消息是否符合标准。将它显示在旁边会容易得多吗？