How to fix length of input text in specific size? in HTML 5

user_11168490 0
Viewed 1234

i want to use like this maxlength and minlength both. But it is not working. length of text should be in between 3 to 10 characters

<input type="text" class="form-control" id="username" placeholder="Username" autofocus required maxlength= "10" minlength= "3">

using these maxlength is functioning but minlength not.. but only minlength is working

html javascript
4 Answers

There is an alternative way of doing it in HTML, here it is

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" required minlength="3" maxlength="10" size="10">

  <button type="submit">Submit</button>
</form>

user_23166580

You can also validate the character length with pattern attribute like this:

<form>
  <label for="username">Userame:</label>
<input name="username" pattern=".{3,10}" required title="3 to 10 characters">
<button type="submit">Submit</button>
</form>

user_26915880 
<html>
<body>

<h1>The input maxlength attribute</h1>

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

</body>
</html>
user_124557880

You can use this one, I have checked and this works.

<form>
   <label for="username">Userame:</label>
   <input type="text" name="txtName" minlength="3" maxlength="10" required>
   <button type="submit">Submit</button>
</form>
user_19153550
Related