Assignment 2: Introduction to HTML Forms

Assignment 2: Introduction to HTML Forms
- Preliminaries
- Learning Objectives

due by 9:00 p.m. EDT on SEPTEMBER 16, 2024

Preliminaries

In your work on this assignment, make sure to abide by the collaboration policies of the course.

If you have questions while working on this assignment, please post them on Piazza! This is the best way to get a quick response from your classmates and the course staff.

Learning Objectives

After completing this assignment, students will be able to:

Create an HTML form to collect inputs via a Web Browser.
Implement each of these form input elements: text box, radio buttons, check boxes, drop-down list.
Submit an HTML form, and have it’s results processed by a web application (you will write such a web application in a later assignment).
Use CSS to beautify your web page and HTML form(s).

Task 1: Writing an HTML Form

In this task, you will create an HTML form to implement a simple survey questionnaire. The subject matter of the survey questions is entirely up to your choice. The survey must contain one or more of each of these form input elements: e.g., text box, radio buttons, check boxes, drop-down list.

Here is a sample output (in the web browser):

Your goal is not to reproduce this exact form, but rather to create a form on a subject that interests you.

Use VS Code to create a new HTML file, and save it with the special name survey.html. As you develop your web page, get in the habit of including comments to explain each major section, and make notes to explain anything that is confusing.

Form Submission

The most challenging part of the form will be submitting the form to the server for processing. Work on this first! Create a simple form with a single text box for the respondent’s name and a submit button.

Submit your form to the web application located at: https://cs-webapps.bu.edu/cgi-bin/util/formmailer.py

We will discuss/demonstrate the form submission in class on Thursday 9/12.

In addition to the fields described below, your form must have a submit button (labeled “Submit”), and a hidden form field named mailto, which will contain your email address (i.e., so that the form submission will be sent to you as an email).

Additional Form Fields

Make sure you get part 1 to work before you begin part 2! Add some text before the form giving the user instructions and describing what the survey will do.

Your form should be neatly formatted with well-aligned cells. Use a <table> to wrap the form fields and get them to line up neatly.

Your form must ask several survey questions (as many as you like), so long as you use all of the following form fields:

A text box for the respondent’s name, but make it optional
A text box for the respondent’s Home City/Town
A drop-down list for the respondent’s State (Do not type this all in! Grab the code from http://www.freeformatter.com/usa-state-list-html-select.html)
Two questions that use radio-buttons (i.e., a 3-5 point scale or other) to collect mutually-exclusive responses
Two questions that use check boxes (i.e., yes/no or true/false or select all of the following) to collect multiple-select responses
A text area for “additional comments” or some other free-form input from the user
Styling the Web page and Form
Continue working with your CSS file styles.css from Assignment 1. Link this style sheet into the <head> section of your HTML file.
Use CSS elements to customize the display of the form elements with respect to fonts, sizes, margins, and padding to make the form visually appealing.

Task 2: Publishing Your Web Page

Transfer your files to the web server to get them to display on the public World-wide Web.

This task is illustrated in the example videos about publishing your web page. Use a file-transfer program (WinSCP or Fetch) to upload the files. Set the permissions accordingly, to UNIX code 755 (rwxr-xr-x). * Test by viewing your web page in the browser.

The page should be visible using this URL: http://cs-people.bu.edu/username/ where you replace username with your BU username.

Important Notes

The UNIX file system is case-sensitive with respect to file names. Your image file name and the src used in the image tag must agree, including the file extension. .JPG and .jpg are considered different!

Submitting Your Work

50 points; will be assigned by code review

Be sure to name your files correctly!

You must submit at least 3 files to gradescope:

Your survey.html file and styles.css file. Include any ancillary files (e.g., images) that you use in your web page.
A text file a2_url.txt, containing the URL to your web page, and nothing else. For example: http://cs-people.bu.edu/azs/survey.html.

This file will be used by the autograder to locate your web page, so you must get the URL exactly correct, and you must not include any other text or code in the file.

Notes:

Upload these files to Gradescope before the deadline.
When you upload, the autograder script will process your file(s).
You may resubmit as many times as you like before the deadline, and only the grade from the last submission will be counted.