HTML maxlength Attribute

HTML DOM Front End Technology Web Development

The HTML maxlength attribute defines the maximum number of characters allowed in the input HTML element in an HTML document.

Syntax

Following is the syntax −

<input maxlength=”text”>

Let us see an example of HTML maxlength Attribute −

Example

Live Demo

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   input {
      width: 300px;
      background: transparent;
      border: 2px solid #fff;
      outline: none;
      display: block;
      margin: 1rem auto;
      border-radius: 20px;
      padding: 8px 10px;
   }
   ::placeholder {
      color: #000;
   }
   .btn {
      background: #db133a;
      color: #fff;
      border: none;
      width: 320px;
   }
</style>
<body>
<h1>HTML maxlength Attribute Demo</h1>
<form action="">
<input type="text" placeholder='Enter your first name(only 8 characters)' maxlength="8">
<input type="submit" value="SUBMIT" class="btn">
</form>
</body>
</html>