Day 2
HTML Forms
How to create HTML5 Forms
Forms are one of the earliest examples of creating an interactive experience on the Web. Form elements, such as radio buttons, check boxes, text boxes and submit buttons have been around since 1993. To increase functionality add ons or plug ins were created, like Flash, and JavaScript. JavaScript acted as a safeguard in catching errors of omission. For example, a form was submitted and the user left off the email address, or their name, or address. JavaScript is and was used to catch those errors before the form was submitted. A web Designer, really needed to know how to code JavaScript to keep the forms from omitting essential information. HTML5 has included many of these needed features by using a few keystrokes. It is these form elements of HTML5 that we will be learning about in this tutorial.
Users interact with forms by using controls that are put on the form. Examples of these controls include text boxes, radio buttons, check buttons, submit buttons.
Here is an example of a text box control.
- First line tells browser that this is an HTML5 document
- Second line tells browser that English is the language to be used
- The third line is the <head>. It is the beginning head tag
Fourth line sets up the character set to be used - Next line holds the <title> and </Title> of the document
- The ending </head> is the end of the heading tags
- The next one <body> defines the beginning of the body of the document.
- You have two form tags and beginning<form> and ending tag </form>
- The user enters their first name into the text box
- The user then presses the Submit Form button and the first name is submitted.
- Now it is not quite this simple. In the Components of a Form section, we will learn how to direct the information being sent.
- Any information that is entered onto the form between the form tags will be submitted.
- The last two tags are ending tags - </Body> and </html>
- If you copy and paste the code above into Notepad++ save as an html type, run, and launch in Chrome, Firefox or Internet Explorer you will see what the user sees on the web site.
Components of a Form
- When keying in the beginning form tag, a name for the form must be determined.
- <Form Name="jobApp" ACTION=http://www.janetbelch.com/cgi-pub/FormMail/ method=post>
- In this case the form name is JobApp
- The next part of the code is the action section. It calls up the URL that houses the CGI form mail script.
- This information needs to be provided to you by the company that is hosting your site.
- Make sure that when looking for a host, that they provide CGI scripts for form mail and that the customer service is easy to obtain.
- I use Prohosting.com. They offer excellent service with the cgi scripts and prompt phone service at about $20.00 per month.
- If you do not have form mail on your site, feel free to use the code above. All that will do is to send me the information contained on your form in an email.
- Some of the Free sites do not off form mail scripts and you will have to arrange with a third party vendor to provide this very important function for you.
- There is another way, using javaScript that this form mail can be executed, but it does not support a number of things that we will cover in this tutorial
- If you use the code above, all that will happen is that the information on your form will be sent to my hotmail account, <input type=hidden value=jerry@janetbelch.com name= recipient>
- the line above goes just under the submit button line of code.
Day 5 and 6
Project 1
The image below shows what the finished product for this project should look like. The logo is in a cascading style sheet file called job.css. The .css file is currently located on our web site We will work with that file after we set up the input fields for the job application. This file tells the main file, your CompanyNameJobApplication.html file how to look. Your job application file is divided into a series of flexible boxes called: #big_wrapper, #main_section, #top_header, #new_division, #side_news, #the_footer.
Figure 1
- You will be coding the top portion of a job application in HTML5
- We first need to make a copy of the template for this project and the other projects that follow
- You will be writing code for the following fields on a job application.
- Take out the job application that you printed out when collecting materials.
- We will be working with the following fields listed below.
- Company Name
- Last Name
- First Name
- Middle Initial
- Date of Application
- Address
- Apartment Number
- City
- State
- Zip Code
- Email Address
- The information above is in a table
- There two fields for each row in the table.
- Put the information below on the clipboard, Type CTRL C to copy the information
- Open a new file in Notepad++ and paste it in
- Save the file as type .html
Figure 2
<td><label for="lastname">Last Name</label><br><input id="lastname" type="text" autofocus name="lastname"
placeholder="Last Name" required size="12"></td>
Day 9 and Day 10
Project 2
- Now it is time to add another section to our job application project.
- Load in the file from project 1 - CompanyNameJobApplication.html
- Locate the line where the user inputs an email address.
- We want to add to our table just beneath this line.
- Remember we have ten items to add - 5 cells down two across.
- Set up the input fields in a table for:Date Available, Monthly Salary Required - row one position applied for and U.S citizen - row 2 Authorized to work and have you ever worked for this company before - row 3 Dates worked for this company and job title - row 4 Convicted of a felony and reason - row 5
- Save your work, test it and call your instructor to have this project signed off.
- Your finished project should look like this.
Day 12 and 13
Project 3 In this project you will add to yourCompanyNameJobApplication
file the education portion of a job application.
- Look at your printed out job application
- You will create a series of tables to hold the information
- You will enter code for the following fields:
- High School Attended
Address of the high school - Beginning date of high school
- Ending date of high school
- Graduate yes/no
- College attended
- Address of college attended
- Beginning date of college
- Ending date of college
- Graduate yes/no
- Degree obtained
- Other educational institution attended
- Address of other educational institution
- Beginning date
- Ending date>
- Graduate yes of no
- Degree earned
- High School Attended
- Start a new table just after the section on explain the conviction
- When finished,save the file under the same name, test it out in Chrome
- When satisfied with the way it performs, call your instructor to have it signed off on your check off sheet.
Executive Officer:$90,000 per year
Oversees and directs the company: Responsible for managing and leading the business planning process; Implements our company goals and department policies; Coordinates department tasks; Significantly oversees and contributes to the writing of our Business Plan and Annual Reports; Represents our company at all business functions and Oversees the legality of all actions in the company.
Chief Financial Officer:$80,000 per year
Manages the Accounting Department; Delegates responsibilities to members of the Accounting Department; Formulates and directs the company's overall financial plans and policies; Creates, interprets, and reports on weekly, monthly, and yearly financial reports; Determines company's operating expenses; Reconciles Bank Accounts; Manages employees in Accounts Receivable, Accounts Payable, Payroll and Bank Branch Manager.
Vice President of Sales:$65,000 per year
Responsible of assisting in the management,creation, and implementation of the marketing strategy for the company through a business, technical and sales perspective; Researches, creates and presents the VE Contract; Initiates and manages discussions and sales with other companies; Negotiates agreements concerning large company sales contracts' Oversees the company's Sales department; Analyzes sales trends and recommends aggressive sales strategies in order to maximize company profit.
Vice President of Marketing:$65,000 per year
Develops the company's marketing objectives,(including Target market and Marketing mix, etc.); Effectively implements the company's strategic marketing plan; Researches and determines the company product and service line. Conducts weekly department meetings to distribute tasks and adjust the company's product line to maintain our competitive edge; Recognizes and reacts to industry trends to maximize profits; Creates and maintains and submits to our IT department our company's product line.
Vice President of Advertising:$65,000 per year
Directs the development and implementation of the company's advertising strategy through the promotion of the company's products and services via creative, attractive, and effective advertising campaign; Assists in the design of the Business Plans and Annual Report, (both written and electronic); Oversees the creation and preparation of the company sales catalogue, bi-weekly advertisements; special advertisements, trade fair ads and all sales materials; Oversees the creation of each employee's business card and name badge; oversees the creation of posters for the office and trade fair booths.
Vice President of Human Resources:$65,000 per year
Manages the Human Resources Department: Creates, manages, and controls all personnel files; Addresses and participates in all aspects concerning personnel hiring, reprimands, and termination's; Maintains employee attendance and leave records; Establishes and monitors individual employee improvement plans; Determines payroll and withholdings; Manages the employee health insurance program; Creates and updates the Employee Manual; Monitors employee compliance of company policy; Oversees and assists in maintaining the company newsletter and company photo album.
Vice President of Information Technology (CTO):$65,000 per year
Oversees the creation and maintenance of the company's web site; Supervises and gives direction to the web development team; Coordinates with Marketing Department to include all product; weekly updates to include special offers; Posts HR interest stories on web site; Creates links for our Business Partners; configures the online shopping cart; Assists staff with computer related issues; Trouble-shoots technical issues.
Administrative Assistant:$65,000 per year
Creates company reports; Oversees administrative procedures; Compiles and submits Quarterly Task reports to the Virtual Enterprise Coordinator; Schedules meetings and prepares agendas; Edits company reports; Manages the company's email; Assists in the management of the company's web orders; Maintains the company's Work Samples binder; maintains company's communication with Business Partners and Virtual Enterprise Central.
Event Planner:$45,000 per year
Coordinates all special company events, such as Trade Fairs, Grand Openings, Open Houses, etc; Oversees the design of our company booth and coordinating all needs for each trade fair. Coordinates all events, invitations, RSVP's and coordinating refreshments for each special event.
Sales Associate:$45,000 per year
Sells company products and services via email to potential customers; Researches and reports on new and inventive products/ services that could prove profitable for the company; Assists in sales training of additional staff when necessary for Trade Fairs, Grand Opening and other events.
Marketing Associate:$45,000 per year
Researches and assists in the determination of the company product and service line; Assists in maintaining the company's product/service line on our web site; Conducts weekly research to locate new and innovative products/services; Makes recommendations to management to add new offering to the companies line.
Advertising Associate:$45,000 per year
Assists in the implementation of the company's advertising strategy through the promotion of the company products and services via creative, attractive, and effective ad campaigns; Assists in the creation and preparation of the company sales catalogue, weekly advertisements, trade fair advertisement ads and all sales materials including order forms.
Accounts Payable/ Payroll/ Accounts Receivable:$65,000 per
Accounts Payable/Payroll: Processes payment for all company expenses including payroll; Completes the monthly Accounts Payable report; Creates and processes purchase orders to restock inventory; Assists the Branch Banker in the creation of employee personal checks. Creates, manages, and processes payroll through our accounting program; Maintains hard copy files of accounting records.
Accounts Receivable: Process all company invoices through our accounting program; Makes receipt of customer payments; Follows up on outstanding invoices; Creates and reports at the end of each month, the status of accounts receivable; Resolves any incorrect customer payments.
Branch Banker:$65,000 per year
Establishes and manages the company bank accounts through CA US Network Bank; In-services all employees on the use of the US Network Bank and maintenance of their personal checking and savings accounts; Creates and manages the Visitor account through US Network Bank; Electronically transfers company expenses; Processes all company and employee checks to verify clearance through US Network Bank; Communicates with the Accounting Department concerning US Network Bank processing discrepancies; Completes a weekly report, which summarizes company and employee US Network Bank discrepancies.
Human Resources Associate:$45,000 per year
Assists in the creation and maintenance of all personnel files and benefits; Assists in maintaining employee attendance and leave records, creates documents and certificates for recognition of employee performance; Assists in the creation of our Employee Manual; Assists with the creation of the monthly company newsletter.
Web Designers:$45,000 per year
Creates and maintains the company's web site; Updates web site bi-weekly to include special offers; Posts human resources interest stories to web site; Configures and modifies the online shopping cart to reflect current specials; Assists the Advertising Department with ads for the company web site.