Form Validation and Other Future HTML5 Form Enhancements - 11
- Posted: Jul 30, 2012 at 11:56 AM
- 28,712 Views
- 11 Comments
This video looks toward new HTML5 form features used in Internet Explorer 10 and later. First up is a look at using new input elements and attributes for creating richer forms. Bob then demonstrates how built-in validation works and how it can reduce the amount of JavaScript required by web pages hosting forms.
Download the source code for Form Validation and Other Future HTML5 Form Enhancements
Comment on the Post
Already have a Channel 9 account? Please sign in
More posts in this series
-
Creating Forms - 10
-
Form Validation and Other Future HTML5 Form…
-
Understanding Cascading Style Sheets - 12
Follow the Discussion
Oops, something didn't work.
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.sign up for email notifications?
Hey Bob When I tried to validate the page created in this lesson, I get the following errors:
Error: Attribute
requirednot allowed on elementinputat this point.From line 48, column 37; to line 48, column 88
<p><label><span>Range input: </span><input type=range name=rangeInput required value=42></label>By default....</p>Warning: Attribute
5is not serializable as XML 1.0.From line 68, column 30; to line 68, column 55
<p><label><span>step: </span><input type=number step 5></label>Any ideas what they are talking about here?
@s3curityConsult: Sorry I lost track of this one! Could you post your code? Also, can you try *my* code (download on this page) and see if you get the same errors). We can go from there. Sorry for the delay!
@s3curityConsult: This may or may not be correct as I am still learning but from my understanding of the HTML5 documentation, the required attribute is not supported for the range type as it will always contain a value even when not specified. As for your second problem the = is missing between step and 5.
Hope this helps.
Hi Bob,
These videos are / were extremely helpful. About the input type=number, chrome supported it better than IE10. It shows a numeric up/dowm control with set of two arrows at the end of the text box, to increment and decrement numbers.
opening thread
Hey bob can u tel me for set the screen resolution for all type of screen as well as mobile screen which code i have to write in my css file??
@Chirag: Off the top of my head? No. HOWEVER if you watch the very last video in this series, I talk about CSS Frameworks, especially Bootstrap by Twitter which will take care of those sorts of concerns for you "magically".
Hi Bob, great videos. A couple of suggestions I'd make:
1. after you have shown a required field type, make it not required so that you wouldn't have so much repetitive form entry
2. Add your new examples at the top of the form to require less scrolling.
These are definitely 'nits' as I am enjoying the presentation.
@Jerry: Great feedback! You're absolutely right. These are legit nits.
Thanks Jerry -- bt
for some funny reason the options from
aren't showing except on FF . I use IE10@mobell32: Hmm... Take a look at this page on IE 10:
http://www.quirksmode.org/html5/tests/inputs_misc.html
... it works for me. Are you sure you / I have them typed in correctly?
Remove this comment
Remove this thread
close