Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

How would you try and put things in a separate line because things are squished.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="title">Nik's Survey Form</h1>
  <p id="description">Thank you for taking the time to tell me a little about yourself.</p>
  <form id="survey-form">
    <fieldset class="border">
   <label id="name-label">Name:<input id="name" type="text"  placeholder="Enter your name " required></label>
   
   <label id="email-label">Email:<input id="email" type="email" placeholder="Enter your email " required></label>
   
   <label id="number-label">Age:<input id="number" type="number" min="13" max="120" placeholder="Age"> </label>
</fieldset>
<fieldset>
<label > How did you find my Youtube channel?

  <select id="dropdown" >
<option> By Youtube search</option>
<option>By Youtube shorts</option>
<option>By recomendations</option>
<option>Or other</option>
</select>
</label>
</fieldset>
<fieldset>
  <label>Are you subscribed to my youtube channel?</label>
<label for="yes" ><input name="yes" type="radio" value="yes" required >Yes</label>

<label for="no"><input name="no"  type="radio" value="no">No</label>
</fieldset>
<fieldset>
  <label>What do you like about my videos?(optional) </label>
<label><input type="checkbox" value="1">Shorts</label>
<label><input type="checkbox" value="2">videos</label>
<label><input type="checkbox" value="3">Other</label>
<label><input type="checkbox" value="4">Don't like my videos</label>
</fieldset>

<textarea placeholder="Enter your suggestions here..."></textarea>
<input id="submit" type="submit">
  </form>
</body>
</html>

/* file: styles.css */
.border{
  border-bottom:none;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

Since your label input elements are super long, you could try embedding the input elements inside the label element. I wrote a bit of a revised version that I hope will help:
Mod edit: removed code

3

@IceCreamSherbert

This is a project that the op has to do themselves to get the certification. Please do not provide code for them

Thanks

1 Like
4

sorry, that’s a my bad. I wont provide code in the future.