CPS 353: Internet Programming

HTML Forms, Basic HTTP, and more c#

Marcos Elugardo

Gordon College

Last Modified: 09/23/2015

Selected content adapted from material by Marty Stepp, Jessica Miller, and Victoria Kirst © 2012. Used by permission.

Agenda

• Check-in
• HTML Forms
• HTTP and Web Servers
• Class Research Mini-opics
• Milestone 3

Web data

• most interesting web pages revolve around data
  • examples: Google, IMDB, Amazon, Facebook, YouTube, Rotten Tomatoes
  • can take many formats: text, HTML, XML, multimedia
• many of them allow us to access their data
• some even allow us to submit our own new data
• most server-side web programs accept parameters that guide their execution

Query strings and parameters

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

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

• query string: a set of parameters passed from a browser to a web server
  • often passed by placing name/value pairs at the end of a URL
  • above, parameter username has value aardvark, and sid has value 1234567
• Server-side code (i.e. PHP, C#) can examine and utilize the value of parameters
• a way for server-side code to produce different output based on values passed by the user

HTML forms

• form: a group of UI controls that accepts information from the user and sends the information to a web server
• the information is sent to the server as a query string
• JavaScript can be used to create interactive controls (seen later)

HTML form: <form>

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

• required action attribute gives the URL of the page that will process this form's data
• when form has been filled out and submitted, its data will be sent to the action's URL
• one page may contain many forms if so desired

Form example

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

• should wrap the form's controls in a block element such as div

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!" />

• input element is used to create many UI controls
  • an inline element that MUST be self-closed
• name attribute specifies name of query parameter to pass to server
• type can be button, checkbox, file, hidden, password, radio, reset, submit, text, ...
• value attribute specifies control's initial text

Text fields: <input>

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

• input attributes: disabled, maxlength, readonly, size, value
• size attribute controls onscreen width of text field
• maxlength limits how many characters user is able to type into field

Text boxes: <textarea>

a multi-line text input area (inline)

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

• initial text is placed inside textarea tag (optional)
• required rows and cols attributes specify height/width in characters
• optional readonly attribute means text cannot be modified

Checkboxes: <input>

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

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

• none, 1, or many checkboxes can be checked at same time
• when sent to server, any checked boxes will be sent with their value attribute or on:

  • http://webster.cs.washington.edu/params.php?tomato=on&pickles=on
    

• use checked="checked" attribute in HTML to initially check the box

Radio buttons: <input>

sets of mutually exclusive choices (inline)

<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

• grouped by name attribute (only one can be checked at a time)
• must specify a value for each one or else it will be sent as value on

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>

• associates nearby text with control, so you can click text to activate control
• can be used with checkboxes or radio buttons
• label element can be targeted by CSS style rules

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

menus of choices that collapse and expand (inline)

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

• option element represents each choice
• select optional attributes: disabled, multiple, size
• optional selected attribute sets which one is initially chosen

Using <select> for lists

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

• optional multiple attribute allows selecting multiple items with shift- or ctrl-click
  • must declare parameter's name with [] (for PHP) if you allow multiple selections
• option tags can be set to be initially selected

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>

• What should we do if we don't like the bold italic?

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" />

• when clicked, returns all form controls to their initial values
• specify custom text on the button by setting its value attribute

Common UI control errors

• I changed the form's HTML code ... but when I refresh, the page doesn't update!
  • By default, when you refresh a page, it leaves the previous values in all form controls
  • it does this in case you were filling out a long form and needed to refresh/return to it
  • if you want it to clear out all UI controls' state and values (e.g. browser cache), you must do a full refresh
    • Windows: Shift-Ctrl-R
    • Mac: Shift-Command-R

Hidden input parameters

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

• an invisible parameter that is still passed to the server when form is submitted
• useful for passing on additional state that isn't modified by the user

Submit and other Buttons

<input type="text" name="name" /> Name <br />
<input type="text" name="sid" /> SID <br />
<input type="submit" name="action" value="Go For It!" />
<input type="button" name="another-action" value="Do Something Else..." />

• Submit button sends form data to the server for processing.
• Other buttons can trigger logic via JavaScript.

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>

• fieldset groups related input fields, adds a border; legend supplies a caption

Styling form controls

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

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

• attribute selector: matches only elements that have a particular attribute value
• useful for controls because many share the same element (input)

Problems with submitting data

<label><input type="radio" name="cc" /> Visa</label>
<label><input type="radio" name="cc" /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
	<option>James T. Kirk</option>
	<option>Jean-Luc Picard</option>
</select> <br />

• this form submits to our handy params.php tester page
• the form may look correct, but when you submit it...
• [cc] => on, [startrek] => Jean-Luc Picard

The value attribute

<label><input type="radio" name="cc" value="visa" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
	<option value="kirk">James T. Kirk</option>
	<option value="picard">Jean-Luc Picard</option>
</select> <br />

• value attribute sets what will be submitted if a control is selected
• [cc] => visa, [startrek] => picard

URL-encoding

• certain characters are not allowed in URL query parameters:
  • examples: " ", "/", "=", "&"
• when passing a parameter, it is URL-encoded (reference table)
  • "Anthony's cool!?" → "Anthony%27s+cool%3F%21"
• you don't usually need to worry about this:
  • the browser automatically encodes parameters before sending them
  • the c# automatically decode them
  • ... but occasionally the encoded version does pop up (e.g. in Firebug)

Submitting data to a web server

• though browsers mostly retrieve data, sometimes you want to submit data to a server
  • Hotmail: Send a message
  • Flickr: Upload a photo
  • Google Calendar: Create an appointment
• the data is sent in HTTP requests to the server
  • with HTML forms
  • with Ajax (seen later)
• the data is placed into the request as parameters

Query parameters: Request.QueryString

user_name = Request.QueryString["username"];
id_number = (int) Request.QueryString["id"];
eats_meat = FALSE;
if (Request.QueryString.AllKeys.Any(k => k == "meat")) {
    $eats_meat = TRUE;
}

• $_REQUEST["parameter name"] returns a parameter's value as a string
• test whether a given parameter was passed with Request.QueryString.AllKeys.Any

HTTP GET vs. POST requests

• GET : asks a server for a page or data
  • if the request has parameters, they are sent in the URL as a query string
• POST : submits data to a web server and retrieves the server's response
  • if the request has parameters, they are embedded in the request's HTTP packet (POST body), not the URL
• For submitting data, a POST request is more appropriate than a GET
  • GET requests embed their parameters in their URLs
  • URLs are limited in length (~8K characters)
  • URLs cannot contain special characters without encoding
  • not really more secure
  • paremters in GET request are visible in the URL
  • but parameters in the POST body can still be accessed

GET Example: Exponents

@{
	var firstName = Request.QueryString["fname"];
	var lastName = Request.QueryString["lname"];
	var result = "Hello " + firstName + " " + lastName;
	@result;
}

http://example.com/hello?fname=Donald&lname=Trump

GET Example: Print all parameters

@{
foreach (var key in Request.QueryString.AllKeys) {
	

	<p>Parameter @key has value @Request.QueryString[key]</p>

	
}
}

http://example.com/printparams?name=Orycteropus+afer&sid=1234567

Form POST example

<form action="http://foo.com/app" method="post">
	<div>
		Name: <input type="text" name="name" /> <br />
		Food: <input type="text" name="meal" /> <br />
		<label>Meat? <input type="checkbox" name="meat" /></label> <br />
		<input type="submit" />
	<div>
</form>

if (Request.HttpMethod == "GET") {
	# process a GET request
	...
} elseif (Request.HttpMethod == "POST") {
	# process a POST request
	...
}

var text = "<p>hi 2 u & me</p>";
text = Server.UrlEncode(text);   # "&lt;p&gt;hi 2 u &amp; me&lt;/p&gt;"

<form action="http://webster.cs.washington.edu/params.php"
      method="post" enctype="multipart/form-data">
	Upload an image as your avatar:
	<input type="file" name="avatar" />
	<input type="submit" />
</form>

<input type="file" name="avatar" />

	var username = Request.Form["username"];

	<p>Received  file from @username called  @Request.Files["avatar"].FileName</p>

<form action="" method="post">
	...
</form>

if (Request.HttpMethod == "GET") {
	// normal GET request; display self-submitting form
	
	<form action="" method="post">...</form>
	
} elseif (Request.HttpMethod == "POST") {
	// POST request; user is submitting form back to here; process it
	var var1 = Request.Form["param1"];
	...
}

Response.ContentType = "text/javascript"

Response.StatusCode

	 I am not happy with the value of foo; this is an error
	Response.StatusCode = (int)HttpStatusCode.BadRequest

	Response.StatusCode = (int)HttpStatusCode.NotFound