Forms - Introducing HTML5 - page 96

<form>
<label for=form-name>Name</label>
<input name=form-name id=form-name type=text required>
<label for=form-email>Email</label>
<input name=form-email id=form-email type=email required>
<label for=form-url>URL</label>
<input name=form-url id=form-url type=url>
<label for=form-comment>Comment</label>
<textarea name=form-comment id=form-comment required>
</textarea>
<input type=submit>
</form>
Hey, Presto! We now have a sexy comment form that validates
user input...no JavaScript required!
A slider, with scripted output
We've seen <input type=range> earlier in this chapter. Notice
that, by default, browsers show the slider, but don't give any
indication of the minimum, maximum, or current value of the
slider, so let's code up an example that actually shows the user
the range allowed by the slider by automatically indicating the
minimum and maximum values, and dynamically outputting the
slider's current value.
The slider will go from 1 to 11, as all good controls should (be
they for guitar amps or otherwise). The step will be 1, which is
the default, so we can omit that attribute:
<input type=range min=1 max=11 name=tap>
To s h To w t h e u s e r t h e m i n i m u m a n d m a x i m u m v a l u e s , w e
can use generated content (which doesn't work on sliders in
WebKit browsers):
input[type=range]::before {content: attr(min);}
input[type=range]::after {content: attr(max);}
This will show the values, and style them as defined in CSS.
For example, Figure 3.12 renders
input[type=range]{width:500px; color:red; font-family:
¬ cursive; font-size:2em;}