jQuery for Designers Beginner's Guide

Time for action – creating a fancy login form

Follow these steps to create a login form in a lightbox:

1. We'll get started by setting up an HTML page and associated files and folders like we did in Chapter 1, Designer, Meet jQuery. Our HTML page will contain a header that displays a login form. It's common for sites to enable people to login from any page on the site:

   <div id="example-header">
          <h1>Ireland: The Emerald Isle</h1>
          <form action="#" id="login-form">
                 <div><label for="username">Username:</label> <input type="text" id="username"/></div>
                 <div><label for="password">Password:</label> <input type="text" id="password"/></div>
                 <div><input type="submit" value="Log In"/></div>
          </form>
   </div>

2. Next, we'll open styles.css and add some CSS, so that the ...