The HTML maxlength attribute specifies the maximum number of characters a user can enter into an <input> or <textarea> element.
Definition and Usage
➔ The maxlength attribute takes a positive integer value or zero.
➔ The maxlength attribute does not work for <input type="number"> use the max attribute to set the maximum value instead.
Syntax
//In HTML
<form id="myform" action="/server-side" method="get">
<table>
<tr>
<td><label for="qty">Enter quantity:</label></td>
<td><input type="number" id="qty" name="quantity" min="1" max="10" value="5"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" value="Enter name" minlength="4" maxlength="10"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='40' rows='5' minlength="0"
maxlength="150">This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="showhref()"></td>
</tr>
</table>
</form>
//In JavaScript
<script>
const element = document.getElementById('name');
element.minlength = 4;
element.maxlength = 10;
element.setAttribute('maxlength', '10');
</script>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| maxlength | <input> <textarea> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML maxlength attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input[type='text'],
input[type='number'] {
padding: 5px;
}
input[type='text']:hover,
input[type='number']:hover,
textarea:hover {
background-color: #f6f6f6;
}
input[type='submit'] {
margin: 10px 0px;
padding: 10px 20px;
border-radius: 5px;
background-color: #000;
color: white;
}
input[type='submit']:hover {
background-color: #f6f6f6;
color: #000;
}
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML maxlength attribute example</h3>
<p>The maxlength attribute specifies the maximum characters a user can enter into an <input> or
<textarea> element.</p>
<form id="myform" action="/server-side" method="get">
<table>
<tr>
<td><label for="qty">Enter quantity:</label></td>
<td><input type="number" id="qty" name="quantity" min="1" max="10" value="5"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" value="Enter name" minlength="4" maxlength="50"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='40' rows='5' minlength="0"
maxlength="150">This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="showhref()"></td>
</tr>
</table>
</form>
<p id="result"><b>Note:</b> Click on the submit button to see the URLSearchParams of the form.</p>
</div>
</body>
<script>
let qty = document.getElementById("qty");
let name = document.getElementById("name");
let comment = document.getElementById("comment");
function showhref() {
event.preventDefault();
const url = new URL(window.location.href);
//const data = {name:value,name2:value2};
const data = { quantity: qty.value, name: name.value, comment: comment.value };
const params = new URLSearchParams(data);
url.search = params.toString();
history.replaceState(null, '', url);
const urlParams = new URLSearchParams(window.location.search);
let pquantity = urlParams.get('quantity');
let pname = urlParams.get('name');
let pcomment = urlParams.get('comment');
document.getElementById("result").innerHTML = "Location.href are: " + url.href
+ "<br><br> Parameres are:" + " <br>quantity: " + pquantity
+ ", <br>name: " + pname + ", <br>comment: " + pcomment;
alert(url.href);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.