What cha' think of this form?

Code Feedback
1

I just finished the second project.

Hitherto, I have not seen a similar form in the forums :crazy_face:

(PS.: Big screen needed, or there will be nothing out of ordinary)

There is an unimplemented feature to be finished, but I fear it can’t be done with pure CSS… I’d like to apply an animation to the entire body after a button click.

I managed to do something similar on the prior project (upper-right corner), but there the click activated a sibling, and so far I had no success with activating a parent…

Any thoughts?

2

It’s a good-fun form. :slight_smile: Well done! Where are the mouth and ears? :slight_smile:
Yeah, its 'a’Live all right! I noticed that subtle animation.

3

Use the checkbox-hack. Pure css.

4

ding-ding-ding :bellhop_bell:

Valuable info! Thanks!

5

I’ll add a mouth :slight_smile:

There are also two other subtle easter eggs, try marking all checkmarks for instance.

6

The following errors may be adversely affecting your form.

* The 'cols' attribute is required for <textarea> elements.
* The 'rows' attribute is required for <textarea> elements.

@media screen and (max-width: 600px) {
  .left {
    width: 100%;
    text-align: left;
  }
  .right {
    width: 70%;
    align: left;
  }

 @keyframes dropping {100% {pacity:0}}
7

Hey there again tlc35us,

What debugging tool are you using?

Fixed “textarea”, thanks.

I can’t figure out what might be wrong with the media queries…
at 600px rows stack vertically, so left + right adding over 100% width is not a problem.

That last @keyframes is used to inhibit the eye-dropping animation when the screen is not big enough.
Somehow it was working, even with the missing “o” :sweat_smile:
Anyways, I fixed it and it’s still working as expected.

8

I used the built in tool. It’s in the code window. Click the down arrow. Analyze.

9

Well, duh. :man_facepalming:

And all this time there was I, thinking: "damn, this Codepen editor could really use some basic native debugging tool…

I once spent half an hour to find the whole mess was due to a missing semicolon…

10
  • Your first <h1> element is missing a closing tag.
  • <div style="horizontal-align:center"> horizontal-align isn’t valid, plus you should use external styling instead of internal
  • lines 89, 128 and 145, value of the for attribute for the label must be the ID of a non-hidden form control
  • the reset button doesn’t
  • the submit button doesn’t inform me that I haven’t filled in required fields
  • why do you have the JavaScript calls if you’re not using JavaScript?
11

Hey Roma, thanks for the effort!

  1. Fixed (thanks!)
  2. Fixed (thanks again!)
  3. Fixed lines 89 and 128, 145 was ok (thanks once again!)
  4. The reset button is not meant to reset, would be used for an yet unimplemented feature. Upon clicking “reset”, the form would get enraged, crashing into the screen and then bouncing out.
  5. I added an "onclick=“return false” to the Submit button so the screen won’t crash due to an invalid target address to send the info (form “action” is set to a fictitious address).
  6. A side-effect of the measure above.
  7. That inline"call" preempt the user from marking “guns”, when selecting checkmarks. It’s a small joke.