web i - 04 - forms

EASING INTO WEB DEVELOPMENTDEVELOPMENT4 FORMS4. FORMS

INTRODUCTION1HTML2

3 TABLES3FORMS4 FORMS4HTTP5 HTTP5CSS6 CSS6CSS FRAMEWORKS7DIGITAL MEDIA8

2 USABILITY9

What is a Form?What is a Form?3

A form is a way to pass information from a web browser to a program on a Web server.

Forms thus provide two-way communication: from the server to the user, and from the user to the ,server.

Form data – where does it go?Form data where does it go?4

f The data that is input into a form is sent back to the server as a series of name=value pairs separated b dby ampersands. E.g. firstname=karl&lastname=marx&price=1.59

f URL d d This information is URL encoded, but it is certainly not encypted. E.g. name=karl%20marx HTTPS encypts this information.

This data is sent either via the url or within the HTTP header.

Three Parts of a FormThree Parts of a Form5

1. The form that the user sees and enters data into. This is constructed with HTML tags

2. A script for validating the user's entry (optional). This runs on the browser written in Javascript

3. A program that processes the user data.p g p This resides on the server. Typically uses CGI-Perl, ASP, PHP, ASP.NET or some other yp y , , ,

server-side scripting/programming technology & language. Also should validate the user’s entry

1. Building the Form in HTML1. Building the Form in HTML6

T Two parts <form> ... </form> tag form elements form elements <input>

<select> and <option>

<textarea>

<label>, <legend>, and <fieldset>

ExampleExample7

<h2>on-line wine buyer</h2><form>

guest name: <input type="text" name="guest" size="40"/><br/>e-mail:e mail: <input type="text" name="email"/><br/>color: <input type="radio" name="winecolor" value="w"/>white<input type="radio" name="winecolor" value="r"/>red<i t t " di " " i l " l " "/><input type="radio" name="winecolor" value="o"/>rose<p>price: <select name="price">

<option>choose a price</option><option>below $10</option><option>between $10 and $20</option><option>above $20</option>

</select></p><p><input type="submit"/></p><p><input type submit /></p>

</form>

<form> Tag<form> Tag8

Whil h l <f > </f > i While you can have several <form> ... </form> in a page, they cannot be nested

attributes attributes id= id of the form (only necessary if more than one form in page)ti action=

specifies the URL of the server-side script that will process the form method= specifies how the information in the form will be transmitted to the

server. Two possible values: get - The browser transmits user-entered form data as part

f h URL ifi d b h ACTION ibof the URL specified by the ACTION attribute post - Browser transmits form input info as part of the HTTP

header

<form> Tag<form> Tag9

Examples Examples

<form method="get" action="cgi-bin/mailform.pl">

<form id="personal" action="validate.asp" method="post">

Form ElementsForm Elements10

There are controls within the <form> </form> There are controls within the <form> ... </form>tags

<input> tag tt ib t attributes

name - necessary for the form to be processed type - specifies type of control

type="text"type="password"type="checkbox"type="radio"type="radio"type="submit"type="reset"

O Other attributes are possible depending upon the typeattribute.

S l <i > lSample <input> elements11

<input type="text" name="first1"><input type="text" name="first2" size="10" maxlength="5"><input type="text" name="first3" value="Karl Marx">

<input type="checkbox" name="chk1"></br/>Alive <input type="checkbox" name="chk2"></br/><input type="checkbox" name="chk3">Alive</br/><input type= checkbox name= chk3 >Alive</br/><input type="checkbox" name="chk3" value="something"><br/><input type="checkbox" name="chk4" checked="checked"><br/>

<input type="radio" name="sex" value="male"> Male<input type="radio" name="sex" value="female"> Female

<input type="button" name="click" value="Click Me"><input type="button" name="click" value="Click Me"><input type="image" src="images/btn_login.gif" alt="Login">

<input type="submit"></br/><input type="submit" value="Ok"><input type submit value Ok >

Form Elements, continuedForm Elements, continued12

D d d i h Drop-down menus created with <select> tag

<select> is a contained for <option> tags which define list items<select name="price">

<option>Choose a price</option>

<option>below $10</option>

<option>between $10 and $20</option>

<option>above $20</option>

</select>

<select> element<select> element13

Wh l i d f What value is returned from a <select> element? Either The value attribute for the selected

option If no value attribute, then the text of the

option elementoption element

<select> element<select> element14

<select name="price"><option value="0">Choose a price</option><option value="1">below $10</option> <option value="2">between $10 and $20</option><option value="3">above $20</option>

price=1

p p</select>

<select name="price"><option>Choose a price</option><option>below $10</option> price=below%20%2410<option>below $10</option> <option>between $10 and $20</option><option>above $20</option>

</select>

price below%20%2410

Aligning Form ElementsAligning Form Elements15

Be sure to align your form l t !!elements !!

This can be done via tables CSS

Align form elements via tables

16

2. Verify Using Client-Side Scripting2. Verify Using Client Side Scripting17

Javascript is a programming language introduced by Netscape

but available on IE, FireFox and Opera. is not the same as Java.

Working with JavascriptWorking with Javascript18

f f Typically consists of Javascript functions that respond to events connected to HTML tHTML tags<script language=javascript>

function check_form() {if ( il l "") {if (email.value == "") {

alert("please enter an email")return false

}}}

</script><body><form>

<input type=submit  onclick="check_form()">...

3. Process Using Server-Side Program

19

Server side programming is necessary to access Server-side programming is necessary to access databases, save form data, create customized pages

The most popular are PHP (PHP Hypertext Processor) ASPNET ASP.NET CGI (Common Gateway Interface) ASP (Active Server Pages) JSP (Java Server Pages) Cold Fusion

Static Web ContentStatic Web Content20

B Web Server

Browser

Browser requests index.htm from server

Server responds by sending index.htmto browser

Dynamic Web ContentDynamic Web Content21

Web ServerBrowser ServerBrowser

Browser requests processForm.asp from server

1

Server recognizes request as script or program

2

program3

programProgram runs, getting information about the request from the server, interacts with server resources such as databases and generatesas databases, and generates response (HTML tags) that is sent back to browser

4Browser displays HTML it received from server.

form_example.htm

22reply.asp

<html><head><title>Form Example</title></head>

REPLY.ASP<html><head><title>Form Example</title></head><body><h1>Sample Form ASP Script</h1><B>The following form items were received:</b><p><% for each item in request.form %>

Fo m Item '<% Item %>' has the al e '<% request form(item) %>'<b >Form Item '<% =Item %>' has the value '<% =request.form(item) %>'<br><% next %>

</body></html>

<html><head><title>Form Example</title></head><html><head><title>Form Example</title></head><body><h1>Sample Form ASP Script</h1><B>The following form items were received:</b><p>Form Item 'guest' has the value 'Fred'<br>F It ' dd ' h th l '123 A h St' b

Generates this code

Form Item 'address' has the value '123-Anywhere St'<br>Form Item 'BUTTON' has the value 'Submit Query'<br>Form Item 'email' has the value 'fred@abc.net'<br>Form Item 'city' has the value 'Calgary'<br>Form Item 'prov' has the value 'AB'<br>Form Item 'phone' has the value ''<br>Form Item 'winecolor' has the value 'R'<br>Form Item 'price' has the value 'between $10 and $20'<br></body></html>

23

</html>

Form AccessibilityForm Accessibility24

You can improve the accessibility of your forms by using the <label>, <fieldset>, and <legend> elements. the accesskey and tabindex attributes

<label> element<label> element25

Used to define relationship between the text describing the form element and the form element itself. Unless styled by CSS, is not displayed by the browser. If you click the label, then the form element receives the

focus. The form element must have an id specified for this to work

First Name: <input type="text" name="firstname"><br>

<label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname">

Clicking on label gives form element the focus.

<fieldset> and <legend><fieldset> and <legend>26

The <fieldset> groups a set of related form controls together. This fieldset can then be visually styled and given a

label via the <legend> element.<fieldset>

<legend>Login</legend><label for="email">EMail: </label><br><input type="text" name="email"><br><label for="pass">Password: </label><br><label for= pass >Password: </label><br><input type="password" name="pass"><br><input type="button" name="submit" value="Log In">

</fieldset>

accesskey and tabindex attributesaccesskey and tabindex attributes27

accesskey attribute is used to assign an access key to the form element that works with the program's

fmodifier key (on Windows browsers this is the Alt key). Thus <input type="text" name="email" accesskey="m"> could be given

h f b i Al Mthe focus by pressing Alt-M.

The tabindex attribute is used to define the 'element's position in the tab order.

E.g. <input type="text" name="email" tabindex="1"> would be the first l h b delement in the tab order.

Links (<a> tag) can also be given these two attributes.

28

<form name="form1" method="" action=""><fieldset>

<legend>Login</legend><legend>Login</legend>

<label>Your email</label><input type="text" name="email" /><br /><label>Your password</label>i " d" " d" / b /<input type="password" name="password" /><br />

<input type="checkbox" name="remember" />Remember me<br  /><label>Server </label><input type="radio" name="server" value="one"> Onep yp<input type="radio" name="server" value="two"> Two<br /><label>Domain</label><select name="domain">

<option>Abc</option><option>Def</option><option>Def</option><option>Ghi</option>

</select><br /><input type="submit"  />

</fieldset>/f

29

</form>

30

31