First off, I love the new style of Projects! Having the tests to show I’m on the right track is beyond helpful. I want to do a bit more tweaking on style, but for now here is my completed Survey Form with all 17 tests passing successfully!
Looks very basic, but could work.
You may change the layout. This kind of layout is old, and reminded me IE6 for example.
First, the size of the textboxes could be bigger, same for the font-sizes.
This is also good you set all text boxes same-size, and place them in a column (aligned vertically). You could use the table for that.
Another good approach is go for vertical placement, and keep one element in each row/line. You may set the center align for all element.
About the type of the hero combobox. You may add one empty element at the first, or better unselect any item by default.
And the textarea, this is better to set the default value “Please tell us more about yourself!” as placeholder. You may also use some JS for this.
Keep going on great work! Happy programming.
1 Like
Hi! Thank you so much for the feedback! I forked the original form and rebuilt it as a table. I never liked using table’s before, I think my first web design instructor hated them and kinda burned that mentality into my brain but wow this worked great!
The new version is here: https://codepen.io/hardytack/pen/KedrVZ
I am having issues getting the HTML5 validation to work. I made a few inputs required but it doesnt seem to be recognizing it, so I made an If/else statement to at least require the name. Any idea why the validation isn’t working properly?
O yes, now it looks much better, but broken in small devices.
Please note that tables are not very great for responsibility(sorry I didn’t mention it)!
For example since a row contains two column, it always split the row in any screen size, so for very small screens, stuffs may get very mess!
the better way is using CSS for table, just go for div, and using the display attribute to mark the element as table, row, or a column.
This helps you to change the rule base on different screen size into something else.
Example using inline-block display for big screens, and block for mobile. So when it goes in mobile, column goes to row(vertically), and when in desktop, it shows as table(what you done so far)
This is also good to apply some more space between radio and checkboxes, because in mobile user may tap on two element at once(need precious tap)
This is great, now you got one good layout for desktop, but broken for mobile.
Next work for you is using CSS rules/attr instead of plain html table/tr/td tags.
Later, try to show table for for desktop and wide enough screens, and vertically for mobile devices.
Keep going on great work, happy programming.
Just found a very great layout for form design, it’s really great, you may check it too.
Find the shared link the author provided