Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hi, I need help getting my radio buttons and checklist in-line with their labels

Your code so far

Would you recommend freeCodeCamp to a friend?


Definitely


Maybe


Not Sure



What is your favourite feature of freeCodeCamp?

Front-end projects

Back-end projects

Data Visualisation

Challenges

Open Source Community


Gitter help rooms


Videos


City Meetups


Forum


Additional Courses


Any comments or suggestions?



Submit

<!-- file: index.html -->
<!DOCTYPE html>
<html lang-"en">
<head>
<meta charset="UTF-8">
<title>Survey-form</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<h1 id="title">freeCodeCamp Survey Form<h1>
<p id="description"><em>Thank you for taking the time to help us improve the platform</em></p>

<form id="survey-form">

<label id="name-label">Name</label><br>
<input id="name" type="text" placeholder="Enter your Name" required><br>
<br>

<label id="email-label">Email</label><br>
<input id="email" type="email" placeholder="Enter your Email" required><br>
<br>

<label id="number-label">Age (optional)</label><br>
  <input id="number" type="number" placeholder="Age" required min="15" max="110"><br>
  <br>

<label id="current-role">Which option best describes your current role?</label><br>
<select id="dropdown" name="role" required>
  <option disabled selected value>Select current role</option>
  <option>Student</option>
  <option>Qualified</option>
  <option>Employed</option>
</select><br>
  <br>


  <label id="radio-buttons">Would you recommend freeCodeCamp to a friend?</label>
  <br>
  <input type="radio" name="radio" value="definitely">Definitely
<br>
  <input type="radio" name="radio" value="maybe">Maybe
<br>
  <input type="radio" name="radio" value="not-sure">Not Sure
  <br>
<br>

<Label id="favourite-features>">What is your favourite feature of freeCodeCamp?</label>
<input type="checkbox" value="front-end">Front-end projects
<input type="checkbox" value="back-end">Back-end projects
<input type="checkbox" value="data-visualisation">Data Visualisation<br>
<input type="checkbox" value="challenges">Challenges<br>
<input type="checkbox" value="open-source-community">Open Source Community
<br>
<input type="checkbox" value="gitter Help Rooms">Gitter help rooms
<br>
<input type="checkbox" value="videos">Videos
<br>
<input type="checkbox" value="city-meetups">City Meetups
<br>
<input type="checkbox" value="forum">Forum
<br>
<input type="checkbox" value="additional-courses">Additional Courses
<br>

<p>Any comments or suggestions?</p>
<textarea class="textarea" placeholder="Enter your comments here..."></textarea><br>
<br>

<button id="submit" type="submit">Submit</button>


</form>

</body>

</html>

/* file: styles.css */
body {
  background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7893c980-c0bf-4672-a650-8cbf3703c5b8/dg6rm8m-d0c48b3f-b714-4c2a-842f-e671685db54b.png/v1/fill/w_1280,h_732,q_80,strp/relaxing_ocean_background_wallpaper__2__by_ohmylore_arts_dg6rm8m-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzc4OTNjOTgwLWMwYmYtNDY3Mi1hNjUwLThjYmYzNzAzYzViOFwvZGc2cm04bS1kMGM0OGIzZi1iNzE0LTRjMmEtODQyZi1lNjcxNjg1ZGI1NGIucG5nIiwiaGVpZ2h0IjoiPD03MzIiLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS53YXRlcm1hcmsiXSwid21rIjp7InBhdGgiOiJcL3dtXC83ODkzYzk4MC1jMGJmLTQ2NzItYTY1MC04Y2JmMzcwM2M1YjhcL29obXlsb3JlLWFydHMtNC5wbmciLCJvcGFjaXR5Ijo5NSwicHJvcG9ydGlvbnMiOjAuNDUsImdyYXZpdHkiOiJjZW50ZXIifX0.HXmJYUtn6QbKcqykYfoHKyX0I8FdNq5QSUk1J-PCpek);
  color: white;
  background-size: cover;
  font-family: sans-serif;
}

h1, p {
text-align: center;
}

#title, #description {
font-size: 50px;
}

#survey-form {
  width:60%;
  background-color: #7170ba;
  margin-left: 20%;
  margin-right: 20%;
  padding: 20px;
  color: white;
  text-align: left;
  padding-bottom: 35px;
}

input, select {
  width: 100%;
  margin: 10px 0 0 0;
  height: 2em;
  font-size: 1rem;
}


#submit {
  background-color: rgb(33, 150, 33);
  width: 100%;
  height: 40px;
}

.textarea {
  height: 100px;
  width: 100%;
}

radio {

}

checkbox {
  
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

You have width: 100% on all input elements.

You do not want that for the radio and checkbox input elements. Limit the selector that sets width: 100% so it doesn’t select the radio and checkbox input elements. Or select the radio and checkbox input elements after that and unset their width.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.