CSE 190M Web Programming

Lecture 8: HTML Forms

Reading: 6.1 - 6.2, 6.4

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 Valid CSS

Reading directories

function description
glob returns an array of all file names that match a given pattern
(returns a file path and name, such as "foo/bar/myfile.txt")
scandir returns an array of all file names in a given directory
(returns just the file names, such as "myfile.txt")

glob example

# reverse all poems in the poetry directory
$poems = glob("poetry/poem*.dat");
foreach ($poems as $poemfile) {
	$text = file_get_contents($poemfile);
	file_put_contents($poemfile, strrev($text));
	print "I just reversed " . basename($poemfile) . "\n";
}

scandir example

<ul>
	<?php foreach (scandir("taxes/old") as $filename) { ?>
		<li>I found a file: <?= $filename ?></li>
	<?php } ?>
</ul>
  • .
  • ..
  • 2007_w2.pdf
  • 2006_1099.doc

Reading/writing an entire file

# reverse a file
$text = file_get_contents("poem.txt");
$text = strrev($text);
file_put_contents("poem.txt", $text);

Appending to a file

# add a line to a file
$new_text = "P.S. ILY, GTG TTYL!~";
file_put_contents("poem.txt", $new_text, FILE_APPEND);
old contents new contents 
Roses are red,
Violets are blue.
All my base,
Are belong to you.

Roses are red,
Violets are blue.
All my base,
Are belong to you.
P.S. ILY, GTG TTYL!~

Exercise: Photo Gallery

Check out this awesome photo gallery

  • Write the appropriate PHP code to show all food photos in our photo gallery

6.1: Form Basics

Web data

Query strings and parameters 

URL?name=value&name=value...

http://www.google.com/search?q=Obama
http://example.com/student_login.php?username=stepp&id=1234567

Query parameters: $_GET, $_POST 

$user_name = $_GET["username"];
$id_number = (int) $_GET["id"];
$eats_meat = FALSE;
if (isset($_GET["meat"])) {
	$eats_meat = TRUE;
}

HTML forms

HTML form

HTML form: <form> 

<form action="destination URL">
	form controls
</form>

Form example 

<form action="http://www.google.com/search">
	<div>
		Let's search Google:
		<input name="q" />
		<input type="submit" />
	</div>
</form>

6.2: Form Controls

Form controls: <input> 

<!-- 'q' happens to be the name of Google's required parameter -->
<input type="text" name="q" value="Colbert Report" />
<input type="submit" value="Booyah!" />

Text fields: <input> 

<input type="text" size="10" maxlength="8" /> NetID <br />
<input type="password" size="16" /> Password
<input type="submit" value="Log In" />

Exercise: Grades Page

We want to write a simple HTML form that gathers the necessary information to display a student's grade to them. Here is some starter code.

  • Set up the form
  • Add a field for the student's name.
  • Add a field for student ID.

Text boxes: <textarea>

a multi-line text input area (inline) 

<textarea rows="4" cols="20">
Type your comments here.
</textarea>

Checkboxes: <input>

yes/no choices that can be checked and unchecked (inline) 

<input type="checkbox" name="lettuce" /> Lettuce
<input type="checkbox" name="tomato" checked /> Tomato
<input type="checkbox" name="pickles" checked /> Pickles

Radio buttons: <input>

sets of mutually exclusive choices (inline) 

<input type="radio" name="cc" value="visa" checked /> Visa
<input type="radio" name="cc" value="mastercard" /> MasterCard
<input type="radio" name="cc" value="amex" /> American Express

Drop-down list: <select>, <option>

menus of choices that collapse and expand (inline) 

<select name="favoritecharacter">
	<option>Jerry</option>
	<option>George</option>
	<option selected>Kramer</option>
	<option>Elaine</option>
</select>

Exercise: Grades Page 2

  • Add a field for the student's section to our grades page.
  • Add an honesty policy check box to our grades page.
  • Add a field for choosing an assignment.

Text labels: <label> 

<label><input type="radio" name="cc" value="visa" checked="checked" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label>
<label><input type="radio" name="cc" value="amex" /> American Express</label>

Exercise: Grades Page 3

  • Make our page more user friendly with labels.

Using <select> for lists

<select name="favoritecharacter[]" size="3" multiple>
	<option>Jerry</option>
	<option>George</option>
	<option>Kramer</option>
	<option>Elaine</option>
	<option selected>Newman</option>
</select>

Option groups: <optgroup> 

<select name="favoritecharacter">
	<optgroup label="Major Characters">
		<option>Jerry</option>
		<option>George</option>
		<option>Kramer</option>
		<option>Elaine</option>
	</optgroup>
	<optgroup label="Minor Characters">
		<option>Newman</option>
		<option>Susan</option>
	</optgroup>
</select>

Reset buttons 

Name: <input type="text" name="name" /> <br />
Food: <input type="text" name="meal" value="pizza" /> <br />
<label>Meat? <input type="checkbox" name="meat" /></label> <br />
<input type="reset" />

Common UI control errors

Hidden input parameters 

<input type="text" name="username" /> Name <br />
<input type="text" name="sid" /> SID <br />
<input type="hidden" name="school" value="UW" />
<input type="hidden" name="year" value="2048" />

Grouping input: <fieldset>, <legend>

groups of input fields with optional caption (block) 

<fieldset>
	<legend>Credit cards:</legend>
	<input type="radio" name="cc" value="visa" checked="checked" /> Visa
	<input type="radio" name="cc" value="mastercard" /> MasterCard
	<input type="radio" name="cc" value="amex" /> American Express
</fieldset>

Styling form controls 

element[attribute="value"] {
	property : value;
	property : value;
	...
	property : value;
}

input[type="text"] {
	background-color: yellow;
	font-weight: bold;
}