hi campers,
i want to build my survey form, for start i just created a skeleton structure from the project user stories. i will touch it up with the styling latter.
https://codepen.io/sobadrdb/pen/YzyRgmo
but if i run the test it will bring this error:
10. For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id="name-label", id="email-label", and id="number-label".
where should i placed those id?
help is appreciated.
These should be placed in the label tag.
<label for="...." id="...">....</label>
1 Like
thanks @crossphoton
missed that, cause i wrote <label for="name-label" thats way i thought would be strange to add id="name-label"> since my input element <input id="name" type="text" name="name" ... >
now im changing them to <label for="name" id="name-label"> and so on.
-- progress: update #1--
i just added some border guidelines, to see if nested elements wont overlap their parents.
next updated would be altering the fieldset.
-- progress: update #2 --
hi campers,
i just done to positoning the elements so they each must have 'element-distancing' and not allowed to cross borders. as for my mobile screen , their positions look good, not sure with other dimmensions, not yet implemented @media.
Tap to Preview
XperiaXZ screenshot
and at least i learned something new:
first i thought 'theres nothing i can’t do as a begginer to altering the childs element inside fieldset'.
nothing worked with flexbox or grid to make siblings side by side in row. it frustated me🙃 for hours.
turned out after some searched, i found out it was related to chrome browser issues. then i try firefox browser, well the grid does works. So if you guys can’t see the way my screenshot does. it browser issues.
Coming next, altering cosmetic updates.
1 Like
i ran the validator, and shows 7 errors,
which i might ignored the first 3 errors.
im going to fix the 4 to 7 errors addressing.
before continuing to alter cosmetics.
W3 Validator Errors Addressing
Hi Campers,
just finished altering the cosmetics.
im built it with mobile first approach, still need to learns about the @media. also the grid. for now im happy with the layout.
on my mobile screen
this is the same pen as link on my first post.
if you guys have any suggestions or anything to share, feel free to comments.
haven’t rechecked the w3c validator yet. its hard to copy/paste in mobile device.
