Homework on Flask Forms

Collecting data from the user almost always involves a web form, so this is central to CS 304. This assignment ensured that everyone has mastered basic, accessible web forms. We'll do this using Flask, so this is your first Flask assignment, but it won't involve connecting to the database.

My Solution

Feel free to visit my solution. From off-campus, you should use the VPN to access those.

Note that I provided an example solution so that you could be clear on what is expected for this assignment, but I don't want to grade my own HTML and CSS. Please be creative and unique; don't just copy my HTML and CSS. Furthermore, I've done things a little differently (e.g. external CSS file, a different action of the form), so you should not just copy/paste.

Goals

The goals of this assignment are:

  • Your first Flask app!
  • Writing some HTML in a static template file
  • Writing some CSS, in the same file
  • Writing a web form that works

Time

Historically, this takes almost everyone less than 6 hours to complete. If it's taken you that long and you're not done, stop and get some help.

Structure

Your solution will be in a folder called forms in your assignments folder.

Your python code will be in a file called app.py in the folder.

In Flask, the template files live in a subdirectory called templates, so you'll create such a subfolder and put your form file in there.

Route

Your route in your app.py file will look like this:

@app.route('/')
def index():
    return render_template('name-of-your-form.html')

Forms

Each person/team will prepare a web page with a form. The form should pass the HTML, CSS and WAVE validators. You'll use Flask, so the form will be a template file.

  • put all your work in a folder called assignments/forms
  • The route must be /.
  • Write a little something at the top of the page, maybe about yourself or some interest of yours. It doesn't have to be a lot, but use some HTML tags to structure the content. I'd like you to show that you know the basics of HTML.
  • Use a little CSS to make your pages look prettier and to show that you understand the basics of CSS.
  • The page should have a form to fill out. You can use any form you like; feel free to have fun with this. It could, for example, be a form that is related to a project idea. It could be a form to do a survey on some important or whimsical topic.
  • The form must be accessible, meaning that each input should have a proper label so that the form is accessible to all people, regardless of handicaps. See beginning forms
  • We will test the page for HTML validation, CSS validation, and WAVE validation, using the tools described in the online notes. For full credit, it must have no errors from any of these three tools.
  • Use as many different kinds of inputs as you can, so that you can get experience with them. There must be at least two though: text inputs, and pulldown (select) menus, since those are crucial.
  • The form data should go to https://cs.wellesley.edu/~cs304flask/cgi-bin/dump.cgi That will allow you and me to test your form. (You should use the entire URL.)

CSS

In this assignment, you are to write some CSS to style your page. You need not become a CSS expert, but you should have some passing familiarity with most of the following:

Towards that end, I require that your CSS include examples of all of these:

  • tag selector
  • class selector
  • ID selector

You can follow the links above to learn more. That is, you must use a type/tag selector, an ID selector, and a class selector, and style the color, background-color, margins, border and padding of some elements.

Since we don't yet know about how to include static files, you should put your CSS in the HEAD of your file using a style element, like this:

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>some title</title>
  <meta name="author" content="names of both your team">
  <!-- for mobile-friendly pages -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
      /* your CSS here */
  </style>
</head>
<body>
   <!-- your HTML here -->
</body>
</html>

Validation

We talked about validation in the reading on accessibility. I won't repeat that here, but I will remind you that with Flask you'll have to use the "direct input" mode of validation for both the HTML and CSS validators, because the validators can't get past the campus firewall to validate by URL. The direct-input modes are here:

(Because your CSS will be in the HTML file rather than in a separate CSS file, you won't actually need the CSS validator for this assignment. You will in future assignments.)

So, once you've started your flask app and viewed it in the browser, the validation procedure is like this:

  1. Do "view source" (option-command-U in Chrome) to see the HTML source
  2. Select all the source (command-A on a Mac; control-A on Windows)
  3. Copy the source (command-C on a Mac; control-C on Windows)
  4. switch to the validator (load it into another tab using the links above)
  5. Paste the course (command-V on a Mac; control-V on Windows)
  6. Click on the "check" button

If that shows errors, revise your template, reload your app, reload your browser page, and repeat.

WAVE Testing

I encourage you to use the WAVE test on your form as well. (I should probably make that a graded requirement.) Running the WAVE test is very easy.

  • First, install the WAVE plug-in to your browser. That takes a few minutes and only needs to be done once.
  • Then, you can run the WAVE test on the current browser tab just by clicking the icon.

Testing Your Code

You should, of course, test your code to make sure that the web form both works and looks good.

Submitting Files

Gradescope will allow me to comment on your code in a convenient way, but only if you upload the files, rather than a PDF. For that reason, I've converted it to a "programming assignment" even though I'm not using an autograder. However, I will be running your code, so I'm also asking you to drop a copy to the course drop folder.

You can upload your files in a variety of formats, but I think the easiest is as a Zip file. So, you'll have to do the following steps:

  1. on the CS server, create a zip file of your folder
  2. drop the zip file to the CS304flask account
  3. copy the zip file to your laptop
  4. upload the zip file to Gradescope.

Here's how to do the first two steps.

Step 1, to create a zip file on the CS server:

cd ~/cs304/assignments/
zip -r forms.zip forms/

Step 2, drop the zip file:

drop cs304flask forms.zip

Step 3, on your laptop, open a terminal. Note, not using VS Code remote development, but either "Terminal" (Mac) or PowerShell (Windows). There's also a plain terminal in VS Code, but be sure you aren't using remote development.

scp youracct@cs.wellesley.edu:~/cs304/assignments/forms.zip .

Don't forget the space-dot at the end!

Step 4, upload that zip file to Gradescope.

Checklist

Make sure you:

  • have a working flask application
  • have a working form
  • submitted to the right place
  • with some CSS: selectors and properties
  • no HTML validation errors
  • no CSS validation errors
  • no WAVE errors
  • dropped your zip file
  • uploaded your zip file, and
  • filled out the time and work form (see below).

Time and Work

The following link has been updated for Fall 2025.

Finally, when you have completed the assignment, make sure you fill out the Time and Work Fall 2025 That report is required.