HTML-CSS Form Project (Help!)

Tell us what’s happening:
Edit: A lot has happened since the first post. I made a form but decided, thanks to @Roma, to try and make one from scratch without using the sample code. I did and this is the newest form.

New Form:

I had several issues which now are solved

  • Select tag was not closed

  • Checkboxes displaying in a single column instead of three

But, nevertheless, something is still going on that I require your help. You see, the first line of the checkboxes is empty. It uses white-space: pre-line, based on the pen provided by @Roma. I did a quick research on the properties of white-space but none of them worked as I require (just pre-line).

So my question is: how do I delete that empty line? How can I create a 3 by 3 grid of the checkboxes?

I am seriously seriously thankful for all your help. I like this community a lot just by answering my initial post. I can’t thank you enough :smiley:

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0.

Challenge: Build a Survey Form

Link to the challenge:

3 Likes

Hi, @msalas2199. Very good project.

What are you talking about? When I resize my browser window, it looks fine. Can you be more clear?

For that, give a class to the label elements that wrap the radio and checkboxes. Then, target that class with CSS and add the following properties:

  display: flex;
  flex-direction: row;

Your form looks clean and minimalist. That’s fine. How about creating a new topic on that? You can open a new topic in the #project-feedback category and I am sure many people will give feedback.

Hi @msalas2199,

Make your project from scratch, with your own code, style and content. Don’t take code from the sample project.

  • You can wrap each radio button / checkbox and associated label in a div element.
  • You can investigate what the fieldset element can do for you and align the items inside it.

That is actually really good advice, I just started making another one. Here is the link

Still it has issues that I don’t know how to solve:

  1. I have a text below the dropdown menu (it says “Select the genres that you like”) but it’s not showing. It is the only one that doesn’t show.
  2. I tried making 3 columns with the checkboxes but it’s not working (I don’t know if the CSS is bad or what).
    I know (I think) this can be solved with Bootstrap but I want to do it entirely with CSS.

Other than that I like more this design than the other one.

  • Do yourself a favor and run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should be aware of and address.
      • There’s an open element which is why you don’t see the text. And form-group was a class in the sample code. You’ve changed it to an id which can cause an issue. Remember, an id must be unique in the document.

Cool and interesting. I did a quick pen for someone on how do accomplish this using the column-count property.

I agree. It’s original. Nice job!

I can’t find the open element. The validator kept telling me that but I checked the code line by line and everything looks fine to me. :frowning:

I swap the form-group id to class.

Also I tried using the column-count property but it doesn’t work for me. Do I need to add something else? Like in the Pen Settings…

Seriously I don’t know what I’m doing wrong hahah… Sorry if these are basic problems.
Thanks for your help btw :slight_smile:

Did you make changes and save your code? When I run it through the validator I’m seeing a lot of errors still showing. Start by cleaning up the errors.
One thing that may help, try switching the Syntax Highlighting on Codepen, it can help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. Errors should be marked in red now.
But it’s still important that you clean up the errors the validator is telling you about.

All you did was copy the columns class code from the CSS in the pen I provided and change it to an id. If you don’t have a class (or id) of columns in your HTML code it has nothing to work with.
And you must fix the open element before the checkboxes in order for that property to work.

@msalas2199, the issue arises because your code is;

<div class="columns">
              <label><input type="checkbox" /> Fiction</label>
              <label><input type="checkbox" /> Non-Fiction</label>
              <label><input type="checkbox" /> Comedy</label>
              <label><input type="checkbox" /> Romance</label>
              <label><input type="checkbox" /> Fantasy</label>
              <label><input type="checkbox" /> Mystery</label>
              <label><input type="checkbox" /> Crime</label>
              <label><input type="checkbox" /> Action</label>
              <label><input type="checkbox" /> Other</label>
            </div>

and since you have white-space: pre-line; in your .columns it’s doing exactly what you’re telling it to do.
What you want is to remove that first white-space like so;

<div class="columns"><label><input type="checkbox" /> Fiction</label>
              <label><input type="checkbox" /> Non-Fiction</label>
              <label><input type="checkbox" /> Comedy</label>
              <label><input type="checkbox" /> Romance</label>
              <label><input type="checkbox" /> Fantasy</label>
              <label><input type="checkbox" /> Mystery</label>
              <label><input type="checkbox" /> Crime</label>
              <label><input type="checkbox" /> Action</label>
              <label><input type="checkbox" /> Other</label>
            </div>

Edit: it was initially hard for me to understand what your question was in this post since you edited the original first post instead of appending in the thread.
Good job on cleaning up the W3C errors.
Don’t forget to pass all the tests.

  • Your page passes 15/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Read all of the text, not just the first line.)