samedi 2 mai 2020

Pattern attribute simply not working in HTML form

    <!DOCTYPE html>
 <html lang="en">
 <head>
<meta charset="UTF-8">
<title>Form practice</title>

Register

<form>
    <label for="first name">First Name</label>
    <input id="first name" type="text" name="first name" placeholder="John" required>


    <label for="last name">Last Name</label>
    <input id="last name" type="text" name="last name" placeholder="Smith" required>

    <div>
    <label for="male">Male</label>
    <input id="male" type="radio" name="gender" value="male">

    <label for="female">Female</label>
    <input id="female" type="radio" name="gender" value="female">

    <label for="other">Other</label>
    <input id="other" type="radio" name="gender" value="other">
    </div>

    <div>
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" required placeholder="your email">

  <label for="password">Password:</label>
  <input type="password" name="password" id="password" pattern=".{5,10}" title="5 to 8 characters" required>
    </div>

    <div>
        <label>
            Birthday:
            <select name="month">
                <option>Month</option>
                <option>Jan</option>
                <option>Feb</option>
                <option>Mar</option>
            </select>
            <select month="day">
                <option>Day</option>
                <option>01</option>
                <option>02</option>
                <option>03</option>
            </select>
            <select month="year">
                <option>Year</option>
                <option>1990</option>
                <option>1991</option>
                <option>1992</option>
            </select>
        </label>
    </div>

    <div>
        <label for="agreed">I agree to the terms and conditions</label>
        <input id="agreed" type="checkbox" name="agreed">
    </div>

    <input type="submit" name="">
 </form>
</body>
</html>

The pattern attribute in the input tag for password is not working, neither is the title attribute. Only the required attribute is working. I have tried checking in Chrome and Safari. Is it deprecated? In what other way can I add a validation for minimum length (aside from using JS)?

Aucun commentaire:

Enregistrer un commentaire