URL
Our form has a field for the project’s staging URL. There’s a field type designed
to handle URLs, too. Adding the Staging URL field is as simple as adding this
code:html5_forms/index.html
<labelfor="url">StagingURL</label>
<inputtype="url"name="url"id="url">Like the email field type, this field type is especially nice for your visitors on iOS
or Android devices because these display a much different keyboard layout, with
helper buttons for quickly entering web addresses, similar to the keyboard dis-
played when entering a URL into the mobile browser’s address bar.Color
Finally, we need to provide a way to enter a color code, and we’ll use the color
type for that.html5_forms/index.html
<labelfor="project_color">Projectcolor</label>
<inputtype="color"name="project_color"id="project_color">At the time of writing, only some browsers display a color-picker control, but
that shouldn’t stop you from using this field. You’re using proper markup to
describe your content, and that’s going to come in handy in the future,
especially when you need to provide fallback support.Styling the Form
We’ll style the form with some basic CSS. Create a new file called
stylesheets/style.css and link it in the <head> section of the form’s page.html5_forms/index.html
<linkrel="stylesheet"href="stylesheets/style.css">First we remove the numbering, margins, and padding from the list:
html5_forms/stylesheets/style.css
ol{
list-style:none;
margin:0;
padding:0;
}ol li{
clear:both;
margin:0 0 10px0;
padding:0;
}report erratum • discussDescribing Data with New Input Fields • 43
Download from Wow! eBook <www.wowebook.com>