SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    maxlength as only input length definition

    Is it OK to have maxlength as the only length definition of an input type="text"? Will all browsers make sure the entire length is visible?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The maxlength attribute only specifies how many characters a user should be able to type in a field. It says nothing about the visible size of the element. Note that browsers may or may not respect the maxlength setting, so you still need to validate it server-side. (And nefarious scripts, of course, will definitely not bother.)

    The visible width of input fields should be specified in CSS (preferably in em units, so that it adapts when the user changes the text size).
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thank you. If I have maxlength="10" and font-size:1em, should width:10em keep the entire field visible across browsers?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Since characters in most fonts vary in width the number of characters that will be visible will depend on what characters are entered. iiiiiiiiii takes up less width than MMMM even though it contains 2-1/2 times as many characters.
    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
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But there aren't any fonts that are wider than they are tall, right? em refers to the height of the font, right? It seems like 10em would cover maxlength="10" and font-size:1em in all situations.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by tonearm View Post
    But there aren't any fonts that are wider than they are tall, right? em refers to the height of the font, right? It seems like 10em would cover maxlength="10" and font-size:1em in all situations.
    1 em is defined as the width of a capital M which is usually the widest character (or at least that was the original definition and the reason for the name of the units)
    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
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually divide the number of characters by 2, rounding up if necessary, to get a suitable value in em. So for a 10-character field I'd probably use width:5em or so.

    But you are right: if you set the width to 10em you're virtually guaranteed that even ten W's will fit.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. AutisticCuckoo, I just tried your method of determining width and the field ended up being 25&#37; too short on Firefox-3.0.11 on Linux. The characters I used were all numbers. Just thought I'd let you know.

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it's a rule of thumb only. For numeric fields I usually add one or two units, so that a ten-digit field gets width:6em or width:7em. It depends a bit on which font you use, too.
    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
  •