Please review Survey Form

Please review Survey Form
0.0 0

#1

Please review my survey form for the beta curriculum’s Survey Form Project. It passes the FCC beta tests, no inline styling used, no ID selectors in CSS, no validation errors in HTML and CSS. I am still working on centering all HTML form elements using CSS. Thank you in advance for all your feedback!

Here is the codepen link-


Build a Survey Form Project Questions, Discussions, and Resources (January 2018 Cohort)
#2

@Vanic6

Okay, it seems that the CodePen glitch has gone away!

I’ve got about 10 mins to type out some thoughts (3 thoughts). Sorry to have to be brief, but we haven’t eaten dinner yet (because I haven’t cooked it yet!)

Use of <br>
Probably it’s better use control the spacing through CSS instead of inserting breaks.

<textarea>
You know that text that appears inside the text area. That should be created with the placeholder attribute, like this:
<textarea class="choices" rows="10" cols="50" name="comment" form="survey-form" placeholder="Please provide us with suggestions for making this a successful program."></textarea>

segments with radio buttons and checkboxes –
For accessibility support, these groupings need to wrapped in <fieldset>
@camper always provides such nice links to accessibility supports. Here’s one of his comments:

Fieldsets and Grouping: Your checkboxes and radio buttons need to be grouped either with the <fieldset> element or aria-labelledby. Here’s some more information if you’re curious:
https://webaim.org/techniques/forms/#labels
https://dequeuniversity.com/rules/axe/2.4/checkboxgroup?application=axeAPI

Those are my 3 thoughts. I know you’re working on the centering (I imagine you’re seeking something other than <span>). Please re-post when you’ve got what you’re hoping for regarding the centering.

Cheers!
– Janice


#3

@Vanic6 Nice start for a survey form, I will add 2 points in addition to @ConnectExtend’s points above:

  1. Responsiveness
    When the screen gets too narrow, the radio buttons and checkboxes wrap around and look a bit messy. Make sure you give them more room on smaller screens. The same goes for the Submit button, on a small screen it doesn’t show the full word Submit.

  2. CodePen head tags
    In CodePen you don’t put a Doctype element and all the other tags that belong to the head are entered in the Pen Settings rather than the HTML code box.


#4

Thank you to both for your feedback and I will continue working on making my form better!