Frontend Web Development
Assignment for Week 14
- Create an HTML page with a sign-up form.
- In the form, provide two fields asking for a person's Social Security number and date of birth. Don't do any JS magic yet.
- Next, provide a dropdown (
<select>
) asking for the state they live in. You don't need to provide all states - just a few.
- If you haven't already, add labels or headings above each field.
- Cause only one field to be visible at a time, starting with the SSN. Also, cause the date of birth field to pop up a datepicker when focused. You'll need to assemble a custom jQuery UI bundle for this step.
- Cause the SSN to only accept 3 digits, then a dash, then 2 digits, then a dash, then 4 digits. You'll want to use the Masked Input plugin for this.
- Give the state dropdown a search box by using Chosen.
Hints:
- You'll need to include jQuery. It comes along with the jQuery UI bundle, or you can reference a CDN.
- Remember to include the CSS for jQuery UI and Chosen as well as the JavaScript.
- For the accordion to display properly, you need to surround the text inside labels or headings in an
<a href="#">
.
- Here's the HTML if you're really stuck.
Extra credit:
- Validate the form, making all fields required. You'll need to surround the fields in a
<form>
element and add an <input type="submit">
, if you haven't already.