The registration form challenge is complete!
These challenges are getting lengthier and more difficult by the minute lol
The challenge incorporated new elements, attributes and properties in CSS.
A little tip when starting a new html/css document. Always remember to that in each CSS document to reference my style sheet to my HTML document.
In summary I have highlighted a few steps included in creating the form:
Add a form element in order to action a form-data
The method attribute specifies how to send form-data to the URL specified in the action attribute.
To create form-like lines, we add the fieldset element
In order to name each fieldset, we have to add label elements and add the desired text.
As label elements are inline by default, they are all displayed side by side on the same line, making their text hard to read. To make them appear on separate lines, add display: block to the label element, and add a margin of 0.5rem 0, to separate them from each other.
To create black boxes within the form we should add an input element within our label element.
We should use the for and id attributes to connect the label and input elements. E.g
Enter Your First Name:
For accessibility, best practices link the input elements and label elements by adding ids
For attributes will be added to the label
id attributes will be added to the input
I have noticed that I haven’t gotten accustomed to memorising the different properties E.g to align text I must write text-align instead of just text. It is going to take a lot of practice before I grow comfortable remembering these little things. In order to facilitate the memory of these properties I will add them to a document list and test myself.
Overall, I have learned how to create a fully functioning interactive form with answer boxes and submit buttons.
If you are also taking the freecode camp challenges let me know your thoughts and what have you learnt so far.
Top comments (0)