Game Development Reference
In-Depth Information
The first entry in the form just seen is invalid because it doesn't contain the string
packtpub.com
. The second form is valid because it conforms to the pattern speci-
fied. Note the customized error message on the first form, which is guaranteed to be
the same in any browser that supports the features, as opposed to having a generic
error message which can vary from browser to browser.
Used in the game
There were two separate instances in the game where the web forms API was used.
The first was in the game options widget, where a range input type was used to al-
low the user to select the difficulty of the game, and the other was used in the new
champion form, allowing the user to enter his or her full name along with an email
address.
<nav id="navOptions">
<div>
<p>Difficulty » <span>1</span></p>
<input type="range" step="1" min="1"
max="3" value="1" />
</div>
<img src="img/options-icon.png" />
</nav>
Here we set up a basic range input, specifying the maximum value as
3
. By default,
most browsers will set the value for the
step
,
min
, and
value
attributes all to
1
, but
just to be safe, we'll specify those values in case a browser handles that differently
in case the attributes aren't specified.
<form>
<input type="text" name="fullName"
pattern="\w{2,16}\s\w{2,16}"
placeholder="Full Name (Ex: John Doe)"
autofocus
/>
<input type="email" name="email"
placeholder="Email address"
/>
