HTML 中单选按钮的错误验证

Question

我正在使用 W3 验证程序验证我的 HTML，当它检查我的页面时我收到验证错误：

The label element may contain at most one button, input, keygen, meter, output, progress, select, or textarea descendant. From line 136, column 33; to line 136, column 76 2 Ratin

我不完全确定哪里出了问题，因为据我所知，我只在标签中使用了一种输入类型。

这是我对该段的代码：

<label> Rating
  <br>

  <input type="radio" name="rating" value="1"> 1
  <br>
  <input type="radio" name="rating" value="2"> 2
  <br>
  <input type="radio" name="rating" value="3"> 3
  <br>
  <input type="radio" name="rating" value="4"> 4
  <br>
  <input type="radio" name="rating" value="5"> 5
  <br>
  <input type="radio" name="rating" value="6"> 6
  <br>
  <input type="radio" name="rating" value="7"> 7
  <br>
  <input type="radio" name="rating" value="8"> 8
  <br>
  <input type="radio" name="rating" value="9"> 9
  <br>
  <input type="radio" name="rating" value="10"> 10
  <br>

</label>

该网页确实可以正常工作，如果可能的话，我想修复验证。

如果需要，这是我整个页面的代码：

<!doctype html>
<html>

  <head>

    <meta charset="utf-8">
    <title>Contact</title>

    <link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/Slideshow.css">
    <link rel="stylesheet" type="text/css" href="css/page.css">

    <div class="container">

      <div class="row">

        <div class="col-md-12">

          <h1> Nathan Rivera </h1>

          <h1> Portfolio </h1>

        </div>

      </div>

    </div>


    <script>
      function checkforblank() {

        if (document.getElementById('name').value == "") {
          alert("Entry can't be empty");
          document.getElementById('name').style.borderColor = "red";
          return false;
        }

        if (document.getElementById('email').value == "") {
          alert("Entry can't be empty");
          document.getElementById('email').style.borderColor = "red";
          return false;
        }




        var radios = document.getElementsByName("rating");
        var formValid = false;

        var i = 0;
        while (!formValid && i < radios.length) {
          if (radios[i].checked) formValid = true; {
            i++;
          }
        }

        if (!formValid) {
          alert("Please Pick Rating");
          return formValid;
          document.getElementsByName("rating").style.borderColor = "red";
        }

      }

    </script>


  </head>

  <body>

    <div class="container">

      <div class="row" id="inner">

        <div class="col-lg-12 center">

          <ul class="nav nav-pills">

            <li><a href="index.html">Homepage</a></li>

            <li><a href="Portfolio.html">Portfolio</a></li>

            <li><a href="Projects.html">Projects</a></li>

            <li><a href="Contact.html">Contact</a></li>

            <li class="active"><a href="Survey.html">Survey</a></li>

          </ul>

        </div>

      </div>

      <div class="row">

        <div class="col-md-12">

          <form method="post" action "#" onSubmit="return checkforblank()">

            <fieldset>

              <label> Name:
                <br>

                <input type="text" id="name" name="name">

              </label>

              <br>
              <br>

              <label> Email:
                <br>

                <input type="text" id="email" name="email">

              </label>


              <br>
              <br>

              <label> Rating
                <br>

                <input type="radio" name="rating" value="1"> 1
                <br>
                <input type="radio" name="rating" value="2"> 2
                <br>
                <input type="radio" name="rating" value="3"> 3
                <br>
                <input type="radio" name="rating" value="4"> 4
                <br>
                <input type="radio" name="rating" value="5"> 5
                <br>
                <input type="radio" name="rating" value="6"> 6
                <br>
                <input type="radio" name="rating" value="7"> 7
                <br>
                <input type="radio" name="rating" value="8"> 8
                <br>
                <input type="radio" name="rating" value="9"> 9
                <br>
                <input type="radio" name="rating" value="10"> 10
                <br>

              </label>

              <br>
              <br>

              <div class="form-group">

                <label for="comments">Comments:</label>
                <textarea class="form-control" rows="5" id="comments"></textarea>

              </div>

            </fieldset>

          </form>

          <form action="javascript:alert('Thank You For Your Input')" method="get" onSubmit="return checkforblank()">

            <input type="submit" value="Submit">

          </form>

        </div>

      </div>

    </div>

    </div>


    <script src="Bootstrap/js/bootstrap.js"></script>
    <script src="Jquery/jquery-1.12.3.js"></script>
  </body>

</html>

Answer 1

你的代码错误太多。

首先，<head> 中有 <div> 和 <h1> 个元素。你不能那样做。

那么你的<label>里面有<br>个标签，这也是不允许的。

然后在你的表单调用中你有 action"#" 而它应该是 action="#"

最后还有一个额外的结尾</div>。

因此您的代码应如下所示：

<!doctype html>
<html>

  <head>

    <meta charset="utf-8">
    <title>Contact</title>

    <link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/Slideshow.css">
    <link rel="stylesheet" type="text/css" href="css/page.css">

    <script>
      function checkforblank() {

        if (document.getElementById('name').value == "") {
          alert("Entry can't be empty");
          document.getElementById('name').style.borderColor = "red";
          return false;
        }

        if (document.getElementById('email').value == "") {
          alert("Entry can't be empty");
          document.getElementById('email').style.borderColor = "red";
          return false;
        }




        var radios = document.getElementsByName("rating");
        var formValid = false;

        var i = 0;
        while (!formValid && i < radios.length) {
          if (radios[i].checked) formValid = true; {
            i++;
          }
        }

        if (!formValid) {
          alert("Please Pick Rating");
          return formValid;
          document.getElementsByName("rating").style.borderColor = "red";
        }

      }

    </script>


  </head>

  <body>
    <div class="container">

      <div class="row">

        <div class="col-md-12">

          <h1> Nathan Rivera </h1>

          <h1> Portfolio </h1>

        </div>

      </div>

    </div>
    <div class="container">

      <div class="row" id="inner">

        <div class="col-lg-12 center">

          <ul class="nav nav-pills">

            <li><a href="index.html">Homepage</a></li>

            <li><a href="Portfolio.html">Portfolio</a></li>

            <li><a href="Projects.html">Projects</a></li>

            <li><a href="Contact.html">Contact</a></li>

            <li class="active"><a href="Survey.html">Survey</a></li>

          </ul>

        </div>

      </div>

      <div class="row">

        <div class="col-md-12">

          <form method="post" action="#" onSubmit="return checkforblank()">

            <fieldset>

              <label for="name"> Name: </label>
              <input type="text" id="name" name="name">
              <br>
              <br>

              <label for="email"> Email: </label>
              <input type="text" id="email" name="email">
              <br>
              <br>

              <label> Rating </label> <br>

              <input type="radio" name="rating" value="1"> 1
              <br>
              <input type="radio" name="rating" value="2"> 2
              <br>
              <input type="radio" name="rating" value="3"> 3
              <br>
              <input type="radio" name="rating" value="4"> 4
              <br>
              <input type="radio" name="rating" value="5"> 5
              <br>
              <input type="radio" name="rating" value="6"> 6
              <br>
              <input type="radio" name="rating" value="7"> 7
              <br>
              <input type="radio" name="rating" value="8"> 8
              <br>
              <input type="radio" name="rating" value="9"> 9
              <br>
              <input type="radio" name="rating" value="10"> 10
              <br>
              <br>

              <div class="form-group">

                <label for="comments">Comments:</label>
                <textarea class="form-control" rows="5" id="comments"></textarea>

              </div>

            </fieldset>

          </form>

          <form action="javascript:alert('Thank You For Your Input')" method="get" onSubmit="return checkforblank()">

            <input type="submit" value="Submit">

          </form>

        </div>

      </div>

    </div>


    <script src="Bootstrap/js/bootstrap.js"></script>
    <script src="Jquery/jquery-1.12.3.js"></script>
  </body>

</html>

如果您在验证器中检查它，您会发现没有错误。

并且，以后请在此处发布问题之前仔细检查您的代码。

Answer 2

标签用于一个输入，您正在使用 10 个输入中的一个。
这是一个很好的例子，说明你如何实现你的目标：

<fieldset>
  <legend> Rating </legend>
   <label> <input type="radio" value="1" name="rating"> 1 </label>
   <label> <input type="radio" value="2" name="rating"> 2 </label>
   <!-- etc -->
 </fieldset>

改编自此post。
有关工作 fieldsets 的更多数据，请查看 this article

HTML 中单选按钮的错误验证

Error validation for a radio button in HTML

html

validation

label