Home arrow HTML arrow Page 2 - HTML Form Verification and ACP
HTML

HTML Form Verification and ACP


HTML form verification is a good candidate for Active Client Pages (ACP). After a user has filled in an HTML form, you may want to present a new page to him showing all of the information he has typed in the form. This new page is the verification page. In this article I show you how to use the technology of Active Client Pages to produce the verification page at the client, not from the server as the present state of the art depicts.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
August 18, 2009
TABLE OF CONTENTS:
  1. · HTML Form Verification and ACP
  2. · The Code
  3. · The verifPage Variable
  4. · The verify() Function
  5. · Summary of the Document Phase of Chrys’s Approach to ACP

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
HTML Form Verification and ACP - The Code
(Page 2 of 5 )

All of the code is in the Form’s page. The verification page is produced by the Form’s page. To be precise, the verification page is produced by the code in the Form’s page. This uses Active Client Page technology, where pages are produced at the client.

Code Skeleton of the Form’s Page

The is the skeleton of the code in the Form’s page:


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<script type="text/javascript">

verifPage = Verification Page Content



function verify()

{

//Function to produce the verification page

}

</script>

</head>


<body>

<form>

< - - Form elements - - >

</form>


</body>

</html>


The first three lines are XHTML requirements. You have a HEAD element and a BODY element. The HEAD element has a JavaScript. The BODY element has the FORM element. The JavaScript has code that will produce the verification page when the Verify button in the BODY element is clicked.

Let us now look at what is in the BODY element. In this simple example, we have only the FORM element in the BODY element. This is the FORM element:


<form>

<table>

<tbody>

<tr>

<td>First Input Text: </td><td><INPUT id="IP1" type="text"></td>

</tr>

<tr>

<td>Second Input Text: </td><td><INPUT id="IP2" type="text"></td>

</tr>

<tr>

<td>Third Input Text: </td><td><INPUT id="IP3" type="text"></td>

</tr>

</tbody>

</table>

<button type="button" onclick="verify()">Verify</button>

</form>


The FORM element does not have the action and method attributes; it does not have to, since it does not send the FORM elements to the server. The data typed has to be verified in the Verification Page before being sent to the server. So, it is the FORM element in the verification page that has the action and method attributes.

What we have in the FORM element in the Form’s page is an HTML table. Below the table is the button with the Verify label. When you click this button, the verify() function, which produces the Verification Page, is called.

The Table element has the three Input Text Elements. It is in these Input Text elements that the user types in data.

There are two statements in the script in the HEAD element: the declaration and assignment of the verifPage variable and the verify() function. Let us look at these two statements.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials