Describe your issue in detail here.
<!-- file: index.html -->
<!DOCTYPE html>
<head>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<body>
<div >
<h1 id="title"> Survey Form</h1>
<p id="description">Created by Abhinav</p>
<form id="survey-form"> <fieldset>
<label id="name-label" for="Name">Your Name <input placeholder="Type Your Name"id="name" type="text" required></label>
<label id="email-label"for="Email">Email<input placeholder="Type Your Email"id="email" type="email" required></label>
<label id="number-label" for="age">Age<input placeholder="Enter Your Age"type="number"id="number" min="13" max="25" required
><label for="role">what level of student are you right now?<select id="dropdown">
<option>Graduate</option>
<option>Undergraduate</option>
<option>HighSchool</option>
</select>
</label>
</fieldset>
<fieldset>
Would you Recommend Csudh?
<div class="radio-option">
<label>
<input name="recommendation" value="1" id="recommend" type="radio" class="inline">
Likely
</label>
</div>
<div class="radio-option">
<label>
<input name="recommendation" value="2" id="recommend" type="radio" class="inline">
Not Likely
</label>
</div>
<div class="radio-option">
<label>
<input name="recommendation" value="3" id="recommend" type="radio" class="inline">
Very Likely
</label>
</div>
</fieldset>
<fieldset><label>Things csudh can improve
<input class="ab" type="checkbox">Facuilty
<input class="ab" type="checkbox">Ifrastructure
<input class="ab" type="checkbox">Safety
<input class="ab"type="checkbox">Extracuriccular
<input class="ab" type="checkbox">other</label></div>
</fieldset>
<fieldset>Anything else you want to add<textarea>Write here</textarea>
/* file: styles.css */
body{
background-image:url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.paintzen.com%2Fblog%2F6-paint-colors-for-video-conference-background&psig=AOvVaw0Xa_CGpLwPPswstRQoT8f9&ust=1710818700966000&source=images&cd=vfe&opi=89978449&ved=0CBMQjRxqFwoTCLCQ3rnu_IQDFQAAAAAdAAAAABAE);
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;;
}
h1{
text-align:center ;
color:white;;
}
p{
text-align:center;
font-family:sans-serif;
}
label{
display:block;
margin:0.5rem;
}
input{
width:500;
Height:20
}
form{
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
;
}
.inline{
width: unset;
margin: 0 0.5em 0 1;
vertical-align: middle;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Survey Form - Build a Survey Form
Learn to Code — For Free
system
March 18, 2024, 7:34am
2
You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
You head opening tag is in wrong order, it should be after html opening tag. And also you didn’t have head closing tag before your body opening tag.
For more assistance we need details of your issue, in your own words. Please describe your issue in detail here
Please do not create more than one topic for the same challenge/project. If you still have questions about this project then ask them here
Thanks
“The issue is that my checkboxes and radio buttons are not aligning with the text”
You made the input elements 500 wide so they are forcing the text down to the next line.
Instead of wrapping all the elements inside a single label element give them each their own label element and use that as the container. If you set it to be a flexbox container you can use align-items to vertically center.
You need to remove the fixed width on the input elements as well.
Don’t target all input elements and give them the same style, that is very unlikely to be what you want. Give them or their container classes so you can target them more precisely.
understood,ill try this and give an update.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Survey Form</title>
</head>
<body>
<div>
<h1 id="title">Survey Form</h1>
<p id="description">Created by Abhinav</p>
<form id="survey-form">
<fieldset>
<label id="name-label" for="name">Your Name</label>
<input placeholder="Type Your Name" id="name" type="text" required>
<label id="email-label" for="email">Email</label>
<input placeholder="Type Your Email" id="email" type="email" required>
<label id="number-label" for="age">Age</label>
<input placeholder="Enter Your Age" type="number" id="number" min="13" max="25" required>
<label for="role">What level of student are you right now?</label>
<select id="dropdown">
<option>Graduate</option>
<option>Undergraduate</option>
<option>High School</option>
</select>
</fieldset>
<fieldset>
<legend>Would you Recommend CSUDH?</legend>
<div class="radio-option">
<label>
<input name="recommendation" value="1" type="radio">
Likely
</label>
</div>
<div class="radio-option">
<label>
<input name="recommendation" value="2" type="radio">
Not Likely
</label>
</div>
<div class="radio-option">
<label>
<input name="recommendation" value="3" type="radio">
Very Likely
</label>
</div>
</fieldset>
<fieldset>
<legend>Things CSUDH can improve</legend>
<label>
<input class="ab" type="checkbox" value="Faculty">
Faculty
</label>
<label>
<input class="ab" type="checkbox" value="Infrastructure">
Infrastructure
</label>
<label>
<input class="ab" type="checkbox" value="Safety">
Safety
</label>
<label>
<input class="ab" type="checkbox" value="Extracurricular">
Extracurricular
</label>
<label>
<input class="ab" type="checkbox" value="Other">
Other
</label>
</fieldset>
<fieldset>
<legend>Anything else you want to add</legend>
<textarea id="comments" placeholder="Write here"></textarea>
</fieldset>
<input id="submit" type="submit" value="Submit">
</form>
</div>
</body>
</html>
{
background-image:url(data:image/png;base64,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);
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;;
}
h1{
text-align:center ;
color:white;;
}
p{
text-align:center;
font-family:sans-serif;
}
label{
display:block;
margin:0.5rem;
}
form{
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
;
}
.inline{
width: unset;
margin: 0 0.5em 0 1;
vertical-align: middle;
}
I have updated the code,it has solved the problem
system
September 19, 2024, 6:11pm
11
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
