Almost finished Survey Form need help finishing up

my css

body{
  background-image: url("https://th.bing.com/th/id/R.e501cc115ecbb005d079f04e40c6ce66?rik=yoQqdNvxvBug1Q&riu=http%3a%2f%2fwww.wallpaperbetter.com%2fwallpaper%2f916%2f817%2f70%2fscotland-highland-valley-mountain-road-clouds-sky-sunset-1080P-wallpaper.jpg&ehk=v2AoboWiB%2bCdXFKt89ZFDVaYMWg5xvf5yZFqxktyUNs%3d&risl=&pid=ImgRaw&r=0");
  background-size: cover;
  background-position: center; 
  background-repeat: repeat;
  background-attachment:fixed;
  background-position: center;
  text-align: center;
  color: white;
  }
header{
  text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

#title{
  border: solid white;
  border-width: 50%;
}
.notbold{
  font-weight: normal;
  font-size: 20px;
}
.background-box{
  display: grid;
  justify-content: center;
  background-color: white;
  border: 2px solid black;
  opacity: 0.4;
  color: black !important;
  width: 40%;
  line-height: 1.8;
}
.margino{
  margin: auto;
}
#number-label, #email-label, #name-label, #dropdown-label, #boots-label{
  line-height: 2.2;
}


My HTML

<header>
<h1 id="title">Outdoors Lover Survay Form</h1>
  <p class="notbold"><i><u>Thankyou for filling out this form</u></i></p>  
</header>
<form id="survey-form" class="background-box">
  <div class="margino">
  <label for="name" id="name-label">Name:</label><br>
  <input type="text" id="name" name="name" placeholder="Enter your name"><br>
  <label for="email" id="email-label">Email:</label><br>
  <input type="email" id="email" name="email" placeholder="Enter your Email"><br>
  <label for="age" id="number-label">Age (optional): </label><br>
    <input type="number" id="number" name="age" placeholder="Enter your age"></label><br>
<label for="dropdown" id="dropdown-label">What is your favourite location to walk?</label><br>
<select name="dropdown" id="dropdown">
  <option value="hills">Hills</option>
  <option value="mountains">Mountains</option>
  <option value="feilds">Feilds</option>
  <option value="beach">Beach</option>
  <option value="Forrests">Forrests</option>
  <option value="mash-swampland">Marsh/Swampland</option>
</select><br>
<label for="weather" id="weather-label">What is your favourite weather to walk in?</label><br>
<input type="radio" id="weather" name="sunny">Sunny</input>
<input type="radio" id="weather" name="rainy">Rainy</input>
<input type="radio" id="weather" name="windy">Windy</input><br>
<input type="radio" id="weather" name="calm">Calm</input>
<input type="radio" id="weather" name="stormy">Stormy</input>
<input type="radio" id="weather" name="scorching">Scorching</input><br>
<label for="boots" id="boots-label">What type boots do you own?</label><br>
<input type="checkbox" id="leather" value="leather">Leather</input><br>
<input type="checkbox" id="soft-skinned" value="soft-skinned">Soft-Skinned</input><br>
<input type="checkbox" id="gortex" value="gortex">Gortex</input><br>
<label for="comments" id="comments-label">Aditional comments:</label><br>
<textarea id="comments" name="comments" rows="5" cols="50" placeholder="please write here"></textarea><br>
<input type="submit" value="submit"></input>
</div>
</form>

just wondering if anyone knows how to make the white box I have in the background translucent but the text within solid and how I can make this box and text center on the page while having its width halved. I can get it to center on the page but then the white box fills the page and if I get it to be at the size I want then I cant seem to get the box and text to center. Thanks.

You should be able to center the box by adding the " margin: auto" to the background-box class.

You can also try using RGBA for the transparent background.

belter mate that sorted it all out any chance you have any articles explaining the process as to why these techniques worked and what Ive been trying hasn’t? If not it’s cool mate. Again thanks a million :slight_smile:

also quick question just been checking out the page but my radio buttons arn’t a unique select on my preview on codepen I can select em all but then it wont let me deselect any. Im guessing its an issue to do with the parent element but Im not sure. Here is the exact section I am talking about

    <label for="weather" id="weather-label" class="big-text">What is your favourite weather to walk in?</label><br>
      <input type="radio" id="sunny" name="sunny">Sunny
      <input type="radio" id="rainy" name="rainy">Rainy
      <input type="radio" id="windy" name="windy">Windy<br>
      <input type="radio" id="calm" name="calm">Calm
      <input type="radio" id="stormy" name="stormy">Stormy
      <input type="radio" id="scorching" name="scorching">Scorching<br>

basically it’s letting me select multiple boxes when I should only be able to select one at a time

Actually you are supposed to use a label element for each radio button.

So, you should have a formatting similar to:

        <input id="example1" type="radio" name="example" value="one">
        <label for="example1">Example</label><br>

        <input id="example2" type="radio" name="example" value="two">
        <label for="example2">Example2</label><br>

You have to :

  1. Use a separate label tag for each input.
  2. Your name attribute should have the same value(eg. name=“weather”)

In case you have forgotten how to implement radio buttons you can go through the lessons once again.


<label for="weather" id="weather-label" class="big-text">
What is your favourite weather to walk in?
</label><br>

Instead of using a label like this to ask the question you can use a legend tag.
You can also wrap the radio buttons along with the legend tag in a “fieldset” tag.

After doing this your radio buttons should be working properly.

okay thanks a million for taking the time to help and make sense of it for me I really appreciate you taking the time out of your day to help thanks again mate!

1 Like