Join Joseph Lowery for an in-depth discussion in this video Adding range sliders, part of Creating Photo Card Titles with HTML5.
Right now we're using a standard input text field to determine the font size of our caption.…Not only is that pretty mundane, it's also fairly user-hostile.…If your website visitor is web savvy, they may enter 48 pixels, but do they…spell out pixels or do they enter the abbreviation, px?…And if he or she is from the print world, they may think in terms of points.…Most others however, would probably enter a measurement in either inches or centimeters.…All in all, we're looking at the possibility of entry errors galore.…
Luckily, HTML5 provides a much more intuitive visual method for selecting a…font size: the input type range, which is displayed in compliant browsers as a slider.…In this lesson, I'll show you how to change a text input field to a slider and…clue you in to a way to avoid a massive cross-browser failure.…We'll start by going to the modify.php page from the Chapter 2/02_02 folder…and then scroll down.…I am going to go down to around line 95, which is where my current font size text field lives.…
Check out the rest of the HTML5 Projects series.
- Setting up a caption submission form
- Creating basic text entry fields
- Integrating color pickers in the form
- Applying text effects like shadows and gradients