Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.
No puedo alinear los label con los inputs c radio y checkbox y no sé bien porque´me sucede.
gracias!
Tu código hasta el momento
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FreeCodeCamp survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">Registration Form</h1>
<p id="descriptions">Thank you for taking the time to help us improve the platform</p>
<form id="survey-form">
<fieldset class="name">
<label id="name-label">Name</label><input id="name" type="text" placeholder="Enter your name"></input>
<label id="mail-label">Email</label><input id="name" type="email" placeholder="Enter your email"></input>
<label id="number-label">Age (optional)</label><input id="number" type="number" min="12" max="120" placeholder="Age"></input>
<label>
Which option best describes your current role?<label>
<select id="dropdown" >
<option value="">(Select current role)</option>
<option value="1">Student</option>
<option value="2">Full Time Job</option>
<option value="3">Full Time Learner</option>
<option value="4">Other</option>
</select>
</fieldset>
<fieldset>
<p>Would you recommend freeCodeCamp to a friend?</p>
<label for="definitely">
<input type="radio" id="definitely" name="recommend" class="inline" />Definitely </label>
<label for="maybe"><input type="radio" id="maybe" name="recommend" class="inline"/>Maybe</label>
<label for="not sure"><input type="radio" id="not sure" name="recommend" class="inline" />Not sure</input>
</fieldset>
<fieldset>
<p>What would you like to see improved? (Check all that apply)
</p>
<label for="front"> Front-end Projects <input type="checkbox" name="front-end" class="inline" id="front"></label>
<label for="back">Back-end Projects<input type="checkbox" name="back-end"class="inline" id="back"></label>
<label for="challenge">Challenges<input type="checkbox" name="challenges" class="inline" id="cgallenges"></label>
<label for="additional">Additional Courses<input type="checkbox" name="additional courses" class="inline" id="additional"></label>
</fieldset>
<fieldset>
<p>Any comments or suggestions?
<input type="textarea" class="text"/>
</p>
<input type="submit" id="submit">
</fieldset>
</form>
</body>
</html>
/* file: styles.css */
body{
background-color: darkcyan;
width: 100%;
height: 100vh;
margin: 0;
}
form{
width: 75vw;
margin: 2em auto;
background-color: cadetblue;
border: 2px solid teal;
padding: 2em;
padding-bottom: 1em;
max-width: 500px;
min-width: 300px;
}
h1 {
text-align: center
}
#descriptions {
text-align: center;
}
h1{
color: ivory;
padding-top: 1.5em;
}
input[type="submit"]{
width:60%;
height: 2em;
background-color: peachpuff;
margin: 1em 4.5em ;
border-color: white;
font-size: 17;
border: 2px solid teal
}
fieldset{
border: none;
border-bottom: 2px solid peachpuff;
padding: 2rem 0;
}
input, select, textarea{
width: 100%;
margin: 10px 0 0 0;
}
.text{
height: 4em;
margin: 8px auto;
}
fieldset:last-of-type{
border-bottom: none;
}
label {
display: block;
}
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
Challenge: Encuesta - Crea un formulario de encuesta
Enlaza al desafío: