All chapters...Table of contents
A simple HTML document
Cascading style sheets
Programming in PHP
Server side includes
CGI & Perl
Examples of colours
In this chapter...Date and time of the document
Hiding your e-mail address
Getting information about the platform
More browser Information
Default values in forms
A button as a link
Using a pop-up menu to link
A pop-up menu with a confirm button
Taalkeuze...U hebt gekozen om Engels als eerste taal te gebruiken. Klik hier om te kiezen voor Nederlands.
You should note that the script gets the date from the file on the server, so in practice that is the date you last uploaded the file to your server.
The navigator.platform object holds the name of the platform the browser that looks at the page is running on. With substring(0.3) I pick the first three characters of that and with toLowerCase() it is converted to lower case. If that equals "win" you are looking at a Windows computer. If it equals "mac" you use an Apple Macintosh.
This enables you to make dynamic pages that adjust themselves to the browser and platform of the user.
<A HREF="index.php" onMouseOver="alert('This link brings you the table of contents')">Contents</A>
This looks like a normal link but as soon as you move the mouse pointer over it, an alert will appear. If you go to the link and click it fast enough, the alert will never appear. The alert will only appear once if you keep the mouse pointer over the link. The ONMOUSEOVER attribute will work with any element:
<P onMouseOver="alert('This is Latin text!')">Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur.</P>
Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur.
The second way to display an alert is once the reader has clicked a link:
This does something really nice. After clicking the link, the user is asked to confirm the choice. If 'yes' is chosen, the table of contents is loaded. If 'no' is chosen, the user returns to this page. Some browsers reload the entire page, most do not.
<INPUT TYPE="TEXT" NAME="email" SIZE="30" VALUE="Your email" onFocus="if(this.value=='Your email')this.value='';">
As soon as you click in the email field, you see the text "Your email" disappears. You can use this in exactly the same way with a text area:
<TEXTAREA NAME="email" ROWS="3" COLS="40" onFocus="if(this.value=='Your comments')this.value='';">
You can restore the default value if the user leaves the field without entering a value:
<INPUT TYPE="TEXT" NAME="email" SIZE="30" VALUE="Your Email" onFocus="if(this.value=='Your Email')this.value='';" onBlur="if(this.value=='')this.value='Your Email';">
As you can see the field empties if you click in it and fills again with "your email" if you leave the field (click outside the field) without typing anything. If you do type any other text than "Your email" that value will be left in the field.
<TEXTAREA NAME="email" ROWS="3" COLS="40" onFocus="if(this.value=='Your comment')this.value='';" onBlur="if(this.value=='')this.value='Your comment';">
You could use the onBlur attribute also to validate form input.
<INPUT TYPE="button" onClick="location='index.php'" VALUE="HTML Guide Index">
There is a function jump_around() which is called by the form when a choice is made from the pop up menu. The ONCHANGE="jump_around();" attribute takes care of that. In the function you see the document.jumper.choice.value bit. You recognise the "document" bit. The form has been given the name "jumper"and the SELECT tag the name "choice". This is the easiest way of referencing forms.
Normally when you load this page, the form will say "Select a chapter" which is the OPTION SELECTED. If you select this option, nothing will happen, because it is not defined in the jump_around() function.
This uses the same pop-up menu. However, it is not the menu that calls the jump_around_again() function, but the button. That means you have to make a choice from the menu, and then press the "Go!" button. This is how the form will look:
The function looks at what was selected in the menu. The function jump_around_again() is almost identical to jump_around() used above. You can see here that the form is referenced by name (confirmjump) but the select element not. All the elements within a form are numbered, starting with 0. That is why this SELECT element can be referenced to with elements. The selectedIndex method is then used to find out with option was selected. Incidentally, all the forms within a page are also numbered starting at zero, so you can reference forms with forms, forms, etc.
This site conforms completely to open standards of the World Wide Web Consortium (W3C). Click on the logos to verify that.
©1995-2021 Jan Weijers, the Netherlands. All rights reserved.