limit number of characters in html form

Question

What I am trying to do is get some input from user (ie. name) but restrict number of characters to more than 5.... is there a way to do that?

also is there a way to make sure that a text input only accepts numbers? (trying to enter ID)

 <tr>
   <th>ID:</th>
   <td><input type="text" placeholder="ID" name="studet_ID"></td>
 </tr>
 <tr>
   <th>Full name:</th>
   <td><input type="text" placeholder="Full name" name="studet_name">
 </td>

You mean you want the *minimum* number of characters to be 6? — lurker, May 20 '14 at 19:18
You can always have a JavaScript form validation and back-end (PHP) validation before you accept any data. — Biotox, May 20 '14 at 19:20

score 3 · Accepted Answer · answered May 20 '14 at 19:22

3

<input pattern=".{5,}" required title="5 characters minimum" type="number">

Input pattern is the easiest way to force a range of characters in a form.

Edit(s):

There is limited browser support for patterns.
Use number type for an ID

answered May 20 '14 at 19:22

Jordan.J.D

7,999
11
48
78

@MaximeLorant I will include that there is limited browser support. – Jordan.J.D May 20 '14 at 19:23
+1 for the pattern attribute. Also, an `` can be used for the ID input. – MrCode May 20 '14 at 19:24

gat · Answer 2 · 2014-05-20T19:30:06.730

Although you should check for the length in the backend (ie. your PHP scripts). There are a couple of ways to do that on the client side.

You can achieve this with a variety of JavaScript libraries [1] [2] [3], but the simplest method would be to use the HTML 5 form attributes: http://www.w3.org/TR/html5/forms.html#the-maxlength-and-minlength-attributes:

<input type="text" name="student_name" minlength=5>

You can specify both min and max lengths for your input field in HTML5.

Similarly, you can have checks for number using type: http://www.w3.org/TR/html5/forms.html#attr-input-type.

score 1 · Answer 3 · edited May 23 '17 at 12:27

There is no yes or no answer to your question or THE way to do it. Let's start with the restriction (>5 characters).

Regarding the length: Yes and no. Check this one Is there a minlength validation attribute in HTML5? However it's not the best way in my opinion.

Regarding numbers only... well there's an "number"-input type i think. But browser support is poor so its not really a solution.

So two ways to do it. Do it on the client side (Javascript) or on the server side (PHP). Javascript enables you to validate the input before it is send. BUT: A user who has JS disabled or who is evil enough to manipulate your script (it's easy. you can even "hack" a JS-Validation with the build in tools in Chrome or FF) will easily get around your validation. So any form input must be validated on the server side anyway. In case you are about to use his input for e.g. mysql-querys or something BE SURE TO CHECK IT for malicious contents. For some examples and "illustration" you might check wikipedia using the keyword "SQL-Injection".

So what you have to do:

if(strlen($_POST['student_ID'])<5) { echo "Error! >5 characters"; }

and for the numeric input

if(!is_numeric($_POST['student_name']) { echo "Error! Nums only.";}

However front end validation still is helpful as the user gets direct feedback. You might check the JS "onchange" (triggered each time the value changes) or "onblur" (field lost focus so you can assume that the user has finished to type in his values) attribute. The check itself works almost the same in JS. You could use the alert-function to notify the user then.

Hope this helps. Happy coding.

score -4 · Answer 4 · answered May 20 '14 at 19:21

-4

Simply with attribute maxlength

Username: <input type="text" name="example" maxlength="10">

answered May 20 '14 at 19:21

Ardy's

1

limit number of characters in html form

4 Answers4