Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Form Validations in HTML5

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 337
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: