SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Input Size vs. Width

    I'm trying to figure out what the difference is with text input's size vs. witdh. I know that width controls the actual width of the textbox in either pixels or % but I don't understand visually what size does.

    And should size be an optional attribute in lets say a custom OOP control?

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did a quick experiment on my machine. I created a HTML 4 document and placed a INPUT element inside a P element. I then experimented with size and width attributes. Size changed the visible width of the input element (measured in characters). Width was an invalid attribute and did nothing.

    It is also possible to use CSS to set the width of an input element. Size is the HTML way to set the width, while width is the CSS way to set the width. Either can be used, but CSS is generally easier to maintain.

    Also, size is an optional attribute.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The size attribute is mainly presentational, and I avoid it unless it's really important to set a width for non-CSS browsers like Lynx. The exception is for select elements, where it's needed to create a list box instead of a drop-down list.

    The widths of text fields etc should be specified with the width property in CSS. It has the advantage of letting you specify the width in em, as well.

    For textarea elements the rows and cols attributes are required, but I still think the dimensions should be overridden with CSS.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually found that size did nothing and width changed the physical width of the textbox

    width="100px"

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    of course I was looking at this page:

    http://www.blooberry.com/indexdot/ht.../inputtext.htm

    looks like at the top this is only HTML 2.0 compliant?

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is a better link:

    http://xhtml.com/en/xhtml/reference/

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I take that back size="20px" does physically change the texbox size

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't size supposed to limit the number of characters the user can insert in the text field?

    size
    (Number) This attribute tells the Web browser the initial width of the control. The width is given in pixels except when the type attribute has the value text or password. In such cases, its value is the number of characters.
    (from http://xhtml.com/en/xhtml/reference/input/)

    Width is the one that I think shouldn't be used here.

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by somezing View Post
    Isn't size supposed to limit the number of characters the user can insert in the text field?
    That's actually the purpose of the maxlength attribute.

  10. #10
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    width has been retired. Use size.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by espresso View Post
    width has been retired. Use size.
    You have that backwards.

    You should always set the width of the field by specifying a width in the stylesheet. For example:

    width:100px
    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="^$">

  12. #12
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you were to specify the width in a stylesheet then you could end up with hundreds of styles defined in your .css

    I don't think that's practical. And you definitely would not want inline styles in your Mark-up period.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by espresso View Post
    If you were to specify the width in a stylesheet then you could end up with hundreds of styles defined in your .css

    I don't think that's practical. And you definitely would not want inline styles in your Mark-up period.
    It is perfectly practical - for most forms you would only ever want the fields to display in a very small number of widths and so would need at most three or four classes to be defined for it.

    Defining it via the HTML is completely impractical since different browsers interpret size differently and so what might be big enough to display 3 of a given character in one browser will be big enough for 6 of that character in a different browser and therefore can't look right in both.

    It isn't like you are defining how much can be entered into the field or even how much will fit in the display since how much can be entered comes from the maxlength attribute and how much will display depends on what characters are entered and how much width each of them uses - so a lot of iiiiii will fit in the same space as very few MM.
    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="^$">

  14. #14
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what's practical and what's reality depends on how complex your site is, especially if it's an ecommerce site. On our site, every product has a dynamic set of fields spit out from a custom control. Those textboxes vary and we have about 100 variances because each product has different configurations for it..it's a configurator.

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by espresso View Post
    I take that back size="20px" does physically change the texbox size
    The size attribute doesn't allow you to specify a unit, only a number. According to the specification,
    This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.
    Quote Originally Posted by espresso View Post
    If you were to specify the width in a stylesheet then you could end up with hundreds of styles defined in your .css
    Sounds like bad design and poor usability to me. As Stephen said, a handful of classes should do it. It's often a good idea to make text fields span the whole width of the form, unless it's really important to point out that a particual field only accepts a small number of characters.
    Birnam wood is come to Dunsinane


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
  •