This week we are covering two chapters in the book. Chapter 8 is about tables and Chapter 9 is about forms. In the lab for this week you will add both a table and a form to your portfolio website.

HTML Tables

A table has rows and columns, and looks like this:

As you would expect, the top row of the table explains what you will find in each column. By default, the text in the top row is bolder than the other rows.

To code tables, you need four new elements. The columns are called “cells” and are inside of the rows.

• <table> table
• <tr> row
• <th> header cell
• <td>table cell

The code for a table looks like this:

<table> 
  <tr> 
    <th>Instruments</th>
    <th>Range</th>
    <th>Relative</th>
  </tr>
  <tr>
    <td>Piccolo</td>
    <td>High</td>
    <td>Flute</td>
  </tr>
  <tr>
    <td>Bassoon</td>
    <td>Low</td>
    <td>Oboe</td>
  </tr>
</table>

Use the <table></table> tags around the entire table. 

Use the <tr></tr> tags to start and end a row inside of the table.

Use the <th></th> tags to create a header cell in the row.

Use the <td></td> tags to regular cell inside of the row. 

The image below demonstrates what the code is doing. As you can see the <table> tags go around the entire table, the <tr> tags around each row, and then there are <th> or <td> tags around each cell in the row.

CSS for Tables

A table without any CSS would look like this in most browsers:

As you can see, there are no border lines on the table cells. We will fix that by adding a border to the cells with some CSS:

th, td{
   border: 1px solid #000000;
}

Note that we need to add the border to both the header row cells <th> and the regular cells <td>. The result of adding the border lines looks like this:

Yikes! That doesn’t look too pretty! We need a bit more CSS at a minimum to make the table look nice. We need more spacing (padding) and we need to remove the lines in between each cell. We do that with the border-collapse property. Putting it all together, the minimum CSS for a table would be something like this:

table{
   border-collapse: collapse;
}
th, td{
   border 1px solid #000000;
   padding: 10px;
}

There is a lot more that we can do to style tables, as you will see in the video and exercise below. You can even add images to tables!

Video Demonstration: HTML Tables

Exercise: Tables

1. Open JS Fiddle
2. Create a table with one header column and two rows using:

<table><tr><th><td>

3. Add a border to the table and the cells in CSS by selecting td and th
4. Add: border-collapse: collapse; to the table in CSS
5. Style the table header (th)

You can also insert other HTML elements inside a table cell, like images or another table. You can also style each row or cell separately by adding classes to specific cells. Here is an image link if you would like to try inserting an image.

Here is a 200 x 200 pixel image link: 

https://webdevstudents.com/wp-content/uploads/2021/02/axolotl.jpg

Your JSFiddle should look something like this, but with your own colors and content.

Keep your JSFiddle handy because you will be able to use it for the lab assignment.

About Tables

How Developers Use Tables on Websites

Tables aren’t generally used on websites because they aren’t responsive and don’t fit well on smartphone. Half of websites are viewed on a smartphone, making most tables obsolete. However, small tables that can fit on a mobile device (less than 300px in width) can still be used. 

Tables can still be used on desktop or tablet-only applications. For example, if a website is for internal use only and all users use tablets or desktops, tables could be used for internal reporting.

Bootstrap and other responsive website techniques that stack content replaced the need to use tables for positioning. Working in tables has been replaced with grid systems. Grid systems allow you to create content that stacks on mobile. Bootstrap is the most commonly used grid system and we will learn Bootstrap starting with Module 11.

HTML Email and Tables

Even though tables are never used for website layout, they are used extensively for HTML email. The coding of HTML emails is almost shocking…HTML email developers use tables nested inside of tables. HTML tables seem to be the only way to position HTML email so that it works across email clients.

I have seen at least a few entry-level jobs for HTML email developers. The coding is rather tedious, and so it could be your foot into the door of a programming shop. The coding is challenging because each email client (eg. Gmail, Outlook, MacMail) interprets the code differently. So you may have an email that looks great in Gmail, but is a mess in Outlook.

If you ever need to create an HTML email, Tuts Plus has a great tutorial on it: HTML Email Tutorial.

If you want to send out broadcast emails, MailChimp has a generous free level. MailChimp, or any email service, will provide you with a form to use on your website to capture subscribers.

Forms: Client Side and Server Side

The other big topic in this module is forms. To understand the coding of forms, you need to know both a server-side language and a client-side language. This course only teaches you the client-side languages: HTML, CSS and JavaScript.

So, what is a server-side language? Let’s look at a form example. Here is the form for more information on Saint Paul College. Go to this link – https://www.saintpaul.edu/wtce/contact-us – and scroll down to the form. 

Don’t submit the form, just look at it.

What would happen if you were to hit the SUBMIT button?

If you were to hit the SUBMIT button the server would the following would happen:

1. The server sends a message back to the you on the screen, eg. “Thank you for submitting the form. We will be in touch.”
2. The server sends an email to the person responsible for taking action on your message. 
3. The server may send an email to the person who submitted the email.
4. The server adds a record to a database.

These examples are all handled in server-side programs. The form itself is the client-side. The table below may help to explain the difference between client side and server side.

Client Side	Server Side
The HTML form itself	The processing of the form
Front-end developers create the visible part of the form.	Back-end developers work on the server-side processing of the form.
The form is created in HTML and styled with CSS. Some forms also have some JavaScript processing.	The processing is created in a back-end language, like PHP or the .NET framework.
The user fills out the form.	The server processes the form when the user hits the submit button.

What are forms used for?

• Contact Forms
• Search of a database or a website
• Placing an order at an online store
• Subscribing to a newsletter
• Online calculators

The server-side languages do not use the .html extension. They use other extensions, like .php or .asp.

This image may help to explain the server-side vs. the client-side.

The form is made on the client-side in HTML. When the submit button is hit, a server-side PHP script sends a message back to the form submitter.

Note to Saint Paul College Students: This course (CSCI-1450) only teaches the Client Side of a form, not the Server Side of the form. Take CSCI-2442 in the fall to learn Server Side coding, including the languages PHP and MySQL. These classes are part of the Web Development Certificate.

Even though this course isn’t teaching you the server-side programming required for forms, there are free form tools available online that you can use on your websites. These online tools can help you bridge the gap until you learn server-side form processing. Even if you learn server-side form processing, you still may benefit from using these online forms. These online forms will have very strong security, and security is a major part of server-side processing.

• Surveys: https://www.surveymonkey.com/pricing/
• Newsletter Signups: https://mailchimp.com/pricing/entrepreneur/
• Contact and other forms: https://www.jotform.com/pricing/
• https://formspree.io/plans

HTML Forms

Here is the code for a simple HTML form to collect email addresses.

<form>
   Email: <input type="email">
   <input type="submit">
   <input type="reset">
</form>

This code creates a simple email form that looks something like this:

As you can see, an HTML form starts and ends with the <form> tags. We will place form fields inside of the <form> tags.

The most common form tag is the <input> element. It is a self-closing tag.

The <input> type Attribute

The <input> element requires an HTML attribute that specifies what type of form field it will be. This form has three different attributes.

Here is a short list of the most common type attributes:

• type=”text” is used for regular text fields, like name and address. 
• type=”email” is used for email addresses and the browser will check to see if an email address is entered.
• type=”submit” is used to submit the form.
• type=”reset” clears the form
• type=”password” hides the field

More <input> Attributes

In addition to the type attribute, here are the most common input attributes. Of these three, the name is the most important. Without the name attribute, the form won’t process, because that is the link to the server-side code. 

name: the key in a key/value pair sent to the server (required for form processing)

id: used for javascript, usually the same as the name field. This field is required for the form label. I generally give it the same value as the name field.

placeholder: text that displays in the field before typing. This one is optional, but can be very helpful to the form user.

With the name, id and placeholder, the <input> code looks like this:

Email: <input type="email" name="my_email" id="my_email" placeholder="Enter your email address">

The back-end developer will tell you what to use for the name attribute. In order for the form script to work, the HTML form name must be what the script is expecting it to be named. Note that the name value uses an underscore instead of dash. That is because the name field is going to be used in another language. A common server-side programming language is PHP, and PHP uses an underscore instead of a dash between words.

Form Labels

It is important for you to use a field <label> so that screen readers can read the form fields. The code looks like this:

<label for="first_name">*First Name</label>
<input type="text" name="first_name" id="first_name" >

Note that in the example above, “first_name” is used for the for, name, and id attributes. Screen readers link the label for attribute to the input id attribute, so it is critical that the for and the id have the same word. To make it easier, when I create a form field I use the same word for the for, name, and id. (I then use the same names in the database table, and in the PHP I use the same word for the variable names, but with a $ in front of it, like $first_name. By using the same word, I make it easier to avoid making errors and I can cut and paste code more quickly.)

The <form> Attributes

The <form> also requires two attributes, an action attribute and a method attribute. In the code below, note the additions in the opening <form> tag.

<form action="submit-form.php" method="post">
   Email: <input type="email" name="my-email" id="my-email" placeholder="Enter your email address">
   <input type="submit">
   <input type="reset">
</form>

The action attribute, in this case, “submit-form.php” is used to call a server-side program when the submit button is clicked.

The method attribute has two options.

• method=”get” – default value-form data passed in url
• method=”post” – more secure- form data passed in http entity body

We will use method=”post” for the lab. The action URL’S will be provided. The action urls use a published PHP script. 

Know some programming? We will be using the a PHP script for processing the lab assignment. Here is a screenshot of the code:

When you attach this action attribute, you are calling the code in this script. Note that the PHP is embedded in the HTML with <?php ?> tags. First the captured fields are turned into variables, then the variables are displayed back with “echo”. If you know other programming languages, “echo” in PHP is like “print” in other languages.

Demonstration Video: Form HTML

Exercise: Simple Form

You can do this exercise in JSFiddle or in your Website Template.

Step 1: Let’s add the form tags and its attributes.

• Use this action: action=”https://webdevstudents.com/portfolio/submit-form.php”
• Use the Post method: method=”post”

Step 2. Let’s add some fields to this form.

Here is the first form field to get you started: 

<label for="first_name">*First Name</label>
<input type="text" name="first_name" id="first_name" >

Add a last_name, email, and phone fields. Use these exact names for the id, name, and for attributes. The PHP script will be looking for these exact words.

• first_name
• last_name
• email
• phone

Add some <br> tags so the form lays out nicely.

Place the submit and reset fields at the bottom. 

Your JSFiddle should look like this:

Fill out and submit your form. These are the fields the form action recognizes:

• first_name
• last_name
• email
• phone

If you wrote the code correctly, you should see the four entered fields back on the screen:

CSS for Forms

We need some new CSS selectors in order to differentiate between the types of form fields. 

Here is the CSS to add a red background color to the submit button:

input[type=submit]{
   background-color: red;
}

Why is the syntax type=submit instead of type=”submit”?  Because this is the CSS language, not the HTML language.

Video Demonstration: Styling Forms with CSS

Exercise: Styling Forms with CSS

You can add styles to the type attributes to distinguish between submit, cancel, and other types of inputs. 

1. Add some CSS styles to the <input> fields.
2. Add a red background color to the submit button.

Your JSFiddle should look something like this:

Special Form Fields

As you probably know from forms you have filled out, there are many more types of form fields. Here are some additional types we are going to study:

• Use <textarea> for larger blocks of text.
• Use <select> and <option> to make a dropdown list.
• Use <input type=”checkbox”> for checkboxes.
• Use <input type=”radio”> for radio buttons.

<textarea></textarea>

A <textarea> field looks like <input type=”text> except that the person filling out the form can write a longer response. You use <textarea> instead of <input type=”text”> when you want the form user to write a longer response, like a sentence or a paragraph.

Just to keep you on your toes, <textarea> is NOT a self-closing element.  

The code looks like this:

<label for="comments">*Tell us what you think! </label> <br>
<textarea id="comments" name="comments"></textarea>

Checkboxes

Checkboxes, surprisingly, use the <input> with a type of checkbox. The code for a set of checkboxes looks like this.

<form action="">
  <input type="checkbox" name="degree" value="Design">Design<br>
  <input type="checkbox" name="degree" value="Programming"> Programming<br>
  <input type="checkbox" name="degree" value="Other"> Other<br>
  <input type="submit" value="Submit">
</form>

Note that the value attribute is different for each checkbox. The value is what is saved to the server. The name attribute is the same for all the fields.

Radio Buttons

Radio buttons, like checkboxes, use the <input> with a type of radio. The code for a set of radio buttons looks like this:

<form>
  	<input type="radio" name="color" value="blue" checked> Blue<br>
  	<input type="radio" name="color" value="yellow"> Yellow<br>
  	<input type="radio" name="color" value="red"> Red
</form> 

Just like with the checkboxes, the value attribute is different for each radio button. The value is what is saved to the server. The name attribute is the same for all the fields in the set.

Dropdown Lists

To create a dropdown list, you need to use two HTML elements…the <select> overall, and the <option> for each choice. The code looks like this:

<select>
  <option value="">Select One</option>
  <option value="otter">Otter</option>
  <option value="deer">Deer</option>
  <option value="giraffe">Giraffe</option>
</select>

Lab Assignment

If you are in the CSCI1450 course you have been doing the Pacific Trails lab from the textbook. That lab assignment is like following IKEA instructions, where you need to follow each step exactly or risk having a problem in the future. Going forward, there won’t be step-by-step instructions. You need to apply the HTML and CSS you have learned in class to develop your homework.  Part of your lab grade will be your effort to style your website. 

In real life coding, there aren’t step-by-step instructions. That is why programming careers are so much fun, and also why they pay well. Most students use the portfolio we will start in this module as their final website project, which we will publish on Github. Your audience is potential employers.

When I teach this course at MinnState, and when the course calendar permits it, we have a review week in between Module 6 and Module 7. The lab assignment for that week is to clean up the Website Template, to get ready for Module 7. Even if you aren’t taking the college course, you may want to do the Template Lab before starting Module 7.

Template Lab

Lab Assignment Module 7