html input field length max code example

Example 1: input maxlength

<form action="/action_page.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" maxlength="10"><br><br>
  <input type="submit" value="Submit">
</form>

Example 2: limit input characters amount

<p><input placeholder="Title" id="input-title" class="text-input" maxlength="80" onkeyup="count_down(this)"  name="input" ></p>
      <span id="count" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br>

<script>
  function count_down(obj){

    let element = document.getElementById('count');

    element.innerHTML = 80 - obj.value.length;

    if(80 - obj.value.length < 5){
        element.style.color = "firebrick";
    }else{
        element.style.color = "#333";
    }
}
</script>

Example 3: input max length

<input maxlength="10" />

Tags:

Css Example