Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

hi im building the survey form im pretty far but im getting stuck on aligning my radio buttons they wont align whatever i try.

so i hope the people from this forum can help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= device width, initial-scale=1.0"/>
    <title>survey form</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1 id="title">survey form</h1>

    <p id="description">Please fill out this form with the required information</p>

    <form id="survey-form">

    <fieldset>
        <label id="name-label" for="name-label">Enter Your Name: <input id="name" name="name" type="text" placeholder="place name here" required /></label>
        
        <br>

        <label id="email-label" for="email-label">Enter Your Email: <input id="email" name="email" type="email" placeholder="place email here" required/></label>
        
        <br>

        <label id="number-label" for="nummer-label">enter your age <input  id="number" min="8" max="10"placeholder="12345678" required /></label>

        </label>

    </fieldset>

    <fieldset >

      <label class="choiceAB">choice A<input type="radio" id="choice A" name="choice" value="choice a"/></label>
      <label class="choiceAB">choice B<input type="radio" id="Choice B" name="choice" value="choice b"/></label>
      

    </fieldset>
    
    <fieldset>
     
        <label for="dropdown">kies een onderwerp?</label>
        <select id="dropdown" name="kies onderwerp">
          <option>maak hier u keuze</option>
          <option>keuse 1</option>
          <option>keuse 2</option>
          <option>keuse 3</option>
          <option>keuse 4</option>
        </select>
        <br>
        <br>
        <br>
        <label for="opmerking"> Wat vond u van de vragen lijst? :<br>
          <textarea id="opmerking" name="bio" rows="3" cols="30" placeholder="Vul hier in wat u er van vond."></textarea>
        </label>

    </fieldset>   
        
        <input type="submit" value="Submit" />
    </form>
  </body>
</html>

/* file: styles.css */
body {
    background-image:url('images/travelphoto.jpg');
    background-size: cover;
    width: 80% auto;
    height: auto;
    font-family: fantasy ;
    font-size: 16px;
  }
  /* h1 en p hierond centreert alleen de paragraaf en kopteksten */
  h1, p {
    margin: 1em auto;
    text-align: center;
  }
 /* form bepaalt de breedte van al je inputs en tekst boksen */ 
  form {
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
  }
  /* bepaalt de fieldset dikte en de border rand*/ 
  fieldset {
    border:solid;
    border-style: solid;
    padding: 2rem 1;
    border-color: 2 px solid #000000;
  }
  
  
  label {
    display: block;
    margin: 0.5rem 1;
  }
  
  input,
  textarea,
  select {
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2em;
  }
  
  input, textarea {
    background-color: #cdcdd579;
    border: 1px solid #0a0a23;
    color: #ffffff;
  }
  
  ::placeholder {
    color: rgb(0, 0, 0);
    opacity: 1; 
  }
  
  
  input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #7171df79;
    border-color: rgb(0, 0, 0);
    min-width: 300px;
  }

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hello
If you want it like this:
image
then wrap each label element in an article element. En if you want more space between them you can wrap each label element in a p element.

3

Hey! Add class attribute with the value inline to your radio inputs. Then create a rule for inline selector in the CSS file. Targeting the inline class selector, make it’s width to unset, display inline, vertical-align middle, and set it’s margin: 0 0.5rem 0 0;
@timo331

4

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