96

How do you impose a character limit on a text input in HTML?

Iwasakabukiman
  • 1,453
  • 4
  • 15
  • 17

6 Answers6

134

There are 2 main solutions:

The pure HTML one:

<input type="text" id="Textbox" name="Textbox" maxlength="10" />

The JavaScript one (attach it to a onKey Event):

function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } 
}

But anyway, there is no good solution. You can not adapt to every client's bad HTML implementation, it's an impossible fight to win. That's why it's far better to check it on the server side, with a PHP / Python / whatever script.

Kunj
  • 1,980
  • 2
  • 22
  • 34
Bite code
  • 578,959
  • 113
  • 301
  • 329
  • 27
    Check on the server as a final sanity check, but add client-side enhancement if you can do so; it makes for a richer user experience. – Rob Jun 04 '09 at 08:48
44

there's a maxlength attribute

<input type="text" name="textboxname" maxlength="100" />
cruizer
  • 6,103
  • 2
  • 27
  • 34
  • 1
    This is true, but some clients don't check this. This is especcially true for mobile phone based clients. – Drejc Sep 22 '08 at 06:31
  • There are also ways to remove them. For example the Firefox Web Developer Extension has a Remove Maximum lengths function. – Sam Hasler Sep 24 '08 at 02:55
  • With chrome and it's developer kit (which comes with the browser) it's simple to remove such things in the html – AntonioCS Mar 19 '12 at 13:37
12

In addition to the above, I would like to point out that client-side validation (HTML code, javascript, etc.) is never enough. Also check the length server-side, or just don't check at all (if it's not so important that people can be allowed to get around it, then it's not important enough to really warrant any steps to prevent that, either).

Also, fellows, he (or she) said HTML, not XHTML. ;)

Devin Jeanpierre
  • 92,913
  • 4
  • 55
  • 79
  • i agree. one can POST data directly into a web site using some scripting tool, so in that case maxlength and other browser-side validations are not foolproof – cruizer Sep 22 '08 at 06:12
  • or use firebug and remove the maxlength attribute. – Zach Sep 22 '08 at 06:19
5

use the "maxlength" attribute as others have said.

if you need to put a max character length on a text AREA, you need to turn to Javascript. Take a look here: How to impose maxlength on textArea in HTML using JavaScript

Community
  • 1
  • 1
nickf
  • 537,072
  • 198
  • 649
  • 721
  • check this link in StackOverflow: http://stackoverflow.com/questions/1125482/how-to-impose-maxlength-on-textarea-in-html-using-javascript – TlonXP Sep 02 '12 at 17:46
1

For the <input> element there's the maxlength attribute:

<input type="text" id="Textbox" name="Textbox" maxlength="10" />

(by the way, the type is "text", not "textbox" as others are writing), however, you have to use javascript with <textarea>s. Either way the length should be checked on the server anyway.

pilsetnieks
  • 10,330
  • 12
  • 48
  • 60
0

you can set maxlength with jquery which is very fast

jQuery(document).ready(function($){ //fire on DOM ready
 setformfieldsize(jQuery('#comment'), 50, 'charsremain')
})
shekh danishuesn
  • 21
  • 4