Emily Kauffman

Back to teaching

CIS 275 Lecture 6: Forms

Goals

  1. How to create a form on your website
  2. Tools for collecting data
  3. HTML5 form controls

Review

  1. Basic structure/syntax, images, hyperlinks, tables
  2. Issues: extra spacing in elements, indentation, missing ending tags, broken links (use relative, not absolute for same page), incorrectly named files
  3. Ask me if you have questions on the feedback!
  4. Exam will be on February 18. Follow the syllabus, not what I say!

Forms

  • Refers to different HTML elements that allow you to collect information from web site users
  • Best known form on the web?
  • There are a number of form controls that allow you to collect information in different ways.
  • We're going to go over a subset of form controls. To see all of them, check this out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input. Be sure to check browser support!

How do Forms Work?

Steps:

  1. User fills in information using the form controls
  2. User presses the submit button
  3. The name of each form control is sent along to the server along with the value the user enters or selects
  4. The server responds with whether or not this succeeds. It could also send a success/failure page.

The reason it collects control name and value is so that the server knows which inputted piece of data corresponds with which form element.

Example: firstName=Emily, email=ekauffman@washjeff.edu


Form Structure

  • Forms live inside the form element.
  • Every <form> element requires an action attribute.
  • Action value is the URL for the page on the server that will receive the information when submitted.
  • Forms can be sent using one of two methods: get or post
  • get - values are appended to URL specified in the action attribute
  • Use get for short forms (search boxes), retrieving data from the web (not submitting)
  • post - sent using HTTP headers
  • Use post when form involves uploading a file, contains sensitive data, adds/deletes information from a database
  • If not specified, forms will use get
<form action="submit.php" method="get">
	<p>Form controls go here</p>
</form>

Text Inputs: text (single-line), password, textareas (multi-line)

<form action="submit.php" method="get">
	<label> Full name:<br/>
		<input type="text" name="fullName" />
	</label>
	<label>Password:<br/>
		<input type="password" name="password" />
	</label>
	<label>Description:<br/>
		<textarea name="description"></textarea>
	</label>
</form>



Making choices: radio, checkbox, drop-down boxes

<form action="submit.php" method="get">
	<label>Please select your favorite genre:<br/>
		<input type="radio" name="genre" value="rock"> Rock
		<input type="radio" name="genre" value="jazz"> Jazz
		<input type="radio" name="genre" value="pop"> Pop
	</label>
	<label>Please select your favorite genre:<br/>
		<input type="checkbox" name="genre" value="rock"> Rock
		<input type="checkbox" name="genre" value="jazz"> Jazz
		<input type="checkbox" name="genre" value="pop"> Pop
	</label>
	<label>Which streaming service do you use?
		<select name="devices">
			<option>I don't use one</option>
			<option value="spotify">Spotify</option>
			<option value="apple">Apple Music</option>
			<option value="pandora">Pandora</option>
		</select>
	</label>
	<label>Which streaming services(s) do you use?<br/>
		<select name="devices" multiple="multiple">
			<option>None</option>
			<option value="spotify">Spotify</option>
			<option value="apple">Apple Music</option>
			<option value="pandora">Pandora</option>
		</select>
	</label>
</form>

Displays as:





Submitting forms:

You can either use an input with a type "submit" or a button with type of "submit".

<!-- option 1: input -->
<form action="submit.php" method="get">
	<label>Subscribe to our email list: <br/>
		<input type="text" name="email" />
		<input type="submit" name="Subscribe" value="Subscribe" />
	</label>
</form>
<!-- option 2: button -->
<form action="submit.php" method="get">
	<label>Subscribe to our email list: <br/>
		<input type="text" name="email" />
		<button type="submit">Subscribe</button>
	</label>
</form>

Displays as:


Other controls:


Labels

Each form control should have its own <label> element to make the form accessible. Two ways to use a label:

  1. Wrap the label around the input:

    <!-- method 1 -->
    <label>Age: <input type="text" name="age" /></label>
  2. Keep the label separate from the input and use for and id attribute to associate them:

    <!-- method 2 -->
    Please select your favorite genre:<br/>
    <input id="rock" type="radio" name="genre" value="rock">
    <label for="rock">Rock</label>
    <input id="jazz" type="radio" name="genre" value="jazz">
    <label for="jazz">Jazz</label>

Grouping Form Elements

Group related form elements together.

<fieldset>
	<legend>Music Details</legend>
	<label>Please select your favorite genre:<br/>
		<input type="radio" name="genre" value="rock"> Rock
		<input type="radio" name="genre" value="jazz"> Jazz
		<input type="radio" name="genre" value="pop"> Pop
	</label>
</fieldset>

Displays as:

Music Details

Form Validation

Form Validation was traditionally done by JavaScript, but HTML5 introduced some validation. At first, not all browsers supported it. Most do now: https://caniuse.com/#feat=form-validation It's done by adding attributes to form controls:

  • required - Specifies whether a form field needs to be filled in before the form can be submitted.
  • minlength and maxlength - Specifies the minimum and maximum length of textual data (strings)
  • min and max - Specifies the minimum and maximum values of numerical input types
  • type - Specifies whether the data needs to be a number, an email address, or some other specific preset type.
  • pattern - Specifies a regular expression that defines a pattern the entered data needs to follow.
<form action="http://www.example.org/search.php">
	<label>Email:<br/>
		<input required type="email" name="email" />
	</label>
	<button type="submit">Subscribe</button>
</form>

In Class Exercises

We're going to review tables, lists, links, and then practice our forms. Today we'll work with a partner and do some pair programming. Choose one computer to do the work on, but switch back and forth who does the coding.

Some questions to ask yourself when you think you're done with each part:

  1. Does it validate?
  2. Are child elements indented?
  3. Are my images accessible?
  4. Do all of my tags have an opening and ending tag?
  5. Are element choices semantically correct?
  6. Is my text formatted correctly (strong, emphasized)?

Scenario: You and your friends have decided that this is the semester you're going to be organized. What better way to do so than to make a website to hold all of your papers and schedule?

Exercise 1: Home Page

  1. Make a home page for your website. Remember your conventions: home page should be called index.html.
  2. Set the title to "Home | My Organization Site".
  3. Add a main heading (level one) that says "Welcome to my Organization Site".
  4. Add a list of links to these sites: contact.html, schedule.html, and assignments.html (these pages don't exist...yet).
  5. Next, add a paragraph that includes a corny, positive phrase. You know. For motivation.
  6. Once completed, validate your code using the W3 Validator.
  7. Show me when you're done! It should look something like this: Screenshot of a home page

Exercise 2: Contact Page

You're anticipating that your website will be extremely successful and that people might want to reach out to you for help organizing their own lives.

  1. Create a new page and save it as contact.html. The title should read "Contact | My Organization Site".
  2. Add a list of links to match the one from index.html, but switch out the contact.html for index.html.
  3. Create a contact form. Set the action attribute to "" and the method to "post". We don't actually have a server here!
  4. Create a fieldset that collects the following: first name, last name, email, and age. Be careful to select the correct input field type for these types of data. Be sure to include all of the required attributes and label tags.
  5. The legend should read "About You".
  6. Make the first name, last name, and email required. You can test that your form validates by submitting with one of these fields empty.
  7. Create a second fieldset that collects a description of their problem. Additionally, collect one more type of information of your choosing, but use radio buttons OR checkboxes for it. The legend should read "Your Problem".
  8. Add a submit button that says "Send!".
  9. Validate your page! Show me when you're done. It should look something like this: Screenshot of the contact page

Exercise 3: Schedule

You want to keep track of your class schedule on your website.

  1. Create a new page and save it as schedule.html. The title should read "Schedule | My Organization Site".
  2. Add a list of links to the top that link to the home page, contact page, and assignments page.
  3. Add a style tag to the HEAD section that includes the following CSS:

    table, th, td {
    	border: 1px solid black;
    }

    Don't worry about learning this code - it just makes the table structure easier to see.

  4. Create a table that shows your weekly class schedule (and any other event you want to include). Pretend your classes start and end on the hour to make this easier.
  5. It should include at least one cell that has a rowspan or colspan set.
  6. Validate and show me! It might look something like this: screenshot of a class schedule by week

Exercise 4: Assignments

  1. For the homework due today, you had to markup three writing assignments for other classes. Take those and put them into the project workspace.
  2. Create a new page and save it as assignments.html.
  3. Add a list of links to the rest of your pages (contact, schedule, and home), just like you did in the other pages.
  4. Add a heading that says "My Assignments".
  5. Similarly to the homework, add a list of links to your marked up papers. They should all be relative links.
  6. Since you're working as partners, this should include all six of your assignments. You'll have to email them to each other

Next Class

  • Read: Duckett, Chps. 8
  • Extra credit: Visit a PAL tutor during hours. Have them sign a piece of paper with their name and date. Write down what they helped you with. Give it to me for a bonus point toward something.
  • Optional practice: Make a codecademy.com account (free) and start the HTML track.

Resources

  1. Duckett, John. Html & CSS: Design and Build Websites. John Wiley and Sons, 2014.
  2. https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation