Email Fields vs. Text Fields

Interactive exploration on the differences between input type=email and input type=text

by Ray Toal

HTML

<p>Enter text into the email and text fields below. Enter leading and traling whitespace to see how the two types differ.</p>
<p>Email: <input type=email id=email> <span id=emailEcho></span></p>
<p>Text: <input type=text id=text> <span id=textEcho></span></p>

JavaScript

function $(selector) {return document.querySelector(selector);}
const email = $('#email');
const emailEcho = $('#emailEcho');
const text = $('#text');
const textEcho = $('#textEcho');
$('#email').oninput = () => {emailEcho.innerHTML = '[' + email.value +  ']'}
$('#text').oninput = () => {textEcho.innerHTML = '[' + text.value +  ']'}