HTML and CSS Reference
In-Depth Information
<p>
<label for="email">Email</label>
<input type="email" name="email"
placeholder="
someone@somewhere.com">
</p>
<p>
<label for="number">Number</label>
<input type="number" name="number">
</p>
<p>
<label for="telephone">Telephone</label>
<input type="tel" name="telephone" placeholder="+44
012345678901">
</p>
</fieldset>
</form>
</body>
</html>
This is just a standard HTML5 form. You might notice that there is an attribute
on some of the fields called
placeholder
. The
placeholder
attribute allows you
to display useful example text for a form input to help the user figure out what
they need to put in the form field. When a user taps to fill the form field out, the
placeholder text will disappear.
Depending on the input type, you will be presented with different keyboards to
help the user input their information much faster. Figure 3-25 shows the different
keyboard layouts used for the three supported input types.
Figure 3-25.
Keyboard layouts for number (left), tel (center), and email (right)
Load the new web page in your mobile phone's browser to test it out.
