告诉我们发生了什么:
请帮帮我,我反复观看别人的代码,修改了很多次,但它始终无法通过。我仍然无法察觉我代码的错误之处。明明看上去代码都是正确的,没有未闭合标签,但就是无法通过测验。甚至我摘选了示例项目的代码挪动到我的编辑器中,并尽可能保证和示例项目的代码段样式一致,但它仍然无法通过测验,我都要崩溃了。我也尝试过使用别人通过的代码,我尽量将自己的元素和属性保持一致,和别人代码保持高度相似,但仍然无法通过。反而别人的代码粘贴上就立刻通过。
下面是报错的控制台,我知道第18项目任务我无法完成,无法通过测验能理解。但其他项目无法理解为什么无法通过测验:
6. You should have a fieldset or section element with the class .radio-group.
7. Inside .radio-group you should have a group of input elements with the type radio for selecting availability options. The group name should be availability.
8. You should have a textarea element with the id message for entering a message.
10. You should have a button element with the type submit for submitting the form.
18. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
// 测试完成
到目前为止你的代码
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Application Form</title>
<link rel="stylessheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Job Application Form</h1>
<form>
<label for="name">Full name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required/>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required/>
<label for="position">Position:</label>
<select id="position" required="">
<option value="">Select a position</option>
<option value="developer">Developer</option>
<option value="manager">Manager</option>
<option value="designer">Designer</option>
</select>
</form>
<fieldset class="radio-group">
<legend>Availability:</legend>
<label for="full-time" class="radio-label" >Full-Time<input type="radio" id="full-time" name="availability" class="radio-group-btn" checked=""/></label>
<label for="part-time" class="radio-label">Part-Time<input type="radio" id="part-time" name="availability" class="radio-group-btn"/></label>
</fieldset>
<label for="message">Why do you want this job?</label>
<textarea id="message" name="message" rows="5" placeholder="Write your motivation" required=""></textarea>
<button type="submit" class="submit-btn">Submit</button>
<button type="reset" class="reset-btn">Reset</button>
</div>
</body>
</html>
/* file: styles.css */
body{
font-family:Arial, sans-serif;
}
.container{
color:black;
background:rgba(255,255,200,0.5);
width:70%;
max-width:600px;
margin:20px auto;
padding:10px 30px;
box-shadow:0 3px 5px gray;
border-radius:10px;
}
h1{
text-align:center;
font-size:1.7rem;
color:brown;
}
label:not(.radio-group .radio-label){
display:block;
}
select{
background-color:whitesmoke;
}
fieldset legend,label:not(.radio-label){
font-weight:600;
font-size:0.8rem;
}
.radio-group{
border-radius:5px;
border:1px solid brown;
margin-bottom:px;
}
input:not(.radio-group-btn),textarea,select{
width:100%;
margin-bottom:15px;
padding:10px;
border-radius:5px;
box-sizing:border-box;
}
input:first-of-type{
background-color:yellow;
}
input:focus,textarea:focus{
border:1px solid brown;
outline:none;
}
input:invalid,select:invalid,textarea:invalid{
border:1px solid red;
}
input:valid,select:valid,textarea:valid{
border:1px solid green;
}
button{
border:none;
border-radius:5px;
color:whitesmoke;
width:100%;
margin-bottom:8px;
padding:5px;
font-size:1.1rem;
}
.submit-btn{
background-color:brown;
}
.reset-btn{
background-color:grey;
}
button:hover{
background-color:black;
}
.radio-group input[type="radio"]:checked{
appearance: none;
border-color: brown;
background-color: brown;
box-shadow: inset 0 0 0 2px white;
margin-top: 16px;
border-radius: 50%;
height: 14px;
width: 14px;
}
你的浏览器信息:
用户代理是: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0
挑战信息:
Build a Job Application Form - Build a Job Application Form