For your first assignment, you will be creating a page that has a form on it to register a

new account and capture demographic data.

You will use a w3spaces space.

We will standardize on the Medical industry. So you will be creating a Patient Registration
Form.

Here are some examples you can look at to get you started:
Sample with flow charts:
https://www.w3resource.com/javascript/form/javascript-sample-registration-form-
validation.php

My version of the above sample:

https://profjake.w3spaces.com/MIS3371/examples/sample-registration-form.html

Bad example:
https://profjake.w3spaces.com/MIS3371/examples/hw1-badexample1.html

HW1 to get you started with proper heading and tabbing (limited form elements):
https://profjake.w3spaces.com/MIS3371/homework1.html

First, create a data dictionary in a spreadsheet program. Save it to One Drive. You will
share that file link with me.
Create all the fields you would want to capture to write into a database table.
call it "mis3371-homework1-data-dictionary.xlsx"

Example: mis3371 data dictionary

Share this link to the file on One drive or other cloud based service. DO NOT include
the file when you do the assignment in Canvas.

Second, create a drawing or diagram to show what your page is supposed to look like.
You should choose to use a website like draw.io (diagrams.net) to create a diagram of
what you want your site to look like.
Name it appropriatey, i.e. mis3371-homework1-diagram.jpg or or mis3371-homework1-
diagram.drawio or whatever the extension is that is created from the program you
decide to use.
Here is draw.io: https://app.diagrams.net/

Share this link to the file on One drive or other cloud based service. DO NOT include
the file when you do the assignment in Canvas.

THEN create folders at w3spaces like this:

From the root folder: mis3371

From that folder: homework1
In that folder...

Create an initial html file called patient-form.html.

Specifics of the form...

You need to have a comment block in the top of file:

<!--
Program name: patient-form.html
Author: Your Name as it is in the UH roster
Date created: Date you started it
Date last edited: The date you submitted it
Version: (start with 1.0 and change it as you make changes)
Description: a brief summary of what the document is.

You will need to design the following on/in your form page:

Customize the form with a company name/banner that appears at the top of the page in
a separate division.
The banner needs to include the web client's day and date. e.g. It needs to have at least
1 graphic logo/design element in it.
DO NOT reference external logo files.
Save this logo as a jpeg, png, etc… and make sure to upload it to w3spaces.

ADJECTA Medical today is: Wednesday, Sept 21st, 2022 (must be

dynamic via in-line javascript)

================================================================
> You MUST use cascading style sheet entries to choose a font face and color that is
NOT the default, for both the heading and the body of your page.

Do not include any css code in your HTML file. Instead, make an EXTERNAL css file to
refer to in your html document,
similar to: <link href="style.css" rel="stylesheet">

This means you will create a file called "style.css” in the SAME FOLDER at w3spaces
and reference that in your HTML file you already created.
The CSS file must ALSO have the same sort of comment block in the top!

Mininum requirements for the CSS entries:

Choose something other than a default color for the background.
Choose specific fonts and colors for the headings, body text, footer, etc, hyperlinks and
visited hyperlinks.
Make selector entries based on html tags, classes, ids and names.

================================================================

As for the FORM… for now, put it on your MAIN page.. later on, we will create a starting
page that has a Register/Login button that feeds to this form page you are creating…

You need to create a form as if you are asking a user to register to your website.
It needs to have every example of form elements. Check
here: https://www.w3schools.com/html/html_forms.asp

Use <TABLE> html structure to space things out on the screen

At the very least, the form needs to have these fields on it:

Text boxes:

First Name (max 30 characters.)

Middle Initial (1 characters, preferably on same line as first name)
Last Name (max 30 characters, preferably on same line as first name)
Date of Birth in MM/DD/YYYY format
Social Security (Do not use your real social when testing, 9 to 11 obscured characters.|
Address Line 1 (30 characters)
Address Line 2 (30 characters)
City (30 characters)
State

Preferably on same line with City.

Give them a dropdown box with all 50 states, DC and PR
Insert an Options list Snippet you find on the Internet)

Zip Code (5 to 10 digits, on same line as state, NOT a NUMBER field type)

Email address (formatted [email protected])

You also need a text area to describe something at least 3 lines by 50 columns.
If you went with medical, you can ask the user to describe their current symptoms.
If you went with Employment, ask the user to describe some of their better attributes.

Check Boxes (at least 1 section, of 5 or more choices)

example:

Check all of the following that apply:

Have you had:

Chicken Pox,
Measles,
Covid-19
Small Pox
Tetanus

Radio Buttons, at least 3 sets

e.g. Gender, Male, Female, Other
e.g. Have you been vaccinated. Y/N.
e..g Do you have insurance? Y/N

Slide bar, at least 1

e.g. On a scale of 1 to 10, 10 being feeling good, how is your health?

Add a text box for a desired user ID (20 characters max)

Add 2 boxes for a password and a re-enter password. Use the password attribute.
Password fields must be secret/hidden on the form, i.e. typing produces **** instead of
the characters.
Create 2 buttons for the form:

"CLEAR AND START OVER"

"Submit"

For now, just do a fake "form submit" that calls a NEW html file called “homework1-
thankyou.html” which includes your heading and footer and css except instead of the
form content, just write "Thank you for your submission." Later on, we will add some
javascript code and some server side code to do something with the form data BEFORE
we go to the Thank you page.

You also need to include a FOOTER on your page with at least 1 clickable element,
preferrably a button, such as "Contact Us". It doesn’t have to be a separate HTML file
yet but if you want to make it separate, then call it “footer.html” and then you can
reference it in ALL of your homeworks so you have a common footer…later on, we will
do this with the header too, so if you want, you can do a file called “header.html” now
and reference it in your main html file.

Footer example:

Adjecta Medical CONTACT US Some FB/Twitter/etc.. links

PO BOX 18881 <some image here>
Sugar Land TX 77496

YOUR DELIVERABLES will be ONLY LINKS to shared files from One Drive and/or urls
at w3spaces.
The assignment URL should look something
like: https://profjake.w3spaces.com/MIS3371/homework1.html
There should be NO NEED to upload files to Canvas.
JUST BE SURE THAT ALL YOUR LINKS WORK. Have a fellow student or friend check
your links.

DO NOT just copy and paste the URL from your address bar when you are logged
into w3spaces as that will try to take me to YOUR w3spaces dashboard which I
will not have access to. Reference the file by its actual path name like above.
==================================================================
=================
You will submit this in a Text box in Canvas..

NAME THE FILES LIKE THIS:

The Data Dictionary: mis3371-homework1

The Diagram:. mis3371-homework1.jpg, or mis3371-homework1.drawio

At w3spaces...
The main html file: /mis3371/homework1/index.html

The css file: /mis3371/homework1/style.css

This will be your cascading style sheet which you will reference in your HTML file.
If you have already put your styles in your HTML document, you can follow this link on
how to convert it to an external file: https://www.webucator.com/article/how-to-create-a-
css-external-style-sheet/

The HTML document MUST follow the HTML 5 standard with the appropriate tags in it,
i.e. DOCTYPE, SCRIPT, HEAD, BODY, etc... THIS will be your MAIN BODY of your
form. THERE MUST BE COMMENT LINES in this document at the top AND bottom as
well as throughout for clarity.

footer.html (optional)

Any image files you refer to that are not static on the Internet somewhere, i.e. you
downloaded them to your own computer in the same folder as your work.

MAKE SURE any references to local files are not preceded by any folder or drive
specifications like…
<img src=”somegraphic.jpg”>
and not
< img src=”c:\users\jake\Documents\somegraphic.jpg”>

Remember that ALL the files you reference by src= or rel= need to be at w3spaces
also. DO NOT eference any external URLs except for social media links or links to
OTHER pages.
Rubric
Everyone starts at 100 and will get 1 to 2 points off for missing or insufficient areas:

Well defined theme 1

Data Dictionary 1

Diagram 1
Comments in the code 1
Title in header 1
Company Name 1
Banner 1
Logo 1
Dynamic Date 1
CSS 1
Background 1
colors 1
Mix of Fonts or font changes 1
Footer with clickable element 1
Field Titles/Descriptions 1
properly designed form 1
Good Form Spacing and usage 1
Table 1
First Name (max 30 characters.) 1
Middle Initial (1 characters) 1
Last Name (max 30 characters) 1
Date MM/DD/YYYY 1
Social Security or obscured field 1
Address (30 characters) 1
City (30 characters) 1
State(dropdown) 1
Zip 1
Email 1
Phone # formatted right (if
1
present)
Text area 1
Check Boxes 1
Radio Buttons 1
Slide Bar 1
User ID separate from email 1
Password 1
Reset/Clear Button 1
Submit button checks html edits 1
Submit button goes somewhere 1