Embedded Files
In the previous exercise, we were able to use min and max to set acceptable minimum and maximum values in a number field. But what about text fields? There are certainly cases where we wouldn’t want our users typing more than a certain number of characters (think about the character cap for messages on Twitter). We might even want to set a minimum number of characters. Conveniently, there are built-in HTML5 validations for these situations.
To set a minimum number of characters for a text field, we add the minlength attribute and a value to set a minimum value. Similarly, to set the maximum number of characters for a text field, we use the maxlength attribute and set a maximum value. Let’s take a look at these attributes in code:
<form action="/example.html" method="POST">
<label for="summary">Summarize your feelings in less than 250 characters</label>
<input id="summary" name="summary" type="text" minlength="5" maxlength="250" required>
<input type="submit" value="Submit">
</form>
If a user tries to submit the <form> with less than the set minimum, this message appears:
And if a user tries to type in more than the maximum allowed number of characters, they don’t get a warning message, but they can’t type it in!
Let’s add this validation to our <form>.
Instructions
Instructions
1.For the login <form>, we want our users to have usernames that are at least 3 characters and at most 15. Let’s add this validation to our current <form>.
To the <input> with an id of "username", add the following attributes and values:
a minlength of "3"
a maxlength of "15"
2.We also want passwords to have at least 8 characters and at most 15.
So, in the opening <input> tag that has an id of "pw", add:
a minlength of "8"
a maxlength of "15"
Page updated
Report abuse