Form - Your favorite pizza!

Hello everyone ! :slightly_smiling_face:

I’m still at the Survey project because I want to make sure I understood everything before moving on the next project in the curriculum. :wink:

:pencil2: Here’s my survey : https://codepen.io/CodeCaptina/pen/VRqajo

I still have a few questions though :slight_smile:

  1. Submit It looks like the Submit button isn’t clickable for some reason.

  2. Textarea I can’t make the textarea bigger in height. If I add a height in px it will vertical-align the placeholder to the center instead of top left. Should I use “position: absolute” for the placeholder otherwise?

  3. Positioning I sure didn’t really understood the positioning in CSS. I created 6 divs with an id #block-1 #block-2, #block-3... and put random values for top but I’m pretty sure it’s not the right way to go. It looks fine as it is but there must be a way to do something clean.
    Adding margins to the top and bottom of each div wasn’t conclusive. :pensive:

  4. Checkboxes I tried to have two columns of checkboxes so you wouldn’t have to scroll to see every option but nothing worked. I tried flex and float.
    Maybe I didn’t do it right, or maybe the width of the labels were messing with flex? :hushed:
    If someone could give me an idea that would be really cool. :pray:
    Ideally, when you resize the window, the checkboxes should align to the left in one column if the window is too narrow.

  5. Radiobuttons for At home/At the restaurant : I tried “display: inline-block” to have them on the same line and I even tried float but nothing worked. :confused:

  6. Select Option Is it possible to add icons to the left of the option labels?

If you see any other mistakes or things I could improve, please let me know!
I’m sure I can improve the CSS syntax to avoid repetition or to improve readability (I tend to place the selectors a bit randomly…). :sweat:

Thanks for your help! :full_moon_with_face:

Love that you’ve made this challenge your own! I know custom-styled checkboxes and radio buttons aren’t always easy to make.

A submit button submits its parent form. Your submit button lies outside the form, so it submits nothing.

There’s at least 1 thing you definitely should do to improve readability, and that’s fix your name/‌age/‌email inputs at the top and the text field at the bottom. The placeholder text is are almost completely invisible.

There are 2 things to fix here:

  • Fix the labels so that they actually label the content, and then make them a readable color. Also, place them before the respective element, rather than after — this is the convention for text inputs.
  • Either remove the placeholders or increase the color contrast. If you do keep them, consider using them to show extra info, such as expected formats (e.g. amy.hardwick@example.com) rather than simple descriptors (e.g. Your email), as the latter are already provided by the label.

You can use the color contrast checker tool to check that text has enough contrast. Aim for at least WCAG AA level.

1 Like

@lionel-rowe
Thanks for your advice ! :smiley:

I can’t believe I completely missed to put the submit button inside the form :woman_facepalming:t2:

As for the labels, I was trying to give the inputs this special effect where you click and the placeholder disappears without having visible labels.
If I could manage to achieve the same effect with the label above the line… maybe with absolute positioning?

I’ll increase the contrast :slight_smile:

Having the labels disappear completely when the field is focused or filled is poor UX. This article from NN group explains why.

You can achieve a similar effect without ruining UX using the floating label approach, explained in the same article. Here’s a CodePen demo that achieves this effect with only HTML and CSS.

Note that in the demo, the label element HTML comes after the input HTML, but is displayed above it, so user expectations aren’t broken. In the case of inputs and labels, the semantic link comes from the for/id attributes, not the placement of the markup itself.

EDIT: The markup of the demo actually has a few issues (ids must be unique and are case sensitive, and the nesting isn’t quite right), but hopefully displays the effect nicely nonetheless.

1 Like

I really like that effect!
Thanks

Ok I tried to practice this type of labels but I get stuck at the :not(:valid) part…
Currently the labels stay small (14px) even if there is no input text.

If I remove the selectors :arrow_right: + .just__label after :valid (line 47 in the CSS),
it works fine on focus but the label goes back to its original size and overlaps the input text when I “unfocus”.

If I leave the :arrow_right: + .just__label after :valid,
the label stays small even if there is not text or if it’s not focused.

I tried adding a selector with :not(:valid) (even though I don’t know if it’s necessary) with the font-size to 22px but I didn’t change anything.

https://codepen.io/CodeCaptina/pen/wOZLvK

I was practicing on a separate pen so I could change the labels on my pizza form.