Search code examples
htmlvalidationcustom-data-attributehtml-input

input field gives advice, automaticly?

I stumbled on the HTML5 checkout-form for me.

here can you see source

I started to change it, and I saw that if you enter the wrong email address, you will receive advice/tips. After reviewing the code, I have not found a java script. But I noticed that the INPUT includes non-standard attributes.

To test type "foo" for E-Mail then Enter

as

data-required

if you fork this project, u can check one more feature: open Browser, give correct e-mail and press Enter: so you get next url

...local.../index.html?email=mail%40test.de

Why?! How?!

I know the data - attribute, data its just for me, for js... but it seems that they have takes optional functionality. Or is chrome, understands that it is email, and gives tips?

I'm trying to understand, but still can not.

Thanks!

Solution

  • The secret is not data-required -- the secret is type="email". That's what causes the tips to occur.

    It's chrome not javascript. You can try it in most browsers and it will do something similar.

    <form>
  <input type="email" placeholder="Try entering an invalid email">
  <button>Go</button>
</form>

    Notice the type="email". This tells google chrome that the input should be an email address and, when you submit, it automatically tells you if the email address is invalid.

    Other types include type="number", type="date", etc.