title: pattern in html5 input type url validation
body: <p>I have a <strong>form</strong> as shown below in which I want the <strong>user</strong> to enter the <strong>url in the input box</strong> starting from <strong>http://</strong> or <strong>https://</strong> with <strong>one 
  period</strong> to be present after <strong>subdomain</strong>. If the user doesn't do so it should say <strong>"Please match the requested format"</strong>. </p>
  
  <p>This is what I have tried. The following code takes only from https not http.</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;  &lt;!-- Line A --&gt;
  </code></pre>
  
  <p>The <strong>pattern</strong> which I want is:</p>
  
  <ol>
  <li><a href="https://example.com" rel="noreferrer">https://example.com</a> <br></li>
  <li><a href="http://example.com" rel="noreferrer">http://example.com</a>  <br></li>
  <li><a href="https://www.example.com" rel="noreferrer">https://www.example.com</a> <br></li>
  <li><a href="http://www.example.com" rel="noreferrer">http://www.example.com</a> <br></li>
  </ol>
  
  <p>In the first 2 cases, user doesn't type <strong>www</strong> in the input box and in the last 2 cases user types <strong>www</strong> In the above four urls, 
  it has atleast <strong>one period after subdomain</strong> and it starts from <strong>http</strong> or <strong>https</strong>.</p>
  
  <p>In short, I want the <strong>following 2 requirements</strong> to be met when user enters the <strong>url in the input box</strong>.</p>
  
  <ol>
  <li>It should start from http or https.</li>
  <li>It should have at-least one period after sub-domain.</li>
  </ol>
  
  <p><strong>Problem Statement:</strong></p>
  
  <p>I am wondering what changes I should make in the pattern above at Line A so that it meets my requirements.</p>