We've learned a bit about templates in the previous chapter, but since they are a big part of any web application, we'll dig a bit deeper into them now. Let's revisit the guess template from the game:
Example 4.1. guess.html
<html> <head><title>Perform a guess</title></head> <body> <p>Guess a number from 0 to 100</p> <!--V 'warning'--><!--/V--> <!--B 'invalid'--> <p><font color="#990000">The guess is invalid.</font></p> <!--/B--> <p><i><!--V 'indication'--><!--/V--></i></p> <!--B 'lower'-->The answer is lower.<!--/B--> <!--B 'higher'-->The answer is higher.<!--/B--> <form action="[!V 'SUBMISSION:FORM:performGuess'/]" method="post"> <!--V 'SUBMISSION:PARAMS:performGuess'/--> <input type="text" name="guess" value="[!V 'PARAM:guess'][!/V]" /><br /> <input type="submit" value="Guess" /><br /> </form> <script language="javascript">document.forms[0].guess.focus();</script> </body> </html>
In Example 4.1, “guess.html” there are two different template tags, the V
and B
tags. These were briefly explained in Section 4, “Templates” and were described as a value tag and a block tag.