Different type of validation for HTML5:
1. Required Attribute: It is used when the value before submission of a form in not filled.
It is sometimes known as Mandatory or Compulsory field.
Use of "required" attribute.
Example:
<form action="" method="post">
Name:<br>
<input type="text" name="name" required>
<br>
Age:<br>
<input type="text" name="age" required><br>
Email:<br><input type="email" name="email" required placeholder="Enter a valid email address"><br>
Website:<br><input type="url" name="website" required pattern="https?://.+"><br>
<input type="submit" />
</form><br>
2. Readonly Attribute: it specifies that an input field is read-only and it cannot be modified.
Use of "readonly" attribute.
Example:
<form action="" method="post">
Name:<br>
<input type="text" name="name" value="sid" readonly>
<br>
Age:<br>
<input type="text" name="age" required><br>
<input type="submit" />
</form><br>
3. Disabled Attribute: It is unusable and un-clickable. It specifies that the input field should be disabled.
Use of "disabled" attribute.
Example:
<form action="" method="post">
Name:<br>
<input type="text" name="name" value="sid" disabled>
<br>
Age:<br>
<input type="text" name="age" required><br>
<input type="submit" />
</form><br>
4. Maxlength Attribute: It specifies the maximum number of characters allowed in the input field.
Use of "maxlength" attribute.
Example:
<form action="" method="post">
Name:<br>
<input type="text" name="name" maxlength="10">
<br>
Age:<br>
<input type="text" name="age" required><br>
<input type="submit" />
</form>
5. Pattern Attribute: It specifies a regular expression that the input field value is checked against.
Use of "pattern" attribute.
Example:
<form action="" method="post">
Name:<br>
<input type="text" name="countryCode" pattern="[A-Za-z]{3}" title="Only three letter country code">
<br>
<input type="submit" />
</form><br>
6. Multiple Attribute: It specifies that the user is allowed to enter more than one value in the input field.
Use of "multiple" attribute.
Example:
<form action="" method="post">
Select images: <br><input type="file" name="img" multiple>
<br>
<input type="submit" />
</form>
0 Comment(s)