HTML and CSS Reference
In-Depth Information
As an example, create an (X)HTML5 form for a registration page of a web site (Listing 6-13).
Listing 6-13.
A Registration Form
<form action="newaccount.php" method="post">
<fieldset title="Create account">
<p>
<label for="mailadd">E-mail address:</label>
<input id="mailadd" type="email" required="required" name="mail"
placeholder="email@example.com" />
</p>
<p>
<label for="passwd1">Password:</label>
<input id="passwd1" type="password"
required="required"
name="pwd" />
</p>
<p>
<label for="passwd2">Confirm password:</label>
<input id="passwd2" type="password"
required="required"
name="pwd2" />
</p>
<p>
<label for="website">Website:</label>
<input type="url" name="website" placeholder="http://www.example.com" />
</p>
<p>
<label for="number">Number:</label>
<input type="number" name="number" min="0" max="10" placeholder="0-10" />
</p>
<p>
<label for="range">Range:</label>
<input type="range" name="range" min="0" max="10" step="2" />
</p>
<p>
<input type="submit" value="Create account" />
</p>
</fieldset>
</form>
The HTML5 Geolocation API
The Geolocation API provides an interface to retrieve information on the geographical location for a client-side
device. In other words, it can be used in web browsers to find the current position of the user. The location of the user
is not shared until the user confirms the request. The Geolocation API became a W3C Recommendation in 2013 [12].
Listing 6-14 shows an example for the application of the Geolocation API. In the example, the
setOnLoadCallback
function is used to create a map. The
if-then
construct is used to check whether the Geolocation
API is supported, get the current position, and, in case it is successfully retrieved, mark it on the map. If necessary, we
inform the user to accept the Geolocation request, or the location cannot be determined. The location is hard-coded
to Garden Island in Port Adelaide, Australia, which is used until the user enables geolocation. In the
else
branch, a
nice location is set for users that use a browser without geolocation support.
Search WWH ::
Custom Search