In this tutorial, I am going to show you how to connect your registration form to Firebase. Firebase is a mobile and web development platform that provides programmers with variety of tools that helps them develop quality applications.
For the purpose of this tutorial we will be making use of Firebase Realtime Database to store data in our registration form. Here, data is stored as JSON and synchronized in realtime to every connected client.
Create Html template for registration form.
Add css for design and responsiveness
Connect Firebase Realtime Database to Registration Form
We will not make use of any html frameworks like Bootstrap, neither are we making use of any form of boiler templates. Our registration form is going to be built from scratch and it is also going to be responsive.
The important things to take note of in the index.html file is that:
Our form has two sections (Your Basic Info and Profile section)
We have two script tags below the page. The first script tag is gotten from firebase. I'll show you how we got that script tag later.
We are making use of Html 5 validation through the "required" attribute.
With our html looking really ugly, it's time to add some Cascading Style Sheet:
The border "box-sizing: border-box;" was added globally (*). This is because the box-sizing property allows us to include the padding and border in an element's total width and height.
... and with that, we have a much better looking registration form. Its not the best looking form in the world, but with the media query added at the bottom of the style.css file, it is really responsive.