EMBEDDING OBJECTS AND STORING INFORMATION - HTML5 - page 311

</hgroup>
</header>
<section>
< form name =players>
< input type = text name =firstBase placeholder= “First base” >
&nbsp;First Base < br >
< input type = text name =secondBase placeholder= “Second base” >
&nbsp;Second Base < br >
< input type = text name =thirdBase placeholder= “Third base” >
&nbsp;Third Base < br >
< input type =button o nClick = “StorageMaster.setPositions () ” value = “Assign
Positions” >
</section>
< br >
< div ID = “playerTable” >
<section ID = “getPlayer” >
< fieldset >
< legend > Who's Playing What? </ legend >
< input type =button onClick = “StorageMaster.getFirst () ” value = “Who's on First?” >
< br >
< input type =button onClick = “StorageMaster.getSecond () ” value = “Who's on Second?” >
< br >
< input type =button onClick = “StorageMaster.getThird () ” value = “Who's on Third?” >
< br >
</ fieldset >
</ form >
</section>
</ div >
</ body >
</ html >

315

When you i rst load the page, you'll see a new HTML5 attribute in all the text input
windows — these are place holders. In the code, they look like this:

< input type = text name =thirdBase placeholder= “Third base” >

As soon as the user begins to type in a value, they immediately disappear. So, go ahead and
test it, i lling in the three text windows, and then click the Assign Positions button. h at sets
the values in the session storage.

To retrieve the stored data, just click any of the three buttons in the Who's Playing What? box.
Figure 15-4 shows what you can expect to see.

If you try to get the stored data back before clicking the Assign Positions button, you'll get a
null value in the alert window. If you leave the page and return, you'll also get null values until
you're reassigned the positions.