Build a Survey Form ttwwss

Hey guys, check out my survey form. Tell me what you think!

I would order the objects so the text begin in a straight line, also the buttons should be straight from top to down, now you have buttons on different vertical levels which makes navigation on the website more difficult.

Your form looks good @zortron756. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

I followed the instructions on MDN and I have to admit that my form looks better. But it’s still not quite right. I want to move the section and label toward the center of the form and don’t know how. It is very baffling :frowning:

It is looking better @zortron756.

A suggestion, rather than having every element as a list item why not break them out separately. Take another look at the form in the lesson and review the lesson regarding fieldset. The lesson only references wrapping the radio buttons but it can be used elsewhere.
Another thing you can review is having the radio buttons and checkboxes before the label (that is on the left rather than the right).

You’re doing good.

1 Like

I have made some of the changes that you suggested, but I’m baffled at what to do next.

@zortron756, it looks better with the radio buttons and checkboxes to the left of the label.

What I meant by using the fieldset element was to separate the sections rather than wrapping them up together.
I quickly put together this sample pen using your code with minor changes.

  1. wrapped different areas in their own fieldset element to show how they can be used to group
  2. with the radio buttons I left them as you had them
  3. with the checkboxes I nested the input within the label (this was one of the lessons) and also give it some simple styling just to show the difference

Coming up with a design is tough. It’s something that gets a little better with time or maybe we struggle with it always. You’ve maybe seen and interacted with a form on line before so that could give you ideas.

You passed the tests and that’s the important part. The rest was suggestions from me to perhaps make it a little better for the users.

I used your code and it helped a lot. My form is looking a whole lot better now and I now understand the importance of nesting the input element within the label. I just have one question: are radio and checkbox elements the only elements that need the value attribute?

If you click the reply link in my post then I get notified. If you use the general reply button at the bottom I do not get notified. You an also mention the person by name (ex. @Roma).

To be clear, radio and checkbox are not elements. They are values of the attribute type which is an attribute in the input element.

To answer your question keep this,, as a reference.
Click on HTML to expand, then click on Attributes to expand then scroll down to ‘value’ and click on it. The table will show you which elements that attribute can be used with.
DevDocs is a good reference tool

Your form looks better. One thing you may want to revisit;
Make your page responsive. Remember, the R in RWD stands for Responsive

  • There’s a horizontal scrollbar on smaller screens

I have a question about using @Name to contact someone. I remember reading about it when I was trying to learn github, but I didn’t understand how to use it. How would I contact you using @Roma? Where does the @Name go?

@zortron756, you use it just like you typed it in the sentence. When you do that, I get a notification.

This stuff is frustrating to learn. But I think that my Survey Form is now looking responsive.

Hopefully rewarding too @zortron756 when things start coming together.
Nice job on making your form responsive.

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