Hey there @FINL3Y ! Welcome to web development.
To help you out we really need your code. The way to insert code into your message, in most forums, is this:
On a new line type three backticks. This is a backtick _` _. Then copy and past your code below those backticks. Below your copied and pasted code type three more backticks. This method works for both your HTML and CSS (though your problem looks like a CSS problem).
So Finley, if you would send me your code, I would be happy to help you!
in the label selector, you’re missing a semicolon ; after width: 50%.
The input selector has a display: inline-block; property, which might not be necessary since input elements are inline-block by default.
In the select selector, height: 30px; might not be necessary, as the default height of a select element is usually sufficient.
@FINL3Y
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
<!DOCTYPE html>
<html>
<head>
<title>Survey Form</title>
<h1><center>Survey Form</center></h1>
<style type="text/css">
body {
background-color: aquamarine;
}
input{
display:inline-block;
}
label {
font-size: 17px;
text-align: end;
margin: 10px;
display: inline-block;
width: 50%
}
fieldset {
background-color: white;
border-color: aquamarine;
padding: 20px;
}
h4 {
padding: 5px;
}
select {
background-color: rgb(245, 239, 239);
height: 30px;
}
p{
text-align: center
}
</style>
</head>
<body>
<fieldset style="background-color: white; border-color:aquamarine; border-width: 0cap; ">
<p>Let us know how we can improve freeCodeCamp<p>
<div id="form">
<form>
<label>Name:</label>
<input type="text" placeholder="Enter your name"><br>
<label>Email:</label>
<input type="email" placeholder="Enter your Email"><br>
<label>Age:</label>
<input type="number" placeholder="Age"><br>
<label>Which option best describes your current role?</label>
<select name="roles">
<option value="Teacher" >Teacher</option>
<option value="Student" selected="selected" >Student</option>
<option value="Mentor" >Mentor</option>
<option value="Programmer" >Programmer</option>
</select><br>
<label >How likely is that you would recommend freeCodeCamp to a friend?</label>
<input id="Likely" type="radio" name="title" value="Definitely" />Definitely<br>
<input id="Likely" type="radio" name="title" value="Maybe" />Maybe <br>
<input id="Likely" type="radio" name="title" value="Not sure" />Not sure<br>
<label>What do you like most in FCC:</label>
<select name="preview" type="button">
<option value="Select an option" selected="selected" >Select an option</option>
<option value="QUIZS" >QUIZS</option>
</select><br>
<label>Things that should be improved in the future<br>(Check all that apply):
</label>
<input type="checkbox" name="Improvements" value="Front-end Projects"/> Front-end Projects<br>
<input type="checkbox" name="Improvements" value="Back-end Projects" />Back-end Projects<br>
<input type="checkbox" name="Improvements" value="Data visualization" />Data visualization
</form>
</div>
</fieldset>
</body>
</html>
tried making the changes but still the radio buttons wont go infront of the label,only one does
Thank you,Can you find the solution for me?
Get idea form previous form building challenge:
Hi! Here’s an example with the same centered styling:
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.