How to Create a Dynamic Web Page - Code for Drop-down Box and Text Area
(Page 2 of 4 )
The code used is all my own, so feel free to tweak it, customize it and build on it in any way you like. I’ve used a simple name and address list as an example here, more to demonstrate usage than as a recommended employment, but its use is limited only by your imagination. It doesn’t have to be confined to the web either; you can have the page saved on your desktop at home, or on a shared volume on the office network.
To begin with open Notepad (or your HTML editor of choice), and add the following code to a text file:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Save it as htmlTemplate.txt, and from now on, you can just open the template file, add your code between the relevant tags and save it under a different name. If you produce a lot of HTML in Notepad, it will save you time.
Open your template file or add the above tags to a blank page. Give the page a title and let’s get the basic HTML for the page laid out. You will be using two objects mainly: a drop-down or selection box for visitors of the page to choose the content that gets displayed, and a text area to exhibit information based on the selection.
To set the drop-down box, add the following section of code in between the <body> tags:
<select >
<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>
To create the text area, add this code below to selection box code shown above:
<form>
<textarea rows="12" cols="60"> </textarea>
</form>
The rows and cols properties of the <textarea> element dictate the size of the text area, each row is a normal line height, and each column is normal character width.
Next: Making the HTML Elements Interact >>
More HTML Articles
More By Dan Wellman
