Tell us what’s happening:
Hello everyone,
I have the problem of seeing the message:
“You should have a fieldset or section element with the class .radio-group.” When trying to check my code.
In my code there is a element with the class=“radio-group” attribute.
I have several other problems within the code with the same situation that I apparently have something missing that is in the code. Does someone know the problem and could help me out? Thank youuu
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<title>Job Application Form</title>
</head>
<header>
<h1>Application Form</h2>
</header>
<body>
<div class="container">
<form>
<label for="name" name="name">Full Name: </label>
<input
id="name"
type="text"
minlength="3"
required
placeholder="i.e., John Doe"/>
<label for="email" name="email">E-Mail: </label>
<input
id="email"
type="email"
required
placeholder="mail@example.com"/>
<label for="position">Select Position: </label>
<select id="position">
<option>First</option>
<option selected>Second</option>
<option>Third</option>
</select>
</form>
<fieldset class="radio-group">
<legend>Select Availability</legend>
<input type="radio" id="part-time" name="availability"/>
<label for="part-time">Part Time</label>
<input type="radio" id="full-time" name="availability" checked/>
<label for="full-time" >Full Time</label>
<input type="radio" id="night-shifts" name="availability"/>
<label for="night-shifts">Night Shifts</label>
</fieldset>
<label for="message">Enter a message:</label>
<textarea id="message" minlength="5"></textarea>
<hr>
<button type="submit">Submit Application</button>
</div>
</body>
</html>
/* file: styles.css */
body {
background-color: whitesmoke;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: gray;
}
input:not([type="radio"]){
display: block;
width: 100%;
}
.container {
width: 60%;
max-width: 750px;
margin: 0 auto;
}
form {
margin: 0 0 30px 0;
background-color: gray;
color: whitesmoke;
padding: 20px;
}
input{
margin: 0 0 10px 0;
}
input:first-of-type{
border-radius: 5px;
}
input, textarea:focus {
border: solid midnightblue;
}
input:invalid, select:invalid, textarea:invalid {
border: solid red;
}
input:valid, select:valid, textarea:valid {
border: solid green;
}
button {
font-size: 1rem;
background-color: orange;
color: whitesmoke;
border-radius: 10px;
}
button:hover {
background-color: brown;
}
.radio-group{
margin: 0 0 20px 0;
background-color: gray;
color: white;
display: flex;
padding: 10px;
}
legend{
font-size: 1.5rem;
}
.radio-group input[type="radio"]:checked+label {
background-color: yellow;
box-shadow: 0px 0px 5px black;
color: Gray;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3.1 Safari/605.1.15
Challenge Information:
Build a Job Application Form - Build a Job Application Form