Home arrow HTML arrow Page 4 - How to Create a Dynamic Web Page
HTML

How to Create a Dynamic Web Page


This quick tutorial demonstrates how fast and easy it is to produce web pages with dynamic content that are purely client based. This is aimed at beginners to web programming or those of you who like to keep things fairly simple. Wellman's creative names for cities and towns adds a bit of humor too.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 125
June 14, 2004
TABLE OF CONTENTS:
  1. · How to Create a Dynamic Web Page
  2. · Code for Drop-down Box and Text Area
  3. · Making the HTML Elements Interact
  4. · Completed File

print this article
SEARCH DEVARTICLES

How to Create a Dynamic Web Page - Completed File
(Page 4 of 4 )

Your completed text file should now look a little (well, exactly) like this:

<html>
<head>
<title>Dynamic Example</title>
<script language="VBScript">
sub people_onclick()
if people.selectedIndex="0" then
form1.details.value="Make a Selection"
else
select case people.selectedIndex
case 1
form1.details.value="1 Nowhere Street, Ghost Town, AB1 2CD"
case 2
form1.details.value="2 Unknown Lane, Gonesville, EF3 4GH"
case 3
form1.details.value="3 Invisible Avenue, Nothingshire, IJ5 6KL"
case 4
form1.details.value="4 Somewhere Road, Vancancy, MN7 8OP"
case 5
form1.details.value="5 lestways, Notknownsbury, QR9 0ST"
case 6
form1.details.value="6 Lost Court, Summerwhere, UV12 3WX"
case 7
form1.details.value="7 Nodnol Place. Nohampton, YZ45 6AB"
case 8
form1.details.value="8 Empty Square, Notthereburgh, CD7 8EF"
case 9
form1.details.value="9 Unbuilt Crescent, Guester, GH8 9IJ"
case 10
form1.details.value="10 Unfound House, Neverpool, KM27 4NO"
end select
end if
end sub
</script>
</head>
<body> 

<select id=”people”>
<option>Please select</option>
<option>Mr Smith</option>
<option>Mrs Bloggs</option>
<option>Mr Doe</option>
<option>Mrs Jones</option>
<option>Mr Spencer</option>
<option>Mr Field</option>
<option>Ms Reed</option>
<option>Mr Waters</option>
<option>Mrs Frank</option>
<option>Mr Green</option>
</select>
<form id=”form1”>
<textarea rows="12" cols="60" id=”details”>The details will be displayed here</textarea>
</form>
</body>
</html>

If you wanted to add a little formatting to the text that is displayed in the textarea, you can add + chr(13) + in the value, for example:

form1.details.value="1 Nowhere Street, Ghost Town, AB1 2CD" + chr(13) + “01234 546789”

Which would then display in the textarea as:

1 Nowhere Street, Ghost Town, AB1 2CD
01234 546789

chr(13) is the ASCII code for the return key on your keyboard.

That’s all there is to it; save the file as dynamicExample.htm and open it in explorer. Have a play around to understand what the code you’ve implemented does, and congratulate yourself on making your first dynamic web page.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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