Creating a Patient Registration Form

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 OR better yet, a GITHUB 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:

My version of the above sample:

Bad example:

HW1 to get you started with proper heading and tabbing (limited form elements, i.e. very incomplete):

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:

Share this link to the file on One drive using the “copy link” method, 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:

Share this link to the file on One drive in the same way, the copy link methd, 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, create “mis3371”
From that folder: “homework1”
In that folder… (your url will look like …

Create an initial html file called “patient-form.html” or “index.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.

<image>
(MAKE UP A NAME) Medical today is: Wednesday, Sept 21st, 2022 (must be dynamic via in-line javascript)

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

> You MUST use a separate css file 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 except for very minor changes, i.e. to change 1 charactr. Instead, make an EXTERNAL css file to refer to in your html document,
similar to: <link href=”style.css” rel=”stylesheet”>

This link goes up in your “head” section of the HTML so the html file knows where to find the css file. Go look up how to use external css at w3schools.

This means you will create a file called, for example, “style.css in the SAME FOLDER at w3spaces and reference that in your HTML file you already created.
You can name the style sheet with the standard “style.css” name OR you can name it based on the Homework assignment name like, homework1.css BUT we recommend going with the industry standard. Just make sure your name the file that you reference in the LINK in the html file.

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 so we know you know how to use all the css selector methods,

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

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:

Use <TABLE> html structure to space things out nicely in the form with the input boxes aligned to look good.. NOT zigzaged down the page!

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 us 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 name@domain.tld)

You also need a text area to describe something at least 3 lines by 50 columns.
You could ask the user, for example, to describe their current symptoms.

Check Boxes (at least 1 section, of 5 or more choices)
example ONLY (come up with your own reasons/list to creae check boxes):

Check all of the following that apply:

Have you had:
Chicken Pox,
Measles,
Covid-19
Small Pox
Tetanus

Radio Buttons, at least 3 sets.

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

Slide bar, at least 1

FOR EXAMPLE: 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). Separate from the email address.

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

Create 2 buttons for the form to reset it and also to submit it:

For Example:

“CLEAR AND START OVER” “Submit”

Since this is client side only, your form tag will NOT INCLUDE a method. You are simply going to reference an HTML file called something like thankyou.html which includes your original heading and footer content 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 section (make it a <div>) on your page with at least 1 clickable element, preferrably a button, such as “Contact Us”. It doesnt 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 footerlater 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. Don’t worry about separate files for now, but DO make separate <div> sections for the top, middle and bottom of your page.

Footer example:

We’R’Docs Medical CONTACT US Some FB/Twitter/etc.. links
PO BOX 18881 <some litle image here optional>
Sugar Land TX 77496

YOUR DELIVERABLES will be ONLY LINKS to shared files (using the copy link) method from One Drive and/or urls at w3spaces or GITHUB.
The assignment URL that you copy into Canvas should look something like:
MAKE SURE it ends with “.html” an MAKE SURE the word “-preview” or “editor” is not in the URL.

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 can see this actual path in the w3spaces editor when you have the html file open, over above the output pane on the right side. You can expand the window and drag your mouse over that fully qualified URL name and CTRL-C it then CTRL-V it into canvas.

There should be NO NEED to upload files to Canvas UNLESS YOU MAXED OUT your w3spaces accesss per month. In that case, copy the html, css files and any images you used to a folder in one drive, like /mis3371/homework1/ and share that folder with us using the “copy link” method.
JUST BE SURE THAT ALL YOUR LINKS WORK. Have a fellow student or friend check your links. OR try to view this link in a GUEST BROWSER window.

In later homework assignments, I will show you how to migrate your files over to GITHUB which has more FREE options for hosting files.

===================================================================================
You will submit this in a Text box in Canvas..

NAME THE FILES LIKE THIS:
The Data Dictionary: mis3371-homework1.xlsx (or an image or pdf)

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

At w3spaces…
The main html file: /mis3371/homework1/patient-form.html
The css file: /mis3371/homework1/style.css
Any images you reference should also just be in the same folder.

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:

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:usersjakeDocumentssomegraphic.jpg>

Remember that ALL the files you reference by src= or rel= need to be at w3spaces also. DO NOT reference 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 Diagram	1 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 present)	1
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

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

END OF DOCUMENT: Homework 1

WRITE MY PAPER