Coding Web Technologies: Accessible forms Prac 2

Discovery Sprint 2: Build a registration form

DUE DATE: Wendesday noon Week 4

Individually

· Create a registration form using the skills you have learned. You should ensure the form is accessible and uses correct semantic elements. Use CSS to present an intuitive interface.

· The form should get the following information

· Name

· Address [extended: validate or autocomplete]

· Email [validate email]

· Password

· Telephone number [if <

1

load warning to enter country code]

· Birthdate [if age <13 load warning message; if >50 load help link]

· Submit Button

· Please note that not all form elements can be easily styled. Elements with special functionality like select often cannot be properly styled.

This resource

outlines some of the problems you might encounter.

· TIPS

· There are special

pseudo-classes

for forms.

· See if you can use CSS to highlight which input is currently active in your form.

· Try using other special CSS pseudo-classes that you think are appropriate.

As a team

Ensure you have a Front-end Dev role responsible for co-ordinating the following:

· Create a Bitbucket workspace and project for your team.

· Create a repository for public access through the web (https://workspace_name/bitbucket.io)

· Create a subdirectory for each member using their name

· Ensure every member has a version of the repository to add to their subdirectory

Submission

· Commit your code individually under your team repository in a subdirectory using your name eg

https://workspace_name.bitbucket.io/your_name/index.html

· Test the address is correct

· Submit these links in your work on the LearnLine.

Criteria

· CSS follows best practices

· CSS is reusable

· CSS is not too dependent on the markup

· Uses appropriate class names

· HTML is semantic and accessible

· Uses appropriate tags

· Meets validation and google lighthouse accessibility requirements

· JavaScript provides useful features on the page such as

· Code is committed on GitHub and site is projected on Github Pages

· Originality

1