Creating Web Documents XHTML Project II topics should be posted Start Forms Homework: Forms not...

Creating Web Documents

XHTML

Project II topics should be posted

Start Forms

Homework: Forms not required for midterm or project 2. At some point, read

about them in HTML text

eXtended HTML• Cleaned up form that is legal XML. Refer to the doctype

for HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.01 Transitional//EN">

• Use quotation marks around all attributes.• Use lower case for HTML tags (e.g., <html>)• Singleton tags need ending:<img src="bird.gif" />• Must be well-formatted: all tags that come in pairs must be

paired: <p> …… </p> AND properly nested.NOT <b><i> Italic and bold </b></i>

Forms

• Forms used for structured information from visitor to your site to you.

• (Unstructured info, use open-ended e-mail <a href="mailto:jeanine.meyer@purchase"> Send questions to me </a>)

• Forms can be handled by cgi (common gateway interface) scripts on server, JavaScript, combination of JavaScript & Active Server Pages or PHP or Cold Fusion (all termed middleware) OR sent via e-mail

Form structure

• <form method=get or post enctype="text/plain" action=URL for the action>

• In-between, use different form elements + ordinary HTML– Text, textarea, radio, checkboxes, select & options, other

• Include some form of submit button that causes the action to be taken. Also can include a reset button

• </form>

General attributes of form element

<input type=one of several possibilities, for example: text

name= names this item for action. Also used for grouping (for example, radio buttons)

value= has different functions depending on the typeSome types can be nested: for example, select &

optionsCertain types have other attributes/parameters, for

example, size= gives number of lines in a select tag

>

Begin exercise

• Open NotePad and type in HTML ‘boilerplate’

<html>

<head><title>Form example </title></head>

<body>

<h1> Address Information </h1> <br>

</body>

<form method=post enctype="text/plain" action="mailto:[email protected]">

First Name: <input type="text" name="fname"> Last Name: <input type="text" name="lname"> <br>

Street Address: <input type="text" name="address" size=30>Town/City: <input type="text" name="city"> State: <select name="state" size=1><option value="NY" selected> New York<option value="NJ"> New Jersey<option value="CT"> Connecticut<option value="PA"> Pennsylvania</select> <br>

Status: <input type=“radio” name=“status” value=“R”> Returning client<input type=“radio” name=“status” value=“N”> New client<hr> Thank you <p><input type="submit" value="Send information"></form>

Change this to your id

Default is NY.

Same name makes it one radio group

Exercise

• Save as formtest.html

• Load page and enter data.

• WILL PROBABLY NOT WORK IN COMPUTER LAB!

• Then go to your e-mail address and see what you get.

Preview

• Will do more with forms using JavaScript– Also Creating Dynamic Web Documents.

• cgi = common gateway interface = rules for writing server programs that take information which HTML and often produce new pages.– is beyond this course. However, you can get scripts on-

line and customize them. The more difficult part may be getting the owners of the server to store your cgi script.

• Spring, 2004: Creating Databases for the Web, will introduce middleware ASP and PHP.

Homework

• If you haven’t posted your topic for Project II, do so. It will count off if this isn’t done today! See me!

• Work on Project II!– Remember purpose & audience– Use (appropriately) links, lists, images, fonts, colors,

frames, tables, image maps or image slicing, animation

• Read on Forms, HTML text.• Start JavaScript next.

Creating Web Documents XHTML Project II topics should be posted Start Forms Homework: Forms not...

Documents

Transcript of Creating Web Documents XHTML Project II topics should be posted Start Forms Homework: Forms not...