Form Validation and Other Future HTML5 Form Enhancements - 11

Download this episode

Download Video

Download captions

Download Captions

Description

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

Tags:

HTML 5, HTML5, IE 10

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      s3curity​Consult

      Hey Bob When I tried to validate the page created in this lesson, I get the following errors:

      Error: Attribute required not allowed on element input at 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 5 is 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?

    • User profile image
      BobTabor

      @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!

    • User profile image
      Reid

      @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.

    • User profile image
      Srihari​Sridharan

      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.

    • User profile image
      golnazal

      opening thread

       

    • User profile image
      Chirag

      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??

    • User profile image
      BobTabor

      @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".  Smiley

    • User profile image
      Jerry

      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.

    • User profile image
      BobTabor

      @Jerry: Great feedback!  You're absolutely right.  These are legit nits.  Smiley  Thanks Jerry -- bt

    • User profile image
      mobell32

      for some funny reason the options from 

      datalist
      aren't showing except on FF . I use IE10

    • User profile image
      BobTabor

      @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?

    • User profile image
      SheldonS

      This is a great series so far, I have recommended it and your series on JavaScript to friends that are interested in getting into web development.

      As a side note, I found something interesting about the input type URL.  Apparently it will submit as long as you have the http://.  I only found this because Opera will automatically insert http:// for you.  Apparently the type does not check for a proper URL that contains .com/net/org...  I checked this in IE10, Chrome, and Opera.  Opera was the only one that automatically inserted the http:// for me.

    • User profile image
      Jacob

      Hi Bob,

      This is a great video series! However, I do not understand why the <span> element is used in this tutorial. Can you please explain its purpose in the context of how it is used here?

      Thank you,

      - Jacob

    • User profile image
      BobTabor

      @SheldonS: Ah ... interesting.  Thanks for posting.

      @Jacob: I haven't re-watched this video, but if you can give me a specific time marker (like @5:45) I may be able to explain.  I'm guessing (without looking) that it is merely as a way to style some specific part of the document.

    • User profile image
      gduncan411

      Opening thread

    • User profile image
      saikatdas07​90

      Hey Bob,

      How come you dont enclose all the attribute values in double-quotes like the standard states? Is there something I missed?

    • User profile image
      BobTabor

      @saikatdas0790: Where did you read that?  I'm looking at this link:

      http://www.w3.org/TR/html-markup/spec.html#syntax-attributes

      FTA:

       

      Attribute values can contain text and character references, with additional restrictions depending on whether they are unquoted attribute values, single-quoted attribute values, or double-quoted attribute values. Also, the HTML elements section of this reference describes further restrictions on the allowed values of particular attributes, and attributes must have values that conform to those restrictions.

      In the the HTML syntax, attributes can be specified in four different ways:

      empty attribute syntax
      unquoted attribute-value syntax
      single-quoted attribute-value syntax
      double-quoted attribute-value syntax

    • User profile image
      saikatdas07​90

      Oh, alright! When I saw you NOT using double quotes, I googled and came across this -

      http://www.w3schools.com/html/html_attributes.asp

      Hence, the question. Thanks for pointing that out!

    • User profile image
      Ian

      Reference to 4:37 time in lesson video.

      Your result: This is a required field(no period) bubble pops down from the bottom left of the box when submit is clicked.

      My result: Please fill out this field. Pops down from bottom left of the box after submit is pushed.

      I'm using an I-Mac running Mavericks and my browser is Firefox. Up to now everything has looked exactly like Bob's results even though he uses Windows and Internet Explorer browser.

      Not a big deal I guess just an example of how the same code may look a tad different on different browsers.

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.