当我检查我的网页时，我正在使用W3验证程序验证我的HTML验证过程中出现验证错误：
标签元素最多可包含一个按钮，输入，keygen， 仪表，输出，进度，选择或textarea后代。从行 136，第33栏;到第136行，第76栏 2拉廷
我不完全确定出了什么问题，因为据我所知，我只在标签中使用了一种输入类型。
以下是该细分受众群的代码：
<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>
答案 0 :(得分：1)
您的代码中有太多错误。
首先，<div>中有<h1>和<head>个元素。你不能这样做。
然后<br>中有<label>个标签，这也是不允许的。
然后在您的表单通话中，您应该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>
如果你在验证器中检查它，你会发现没有错误。
此外，请在此处发布问题之前仔细检查您的代码。
答案 1 :(得分：0)
标签适用于一个输入，您使用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