form field sizing

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Jeff

    form field sizing

    I've always set form element sizes by using size on textfields and
    rows and cols on textareas.

    That's always lead to inconsistencies and a bit of guesswork when you
    want a form element to fill a fixed width and you want textfields to be
    as wide as textareas.

    Now, we can use a bit of CSS to set the width and for textareas also
    the height.

    Is that a good idea, and if so should I still set size, cols and rows?

    Is this widely supported?

    It seems like every few years I have to unlearn something.

    Jeff
  • Jukka K. Korpela

    #2
    Re: form field sizing

    Scripsit Jeff:
    I've always set form element sizes by using size on textfields and
    rows and cols on textareas.
    Fine. Just make sure you enlargen them to be sufficient. That's more
    than they currently are, probably. Too many textareas are stamp-size.
    Too few fields for surname input do not allow Mrs.
    Hämäläinen-Virrankoski to enter her name visibly.
    That's always lead to inconsistencies and a bit of guesswork when
    you want a form element to fill a fixed width and you want textfields
    to be as wide as textareas.
    Then stop wanting such things.

    The widths are for convenient input, not for the author's esthetic eye.
    Now, we can use a bit of CSS to set the width and for textareas also
    the height.
    That doesn't mean we should.
    Is that a good idea, and if so should I still set size, cols and
    rows?
    Consider the CSS Caveats:


    Besides, the cols and rows attributes are required in a textarea element
    by HTML syntax. And you should always set the size attribute for a
    single-line text input field, since its default value is unspecified.
    It seems like every few years I have to unlearn something.
    Indeed. But that's a different story.

    --
    Jukka K. Korpela ("Yucca")


    Comment

    • Ben C

      #3
      Re: form field sizing

      On 2008-02-09, Jukka K. Korpela <jkorpela@cs.tu t.fiwrote:
      [...]One thing you say there is "CSS Support varies [...] For form fields,
      many CSS properties are often ignored by browsers".

      It's not really lack of "support" for anything. Any CSS styling you can
      do on form fields at all is a bonus. As far as the CSS 2.1 specification
      is concerned, buttons, textareas, etc., are replaced elements. You
      shouldn't expect to be able to style them with CSS properties at all,
      although most browsers do let you set a few things.

      Comment

      • Jeff

        #4
        Re: form field sizing

        Jukka K. Korpela wrote:
        Scripsit Jeff:
        >
        > I've always set form element sizes by using size on textfields and
        >rows and cols on textareas.
        >
        Fine. Just make sure you enlargen them to be sufficient. That's more
        than they currently are, probably. Too many textareas are stamp-size.
        Too few fields for surname input do not allow Mrs.
        Hämäläinen-Virrankoski to enter her name visibly.
        Oddly, my default text field is 30, which is more than that. And I
        usually make textareas 55 x 4 sometimes with an auto lengthen.

        The trouble is that you usually want textareas to take up the max
        width and generally you have to downsize them to due to width
        requirements on some browser. That's why I thought style="width: 100%"
        would be nice. I'll have to read the caveats later to see why that isn't
        so.

        Jeff
        >
        > That's always lead to inconsistencies and a bit of guesswork when
        >you want a form element to fill a fixed width and you want textfields
        >to be as wide as textareas.
        >
        Then stop wanting such things.
        >
        The widths are for convenient input, not for the author's esthetic eye.
        >
        > Now, we can use a bit of CSS to set the width and for textareas also
        >the height.
        >
        That doesn't mean we should.
        >
        > Is that a good idea, and if so should I still set size, cols and
        >rows?
        >
        Consider the CSS Caveats:

        >
        Besides, the cols and rows attributes are required in a textarea element
        by HTML syntax. And you should always set the size attribute for a
        single-line text input field, since its default value is unspecified.
        >
        > It seems like every few years I have to unlearn something.
        >
        Indeed. But that's a different story.
        >

        Comment

        • Jukka K. Korpela

          #5
          Re: form field sizing

          Scripsit Jeff:
          I never was fond of scrollbars on textareas, so on
          textareas that could need to be very long (or not at all), I simple
          add a couple rows when needed. Been doing it for 4 or 5 years. As far
          as I know,
          I'm the only one that does that.
          Now you're explaining something that you yourself characterize as
          unique, and later you're telling that you work with px dimensioned
          layout as so many others. Somehow this does not add up.
          No complaints so far.
          Web users don't complain. They just go away, or don't get the job done,
          or start hating the site.
          >Anyway, 4 is far from sufficient for any normal textarea.
          >
          Actually I find most textarea needs are far less than that.
          I'm speechless. See above. It's an insult to users to ask them to send
          feedback, or add any comments, and allocate the ridiculous four lines
          for it.
          Aesthetics my boy. Edges should line up. Set a width for you form,
          either in % or pixels and the right edges should align. Just as the
          left do.
          That's poor usability, since the lengths of fields don't act as clues
          any more.

          --
          Jukka K. Korpela ("Yucca")


          Comment

          • Jukka K. Korpela

            #6
            Re: form field sizing

            Scripsit Jukka K. Korpela:
            There's no "half-replaced element" concept in CSS, so any _partial_
            support to CSS features for, say, <inputelement s violates CSS
            specifications (or "specifications ").
            Oops. My conclusion is not correct, due to a specific looseness
            statement in the CSS 2.1 draft:

            "CSS 2.1 does not define which properties apply to form controls and
            frames, or how CSS can be used to style them. User agents may apply CSS
            properties to these elements. Authors are recommended to treat such
            support as experimental. A future level of CSS may specify this
            further."


            So browsers may "legimately " ignore all style sheet rules for form
            fields, or implement them, or anything between these two extremes.
            Moreover, the CSS 2.1 draft does not specify _how_ the properties might
            apply to fields; for example, if you set the background of a radio
            button, does this mean the thing inside the circle, or a hypothetical
            rectangle around it, or both?

            The looseness statement is not present in CSS 2.0, which is, unlike CSS
            2.1, a "W3C Recommendation" , though not recommended by the W3C. In
            practice, it's a useful warning.

            --
            Jukka K. Korpela ("Yucca")


            Comment

            • Bergamot

              #7
              Re: form field sizing

              Jukka K. Korpela wrote:
              >
              This vagueness reflects the fact that browsers have used built-in
              routines of underlying systems to implement form fields,
              That seems only partially true, or more specifically, they may partially
              use built-in routines of underlying systems.

              Safari, for example, seems to ignore styling of submit buttons, but it
              doesn't just take the default styling of the O/S, either. The Windows
              version of Safari styles form fields unlike anything else in my whole
              system. Ditto Opera.

              --
              Berg

              Comment

              • Jeff

                #8
                Re: form field sizing

                Jukka K. Korpela wrote:
                Scripsit Jeff:
                >
                >I never was fond of scrollbars on textareas, so on
                >textareas that could need to be very long (or not at all), I simple
                >add a couple rows when needed. Been doing it for 4 or 5 years. As far
                >as I know,
                >I'm the only one that does that.
                >
                Now you're explaining something that you yourself characterize as
                unique, and later you're telling that you work with px dimensioned
                layout as so many others. Somehow this does not add up.
                Now, you've snipped that without noting and removed the meaning in the
                process.
                >
                >No complaints so far.
                >
                Web users don't complain. They just go away, or don't get the job done,
                or start hating the site.
                >
                >>Anyway, 4 is far from sufficient for any normal textarea.
                >>
                >Actually I find most textarea needs are far less than that.
                >
                I'm speechless. See above. It's an insult to users to ask them to send
                feedback, or add any comments, and allocate the ridiculous four lines
                for it.
                Surely you realize that there are many other uses for textareas? You
                were just talking about how a textfield is often insufficient.

                My default is either 4 or 5. Making forms is a typical thing to do, so
                like any programmer would, I have a utility where you input the field
                names, label, types... and that spits out an editable form with the
                database table code. Sizes can get fine tuned from there and styles
                added. Perhaps you haven't seen enough live data to get a feel for what
                web surfers do... Or that feedback is only one use, and certainly you
                would have more than 4 rows for such a textarea. I certainly don't spend
                my time writing contact forms and I know of no one else who does. But if
                you have a typical form with perhaps a half dozen or so of textfields,
                options and textareas you don't want to make all the textareas so long
                that the page scrolls and scrolls and scrolls, that is discouraging to a
                user. You should be able to see the end.

                Jeff
                >
                >Aesthetics my boy. Edges should line up. Set a width for you form,
                >either in % or pixels and the right edges should align. Just as the
                >left do.
                >
                That's poor usability, since the lengths of fields don't act as clues
                any more.
                Well, I don't understand how you could come the end of a textarea and
                not know you were there.
                >

                Comment

                • Ed Mullen

                  #9
                  Re: form field sizing

                  Bergamot wrote:
                  Jukka K. Korpela wrote:
                  >This vagueness reflects the fact that browsers have used built-in
                  >routines of underlying systems to implement form fields,
                  >
                  That seems only partially true, or more specifically, they may partially
                  use built-in routines of underlying systems.
                  >
                  Safari, for example, seems to ignore styling of submit buttons, but it
                  doesn't just take the default styling of the O/S, either. The Windows
                  version of Safari styles form fields unlike anything else in my whole
                  system. Ditto Opera.
                  >
                  FYI

                  Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                  Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                  Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                  Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                  Help for Mozilla, Firefox and SeaMonkey. Performances and original music.


                  Interesting.

                  --
                  Ed Mullen
                  Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                  Is sloppiness in speech caused by ignorance or apathy? I don't know and
                  I don't care. - William Safire

                  Comment

                  • Ed Mullen

                    #10
                    Re: form field sizing

                    Ed Mullen wrote:
                    Bergamot wrote:
                    >Jukka K. Korpela wrote:
                    >>This vagueness reflects the fact that browsers have used built-in
                    >>routines of underlying systems to implement form fields,
                    >>
                    >That seems only partially true, or more specifically, they may partially
                    >use built-in routines of underlying systems.
                    >>
                    >Safari, for example, seems to ignore styling of submit buttons, but it
                    >doesn't just take the default styling of the O/S, either. The Windows
                    >version of Safari styles form fields unlike anything else in my whole
                    >system. Ditto Opera.
                    >>
                    >
                    FYI
                    >
                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    >
                    Interesting.
                    >
                    As for (from VK's reply elsewhere)
                    If there is not relative font-size set, in both IE6 and IE7 form
                    elements will be excluded for font (IE6) or screen (IE7) sizing on say
                    Ctrl+
                    see ...

                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.


                    All images using current versions of specified browsers on Windows XP Pro.

                    --
                    Ed Mullen
                    Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

                    Give a person a fish and you feed them for a day; teach that person to
                    use the Internet and they won't bother you for weeks.

                    Comment

                    Working...