question about form validation

Discussion in 'HTML' started by gerg, Mar 13, 2006.

  1. gerg

    gerg Guest

    I am trying to produce a valid html / css layout at the site:

    http://www.guardianharvest.com

    I have a form in which I want all the form elements to be in a strait
    line IE:

    Username: <input box> Password: <input box> <submit button>

    However apon validation it says that I can't have textual elements in a
    form without a wrapper of some sort, <p> or <div> however apon adding
    these elements around the text I can no longer keep all the elements in
    a strait line. Check out the above site and you'll see what I mean.

    Any ideas?

    Thanks in advance.

    Greg
    gerg, Mar 13, 2006
    #1
    1. Advertising

  2. gerg

    Toby Inkster Guest

    gerg wrote:

    > Username: <input box> Password: <input box> <submit button>
    >
    > However apon validation it says that I can't have textual elements in a
    > form without a wrapper of some sort, <p> or <div> however apon adding
    > these elements around the text I can no longer keep all the elements in
    > a strait line.


    <form ...>
    <div>
    <label>Username: <input name="username"></label>
    <label>Password: <input name="password" type="password"></label>
    <input type="submit" value="Log In">
    </div>
    </form>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 13, 2006
    #2
    1. Advertising

  3. gerg <> wrote:

    > I have a form in which I want all the form elements to be in a strait
    > line IE:
    >
    > Username: <input box> Password: <input box> <submit button>


    Stop wanting that. Such a layout reduces accessibility. Put one field,
    together with its label, on one line.

    > However apon validation it says that I can't have textual elements in a
    > form without a wrapper of some sort, <p> or <div>


    Yes, if your document purports to use syntax that requires it.

    > however apon adding
    > these elements around the text I can no longer keep all the elements in
    > a strait line.


    Yes you can. You don't put each element in a block of its own. That would
    actually be against the idea of block. You can wrap all the stuff inside a
    single <div> or, more reasonably, use
    <div>Username: <input ...></div>
    <div>Password: <input ...></div>
    <div>submit button</div>

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Mar 13, 2006
    #3
  4. gerg

    gerg Guest

    Toby Inkster wrote:
    > gerg wrote:
    >
    >
    >>Username: <input box> Password: <input box> <submit button>
    >>
    >>However apon validation it says that I can't have textual elements in a
    >>form without a wrapper of some sort, <p> or <div> however apon adding
    >>these elements around the text I can no longer keep all the elements in
    >>a strait line.

    >
    >
    > <form ...>
    > <div>
    > <label>Username: <input name="username"></label>
    > <label>Password: <input name="password" type="password"></label>
    > <input type="submit" value="Log In">
    > </div>
    > </form>
    >


    Toby, thanks for the response. After changing my markup to add the
    <label> tag i'm now getting this error from the validator:

    Error Line 24 column 6: document type does not allow element "label"
    here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div",
    "pre", "address", "fieldset", "ins", "del" start-tag.

    It did work as far as allowing me to keep my form in a strait line, but
    the validator dosen't seem to like it.

    http://www.guardianharvest.com

    Thanks again Toby.

    Greg
    gerg, Mar 13, 2006
    #4
  5. gerg

    gerg Guest

    Jukka K. Korpela wrote:

    >>I have a form in which I want all the form elements to be in a strait
    >>line IE:
    >>
    >>Username: <input box> Password: <input box> <submit button>

    >
    >
    > Stop wanting that. Such a layout reduces accessibility. Put one field,
    > together with its label, on one line.


    Thank you, that's very helpful. How does it reduce accessibility?

    > Yes you can. You don't put each element in a block of its own. That would
    > actually be against the idea of block. You can wrap all the stuff inside a
    > single <div> or, more reasonably, use
    > <div>Username: <input ...></div>
    > <div>Password: <input ...></div>
    > <div>submit button</div>



    If I do the <div>username <input..></div> i get the stacked layout,
    which is not what I WANT. Aside from "stop wanting that" is there any
    other advice you could offer?

    Thanks in advance.

    Greg
    gerg, Mar 13, 2006
    #5
  6. gerg

    Toby Inkster Guest

    gerg wrote:

    > It did work as far as allowing me to keep my form in a strait line, but
    > the validator dosen't seem to like it.


    I bet you left out the <DIV> element, which was in my example.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 13, 2006
    #6
  7. gerg wrote:

    > Jukka K. Korpela wrote:
    >
    >>>I have a form in which I want all the form elements to be in a strait
    >>>line IE:
    >>>
    >>>Username: <input box> Password: <input box> <submit button>

    >>
    >> Stop wanting that. Such a layout reduces accessibility. Put one field,
    >> together with its label, on one line.

    >
    > Thank you, that's very helpful. How does it reduce accessibility?


    In a narrow viewport, the forced wrapping may end up looking like...

    Username: <input box> Password:[NEW LINE]
    <input box> <submit button>

    I think it is more of a making your site look like the rest - standards and
    the like. If you prefer your look and feel - go for it!


    >> Yes you can. You don't put each element in a block of its own. That would
    >> actually be against the idea of block. You can wrap all the stuff inside
    >> a single <div> or, more reasonably, use

    >
    > If I do the <div>username <input..></div> i get the stacked layout,
    > which is not what I WANT. Aside from "stop wanting that" is there any
    > other advice you could offer?


    I haven't tried it, but <div> </div> creates a block, resulting in your
    stacked layout. <span> </span> may resolve your issue. The second option
    might be <div class="inline"> </div> around each item, and in your
    stylesheet, specify display="inline" for the related class, to remove the
    'block' effect.

    > Thanks in advance.


    I hope this helps,

    Carolyn
    --
    Carolyn Marenger
    Carolyn Marenger, Mar 13, 2006
    #7
  8. gerg

    gerg Guest

    Carolyn Marenger wrote:
    > gerg wrote:
    >
    >
    >>Jukka K. Korpela wrote:
    >>
    >>
    >>>>I have a form in which I want all the form elements to be in a strait
    >>>>line IE:
    >>>>
    >>>>Username: <input box> Password: <input box> <submit button>
    >>>
    >>>Stop wanting that. Such a layout reduces accessibility. Put one field,
    >>>together with its label, on one line.

    >>
    >>Thank you, that's very helpful. How does it reduce accessibility?

    >
    >
    > In a narrow viewport, the forced wrapping may end up looking like...
    >
    > Username: <input box> Password:[NEW LINE]
    > <input box> <submit button>
    >
    > I think it is more of a making your site look like the rest - standards and
    > the like. If you prefer your look and feel - go for it!
    >
    >
    >
    >>>Yes you can. You don't put each element in a block of its own. That would
    >>>actually be against the idea of block. You can wrap all the stuff inside
    >>>a single <div> or, more reasonably, use

    >>
    >>If I do the <div>username <input..></div> i get the stacked layout,
    >>which is not what I WANT. Aside from "stop wanting that" is there any
    >>other advice you could offer?

    >
    >
    > I haven't tried it, but <div> </div> creates a block, resulting in your
    > stacked layout. <span> </span> may resolve your issue. The second option
    > might be <div class="inline"> </div> around each item, and in your
    > stylesheet, specify display="inline" for the related class, to remove the
    > 'block' effect.
    >
    >
    >>Thanks in advance.

    >
    >
    > I hope this helps,
    >
    > Carolyn



    Carolyn and Toby, Thank you for your quick and consise responses. I'm
    gonna go make this work now! Thanks again.

    Greg
    gerg, Mar 14, 2006
    #8
  9. Jukka K. Korpela, Mar 14, 2006
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Colin Basterfield

    Web form validation vs object validation

    Colin Basterfield, Nov 28, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    425
    Tommy
    Nov 29, 2003
  2. Sumith Mathur
    Replies:
    0
    Views:
    2,201
    Sumith Mathur
    Sep 23, 2004
  3. OriginalBrownster

    string validation/ form validation

    OriginalBrownster, Aug 21, 2006, in forum: Python
    Replies:
    1
    Views:
    421
    Simon Forman
    Aug 21, 2006
  4. Grigory Temchenko
    Replies:
    0
    Views:
    328
    Grigory Temchenko
    Dec 28, 2008
  5. bnp
    Replies:
    4
    Views:
    318
Loading...

Share This Page