HTML5 and CSS3, Second Edition
technique we used is brittle. It targets a specific set of browsers and works only for the color control. Thankfully, there’s a ...
once the external file was loaded. In our case we check for support for the color control, and if it’s unavailable, we load the ...
Tip 6 Jumping to the First Field with Autofocus You can really speed up data entry if you place the user’s cursor in the first f ...
Tip 7 Providing Hints with Placeholder Text Placeholder text provides users with instructions on how they should fill in the fie ...
Once we add placeholder text to each field, the entire form’s markup looks like this: html5_placeholder/index.html <formid="c ...
html5_placeholder/stylesheets/style.css fieldset{ width:216px; } fieldsetol{ list-style:none; padding:0; margin:2px; } fieldseto ...
html5_placeholder/index.html <scriptsrc='javascripts/modernizr.js'></script> In javascripts/fallbacks.js we declare ...
Tip 8 Validating User Input without JavaScript When we build web forms, we’re trying to get data from our users and store it or ...
<inputid="last_name"type="text" required name="last_name"placeholder="'Smith'"> </li> <li> <labelfor="email ...
html5_validation/index.html <li> <labelfor="password">Password</label> <inputid="password"type="password"na ...
the form is submitted. Using just a little CSS, we can provide instant feedback to users. We simply use the pseudoclasses :valid ...
➤ { ➤ test:Modernizr.pattern&& Modernizr.required, ➤ nope:"javascripts/h5f.min.js", ➤ callback:function(url,result){ ➤ i ...
Tip 9 In-Place Editing with contenteditable We’re always looking for ways to make it easier for people to interact with our appl ...
change one version and not the other. Whenever possible, build your Java- Script solution on top of the non-JavaScript solution. ...
We’ll make this look a little nicer with some CSS, too. In addition to some basic styling to line up the fields, we’ll identify ...
html5_content_editable/show.html <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </scrip ...
option to go to a separate page with its own form. Sure, it’s more coding, but think about the possible scenarios: A user doesn ...
<li> <labelfor="state">State</label> <inputtype="text"name="state"value=""id="state"> </li> <li ...
With the link added, we need to modify our script. We want to hide the link to the edit page and enable the Ajax support only if ...
Imagine, though, if each website used the HTML5 date field, and the browser had to create the interface. Each site a user visite ...
«
1
2
3
4
5
6
7
8
9
10
»
Free download pdf