Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening

Everything from “do you like your pet” to “what kind of pet(s) do you have?” is next to each other when I want to have them be on separate lines

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">Pet Survey</h1>
    <p id="description">Tell us about your pet(s)!</p>
  <label for="name" id="name-label">Name</label><form id="survey-form"><input id="name" name="name" type="text" placeholder="Enter your name" required /></form><label for="email" name="email-label">Email</label><form id="survey-form"><input id="email" name="email" type="text" placeholder="Enter your email" required /></form> <label for="number-pets" name="number-label">Number of pets</label>
    <form id="survey-form" ><input id="number-pets" type="number" name="number-pets" min="1" max="100" placeholder="pets" required /></form>
      <label for="question-2">Do you like your pet?
        <select id="dropdown">
          <option value="">select one</option>
          <option value="1">Yes</option>
          <option value="2">Sort of</option>
          <option value="3">No</option>
        </select>
      <label for="question-2">Do you have a favorite pet?</label>
        <label for="yes"><input id="yes" type="radio" name="preference" class="inline" /> Yes</label>
        <label for="no"><input id="yes" type="radio" name="preference" class="inline" /> No</label>
      <label>What kind of pet(s) do you have?</label>
      <label for="pet-kind" name="Dog"> <input id="pet-kind" type="checkbox" class="input-checkbox" /> Dog</label>
      <label for="pet-kind" 

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Hello! Please don’t create duplicate topics for the same problem.

3

Hi, yes, I realized I did that. I just think I mixed up the other one too much and this one makes the problem clearer, since i’m solely referencing a previous challenge I did before the current one and not a bunch of other things that I referenced because it just looked right

1 Like
4

This is the css applied to the label tag in the previous challenges that you solved

label {
  display: block;
  margin: 0.5rem 0;
}
5

got it, i’ll try that

6

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