HTML Forms exercises

Build a signup form

  1. Create a new folder on your computer. Call it 'form-exercise'.
  2. Save the starter HTML file to the form-exercise folder by right-clicking this link and selecting Save Link As.
  3. Do the same with the css.
  4. Create a new file in the form-exercise folder called 'form.js'.
  5. Create a listener for click events on the #signup link that will toggle() the #ss-form form. HINT: toggle will show an element if it is currently being hidden and hide it if it is currently being shown.
  6. Create a variable called "submitted" and set it to false.
  7. Create a listener for "submit" events on the #ss-form form that will set the submitted variable to true.
  8. Create a listener for "load" events on the iframe element that, if submitted is true, will:
    • set the text on div#message to "Signed up successfully"
    • fade in div#message HINT: check the jQuery docs
    • fade out div#message over 5 seconds HINT: fadeOut() takes an argument to represent the number of milliseconds the fade out should take. There are 1000 milliseconds in a second.
    • hide the form