В этом руководстве я собираюсь показать вам, как подключить регистрационную форму для Firebase. Firebase – это мобильная и веб-платформа разработки, которая предоставляет программистам различными инструментами, которые помогают им разрабатывать качественные приложения.
С целью этого учебника мы будем использовать базу данных Realtime FireBase для хранения данных в нашей регистрационной форме. Здесь данные хранятся как JSON и синхронизированы в реальном времени для каждого подключенного клиента.
Учебное пособие:
Создайте HTML шаблон для регистрации формы.
Добавить CSS для дизайна и отзывчивости
Подсоедините форму к JavaScript
Соедините базу данных Realtime FireBase до регистрации
Создать HTML шаблон для регистрации формы
Мы не будем использовать какие-либо HTML-фреймворки, такие как Bootstrap, не используем ни одной формы шаблонов котлов. Наша регистрационная форма будет построена с нуля, и она также будет отзывчиваться.
Важные вещи, которые следует принять к сведению в файле index.html, это то, что:
Наша форма имеет две разделы (ваша основная информация о информации и профиле)
У нас есть два бирка сценария под страницей. Первый тег сценария получен из Firebase. Я покажу вам, как мы получили этот тег скрипта позже.
Мы используем проверку HTML 5 через атрибут «Требуется».
Последнее, что я хочу, чтобы мы пришли к сведению, это идентификатор и класс в нашей форме. Это позволит нам манипулировать домом с JavaScript и CSS соответственно.
С нашим HTML выглядит действительно уродливым, пришло время добавить каскадную стиль листа:
Добавить CSS для дизайна и отзывчивости
ПРИМЕЧАНИЕ:
Граница “Box-sizing: пограничная коробка;” был добавлен глобально (*). Это связано с тем, что свойство Box-Sizing позволяет нам включать прокладку и границу в общей ширине и высоте элемента.
Класс Alert был установлен для отображения не так. В нашем файле JavaScript мы собираемся установить его для отображения блока после отправки формы регистрации.
… И с этим у нас есть намного лучше выглядеть регистрационную форму. Это не самая красивая форма в мире, но с помощью медиа-запроса добавлена в нижней части файла still.css, это действительно отзывчиво.
Во второй части этого учебника мы свяжем нашу регистрационную форму для JavaScript, а также связываем ее с базой данных FireBase Realtime.
Чтобы получить более бесплатный контент в веб-разработке, подписаться на мою рассылку: здесь
Оригинал: “https://dev.to/desoga/connect-registration-form-to-firebase-part-1-51b5”