SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question input tag cross-browser compatibility

    I hope I've picked the correct forum for this. Sorry if I've guessed wrong.

    It is apparently a correct interpretation of the XHTML 1.0 standard (using STRICT validation) that the input tag can be used outside of a form (<form>) tag – at least according to the W3C validator folks. For example:
    <div id=’playingBoard’>
    <input type=”button” class=”square sqButton” />
    . . .
    </div>
    My question specifically centers around the use of a button input tag (e.g., <input type=”button” . . . />) where the intent is that no information is to be sent to a server. Javascript sets up the “onclick” attribute, and control stays local on the client (thus there’s really no use for a form tag and its “action” attribute.) The CSS class definitions define each input tag as a square and floats it left to fill its container (the playingBoard.)
    The above code snippet validates with the W3C HTML validator, and Firefox 3.6.x seems to handle the code as I had expected/hoped, as does IE 8.0.x. However, with IE 6.0.2900 it seems necessary that the <input> tags be enclosed within a <form> tag in order to correctly process the code, even with a DOCTYPE specifying xhtml 1.0 STRICT; as in, for example:
    <div id=’playingBoard’>
    <form action=”…”…?
    <input type=”button” class=”square sqButton” />
    . . .
    </form>
    </div>
    My question is this: Is this just a problem with IE6’s handling of an input tag without an enclosing form tag, or is the problem being caused by IE6’s handling of some other (style/CSS) property such as float, position, or whatever? Anybody got any ideas?

    Thanks in advance for your help.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    The validator can't detect everything that is invalid.

    In the case of an <input> tag it is required to be inside a block level tag such as <fieldset> or <div> which in turn must be inside a <form> tag for the input to be valid. It is because of the two levels of nesting that are required that the validator can't tell if you got it right since not all <div> tags need to be inside a form.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Obviously the INPUT is most useful within a FORM and that where it is "supposed" to be found representing a 'form control' - as previously mentioned.

    Although HTML 4.0 allows INPUT in nearly any block-level (permitted within the BODY) or inline element [other than BUTTON (like XHTML 1.0)] if I remember correctly.

    That is why you didn't have an error flagged. In contrast with [HTML 3.2] INPUT, SELECT and TEXTAREA are only allowed within FORM elements thus it differs slightly.

    Though the bottom-line is they are supposed to be contained within a FORM at some level.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Though the bottom-line is they are supposed to be contained within a FORM at some level.
    Not just supposed to be but REQUIRED to be inside a form in HTML 4. They are not allowed to be directly nested in the form tag though the way they could be in HTML 3.2. There MUST be a block level element in between.

    Since the validator can't check the relationship between three tags at once it is not able to check that you have one of the following but just because the validator doesn't give an error if one of the following structures doesn't exist doesn't mean your page is valid.

    <form><p><input></p></form>
    <form><div><input></div></form>
    <form><fieldset><input></fieldset></form>

    If you don't have one of the above (you can have other tags in between) then your input tag is invalid in HTML 4.

    In HTML 3.2 the following is also valid

    <form><input></form>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    jmh2010:
    Quote Originally Posted by w3c
    The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
    http://www.w3.org/TR/html401/interac....html#h-17.2.1

    Sounds like you are building a user interface, so there you go. But be aware you are seriously depending on the user having Javascript, and since you are checking IE6, it doesn't sound like this is on an intranet. So, know you are making something that will lock out some people (like me).

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    User interfaces (which rely on J(ava)Script to function) are only really suitable for intranets where you can ensure that the appropriate browser language is enabled.

    For all internet use you should have a form so that the input field(s) can be submitted to the server for processing for those people who do not have JavaScript.

    If you are going to build a user interface for the internet then it should be built in JavaScript and not in HTML so that those without JavaScript are not shown non-functional input fields.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    ^agreed.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •