title: Using <input type="url"> to handle both HTTP and HTTPS
body: <p>The URL input <code>&lt;input type="url"&gt;</code> takes <code>pattern</code> attribute which allows us to specify a JavaScript regex to validate the input value.</p>
  
  <p>In this MDN example, the pattern provided is <code>pattern="https://.*"</code> which expects an <code>https</code> protocol. This means a <code>http</code> value will not be accepted. </p>
  
  <pre><code>&lt;label for="url"&gt;Enter an https:// URL:&lt;/label&gt;
  
  &lt;input type="url" name="url" id="url"
         placeholder="https://example.com"
         pattern="https://.*" size="30"
         required&gt;
  </code></pre>
  
  <p>Not all URLs are <code>HTTPS</code>, so is this option too strict? </p>
  
  <p>In the documentation explaining the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url#pattern" rel="nofollow noreferrer">pattern attribute</a>, it says:</p>
  
  <blockquote>
    <p>If the specified pattern is not specified or is invalid, no regular
    expression is applied and this attribute is ignored completely.</p>
  </blockquote>
  
  <p>I thought this meant that if the pattern attribute is not included, then the value of <code>www.example.com</code> would be accepted. However, it seems like this is not the case.</p>
  
  <p>Question:
  How do we use the url input to flexible handle both <code>http</code> and <code>https</code> values? Moreover, it seems like it would be simpler if the user is able to simple enter <code>www.example.com</code> without specifying the protocol. </p>