Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

For the Registration Form how do I align the radio buttons to the left and on a new section? The fieldset elements don’t seem to be working.

Screenshot 2024-05-06 152600
Screenshot 2024-05-06 1526001073×767 19.8 KB

Your code so far

<!-- file: index.html -->
<!Doctype html>
<html lang="eng">
  <head>
    <meta charset "UTF-8">
    <title> Registration Form </title>
    <link rel="stylesheet" href="styles.css"/>
  </html>
<body>
<h1 id="title"> Registration Form </h1>
<p id="description"> Please fill out the information below</p>
<form id="survey-form">
  <fieldset>
<label id="name-label"> Name <input id="name" type="text" placeholder="Mary Lew" required /> </label>
<label id="email-label"> Email <input id="email" type="email" placeholder="marylew@gmail.com" required/></label>
<label id="number-label"> Age (optional) <input id="number" type="number" placeholder="18" min="18" max="120"  /></label>
</fieldset>
<fieldset>
<p> What field of study are you interested in? </p>
<select id="dropdown" name="study">
  <option value=""> Select One</option>
  <option value="1"> Science </option>
  <option value="2"> Mathematics </option> 
  <option value="3"> Technology </option>
  <option value="4"> Engineering </option>
  </fieldset>
  <fieldset>
  <p> Are you enrolled into any of these studies? </p>
<label id="yes-enrollment"><input id="yes-enrollment" type="radio" name="enrollment" value="yes" > Yes</label>
<label id="no-enrollment" ><input id="no-enrollment" type="radio" name="enrollment" value="no" > No</label>
</fieldset>






/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  color: black;
  margin: 0;
  background-color: #E9D0AA;
}
h1, p{
  margin: 1em auto;
  text-align: center;
}
form {
  width: 50vw;
  max-width: 500px;
  min-width: 300px;
  margin: auto;
  
}
label {
  display: block;
  margin: 0.5rem 0;
}
input, select {
  margin: 10px 0 0 0;
  width: 50%;
}
input[type="number"] {
  width: 100px;
}
input[type="radio"] {
  width: 100px;
}
fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #C68A5F;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

1 Like
2

Hey there! Perhaps by removing the width property for input[type="radio"] and adding your text align property to “left” , you should see the radio buttons aligned to the left within the fieldset.

2 Likes
3

Hi, I tried doing that but it doesn’t work unfortunately. It also doesn’t go to another section. Also, the text “Are you enrolled into any of these studies?” doesn’t show up.

1 Like
4

There is a ‘legend’ element (<legend></legend>) for setting the text title on a field set element, try using that instead of paragraphs.

For the radio buttons, there are options you could try. The ‘break’ element (<br></br>) inserts a new line in the HTML, you could place those around your buttons. You could also try setting the CSS ‘display’ property to “block”. I think that radio inputs and label elements both act as inline elements naturally.

2 Likes
5

Welcome to the forum @riyap

Try closing the select element.

Happy coding

3 Likes
7

That worked thank you so much!

2 Likes
8

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