Revision as of 13:34, 4 October 2009

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

Web technology tutorials series
Introductory

Introduction

Learning goals

Learn function an purpose of HTML forms
Learn how to code some kinds of forms
Understand how JavaScript may be used to process forms
Understand how forms can be processed with PHP

Prerequisites

HTML and XHTML elements and attributes
See also: HTML and XHTML for some background information and HTML links for a page with pointers (e.g. to other HTML tutorials)

Concurrent

DHTML tutorial
HTML and XHTML validation and repair

Moving on

See the list of web technology tutorials

Level and target population

Beginners

Remarks

For the moment, this article is intended to be a "handout" for "lab" teaching. In other words, a teacher + hands-on activities are needed. In addition, we don't explain how to use a specific editing tool.
To do: Add some more tags and attributes, some additional explantions for each tag, an HTML forms tutorial, etc.

HTML Forms are the "basic" HTML elements for client or server-side interactivity. DHTML (i.e. the combination of HTML, DOM, JavaScript and CSS add extra possibilities.

Let's discuss a short example:

<?xml version = "1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
  <head>
    <title>HTML form</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>

    <h1>HTML form elements</h1>

<form method="get" action="#">

<h2>Personal data</h2>

<p>
<strong>Name</strong><br/>
<input type="text" name="name" size="25" />
</p>

<p>
<strong>Firstname</strong><br/>
<input type="text" name="firstname" size="25"/>
</p>

<p>
<strong>I'd like to have some documentation</strong>
<input type="checkbox" name="doc_wanted"/>
</p>

<p>
<strong>Countries I visited</strong>
<select name="country" size=1>
	  <option>CH:  Switzeland</option>
	  <option>D:   Germany</option>
	  <option>F:   France</option>
	  <option>A:   Austria</option>
	  <option>I:   Italy</option>
	</select>
</p>
<p>
<strong>Gender</strong>
<input type="radio" name="gender" value="1"/>Male
<input type="radio" name="gender" value="2"/>Female
</p>

<p>
<strong>Preferred main color</strong>
<input type="radio" name="colorprefs" value="y"/>Yellow
<input type="radio" name="colorprefs" value="b"/>Blue
<input type="radio" name="colorprefs" value="r"/>Red
<input type="radio" name="colorprefs" value="g"/>Green
</p>

<h2>Majoring in</h2>
Vous may choose more than one:
<p>
<input type="checkbox" name="domain1" />Education
<input type="checkbox" name="domain2" />Psychologie
<input type="checkbox" name="domain3" />Computer Science
<input type="checkbox" name="domain4" />International Relations
<input type="checkbox" name="domain5" />Business Administration
<input type="checkbox" name="domain6" />Other
</p>

<h2>Comments</h2>

Tell me anything you want to ... <p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>

<h2>More</h2>
<p>
Input button for JS coding: <input type="button" value="Press me"/>
</p>
<p>
Password field: <input type="password" name="pw"/>
</p>

<p>
<input type="reset" value="Reset the form"/>
<input type="submit" value="Submit"/>
</p>
</form>

<hr/>
</body>
</html>

Live code: 1-demo-html-form-els.html

Forms processing with the Common Gateway Interface

HTML forms can be processed by a webserver in two ways, either trough the older, easier and still more popular CGI Interface or with AJAX

The principle for both is the same. The client (i.e. your web browser) sends some data to a URL. The webserver will hand over your data to the program identified by the URL, e.g. a PHP file.

HTTP

Hypertext Transfer Protocol (HTTP) is a communications protocol used to transfer or convey information on the World Wide Web. (Wikipedia). These messages have two parts

Information that the user will not see
Data

Browser requests consist of the following:

A Request line, such as GET /images/logo.gif HTTP/1.1, which requests the file logo.gif from the /images directory

Headers that will give the server information about your browser, cookies etc.

An empty line

An optional message body (e.g. POST contents from a form)

Here is a sample message sent from the browser to the server and that request that the server sends the contents of the resource identified as http://www.example.com/index.

 GET /index.html HTTP/1.1
 Host: www.example.com

Server replies include:

A first line that includes a status code (e.g. "200 OK" means "here is what you asked")

Some other information about the context, the server and the most importantly the content type.

A blank line

The data

Here is a sample message sent from the server to the browser in response:

HTTP/1.1 200 OK
Date: Sun, 06 May 2007 19:13:32 GMT
Server: Apache/2.2.3 (Win32) PHP/5.1.5
X-Powered-By: PHP/5.1.6
Content-Length: 252
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html

 .... Contents, e.g. HTML code ....

CGI Principles

Processing forms with PHP

PHP scripts are put on a web server (like HTML files). However, the server deals with PHP in a very different way:

HTML files are just sent to the browser
PHP files are executed by the web server and only the result (which usually is some HTML code) is then sent to the browsers.

PHP code can be be small, e.g. sit in a single file. Or it may consists of hundreds of files. Many (or most) popular portalware is coded with PHP, including this wiki.

PHP code is inserted between: <?php ..... ?>

<?php echo("I am a php instruction\n"); ?>

Example

calculate.html and calculate.php (but these files need to be put on a server)

The HTML form:

 <form '''action="calculate.php"''' '''method="post"'''>

 What do you know about HTML ?
 <input type="radio" name="choice" value="1" checked>little
 <input type="radio" name="choice" value="2">some
 <input type="radio" name="choice" value="3">everything

 <br>
 What is your programming experience ?
 <input type="radio" name="choice2" value="1" checked>none
 <input type="radio" name="choice2" value="2">some
 <input type="radio" name="choice2" value="3">good
 <P>
 <input type="submit" value="See result!">

 </form>

Contents of the Php file

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head><title>Simple test with</title></head><body>

Simple test with PHP

 <?php

 // Get variables from the form
 $choice = $_POST['choice'];
 $choice2 = $_POST['choice2'];

 // Compute the score
 $score = $choice + $choice2;
 // Display the score

echo "

Your score is " . $score . "

";

 if ($score < 3) {

echo "

You are a beginner

";

 } elseif ($score < 5) {

echo "

You have some knowledge

";

 } else {

echo "

You are an expert !

";

 }
 ?>

DKS - 2007

 </body></html>

No need to understand CGI details, PHP makes it quite easy ....

Your future as web designers

is not creating web pages

is configuring skins for portals and web services ...

is working together with applications developers ...

therefore you might want to acquire a minimum of PHP, ASP, etc.... just enough to able to edit CSS and template files

To play on your personal computer, install a WAMP package

Windows, the operating system;

Apache, the Web server;

MySQL, the database management system

PHP

http://edutechwiki.unige.ch/en/WAMP (also includes WAMPs running on a memory stick)

http://www.wampserver.com/ (currently most recommended by DKS)

http://www.chsoftware.net/en/useware/wos/wos.htm (best WAMP for memory sticks)

AJAX

AJAX is the latest trend in interactive web pages

The Ajax technique uses a combination of:

XHTML (or HTML) and CSS, for marking up and styling information.

The DOM accessed with a client-side scripting language, usually ECMAScript (JavaScript)

The XMLHttpRequest object is used to exchange data asynchronously with the web server.

XML is sometimes used as the format for transferring data between the server and client.

HTML forms tutorial: Difference between revisions

Revision as of 13:34, 4 October 2009

Contents

Introduction

Forms processing with the Common Gateway Interface

HTTP

CGI Principles

Processing forms with PHP

Simple test with PHP

Your score is " . $score . "

Navigation menu

HTML forms tutorial: Difference between revisions

Revision as of 13:34, 4 October 2009

Introduction

Forms processing with the Common Gateway Interface

HTTP

CGI Principles

Processing forms with PHP

Simple test with PHP

Your score is " . $score . "

Navigation menu

Slow Search