FormsLesson 136Free preview

Login Form in Navbar

This lesson is part of How To · All levels

Summary

Login form in navbar places the login form in the dropdown on the navigation bar. The login button opens a small panel containing email and password without leaving the page. A panel like this should be able to close, support a keyboard, and still send credentials through POST.

Key points

The login button container uses the position relative.
The form panel uses position: absolute and is hidden when closed.
The expanded air reflects the status of the panel.
Login forms send data with method="post".
Click outside the panel or the Escape button to close the dropdown.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.