# The Sad State of HTML Email Input Fields and IDNs

The current state of HTML email input fields is a bit of a mess when it comes to
IDNs (Internationalised Domain Names). You would think it was as simple as:

```html
<input type="email" value="person@ü.example.com">
```

You would be wrong though. Firefox is fine with the above, but Chrome says the
contents of the field are invalid. Chrome will let you type
"person@ü.example.com" into an email input field, but if you set it using HTML
or JavaScript, it will say it is invalid. For Chrome you have to encode it using
[punycode](https://www.wikipedia.org/wiki/Punycode) first:

```html
<input type="email" value="person@xn--tda.example.com">
```

That fixes things for Chrome, and Chrome still helpfully displays the unicode
version "person@ü.example.com", but now Firefox displays it as
"person@xn--tda.example.com". Which is not what I want.

To add further complication, if a user types "person@ü.example.com" into one of
these fields, and you run the following bit of JavaScript:

```javascript
const value = document.querySelector('input[type="email"]').value;
```

Firefox returns the version that was typed in, but Chrome returns the punycode
encoded version - "person@xn--tda.example.com"

So who is right? Well, according to the [HTML
spec](https://www.w3.org/TR/html-markup/datatypes.html#form.data.emailaddress)
an email input field is valid if it matches:

```text
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
```

Which doesn't include non-ascii characters. So it would *seem* like Chrome is
doing the right thing as far as the HTML spec says. Firefox on the other hand
seems to be doing what the spec *should* say. God knows how IE/Edge behave;
probably in some entirely different manner.

So for now, to pre-fill a HTML email input field, or change one using
JavaScript, a punycode library and feature detection is required:

```javascript
const usePunycodeLibrary = (function(){
  const i = document.createElement('input');
  i.type  = 'email';
  i.value = "person@ü.example.com";
  return !i.validity.valid;
})();
```

So I should just use an input field of type "text" right? Well, then I lose the
extra features that modern browsers provide when they know that an input field
should contain an email address. Simple things like client side validation and
the "@" symbol being more prominent on software keyboards.

Don't you just love web development?