pattern in html5 input type url validation

Issue

I have a form as shown below in which I want the user to enter the url in the input box starting from http:// or https:// with one period to be present after subdomain. If the user doesn't do so it should say "Please match the requested format".

This is what I have tried. The following code takes only from https not http.

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required>  <!-- Line A -->

The pattern which I want is:

1. https://example.com
   
2. http://example.com
   
3. https://www.example.com
   
4. http://www.example.com
   

In the first 2 cases, user doesn't type www in the input box and in the last 2 cases user types www In the above four urls, it has atleast one period after subdomain and it starts from http or https.

In short, I want the following 2 requirements to be met when user enters the url in the input box.

1. It should start from http or https.
2. It should have at-least one period after sub-domain.

Problem Statement:

I am wondering what changes I should make in the pattern above at Line A so that it meets my requirements.

Solution

Can probably use url validation segments after the http://

<input type="url" 
  name="url"
  id="url"
  placeholder="https://example.com"
  pattern="[Hh][Tt][Tt][Pp][Ss]?:\/\/(?:(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))(?::\d{2,5})?(?:\/[^\s]*)?"
  required>

Expanded

 [Hh] [Tt] [Tt] [Pp] [Ss]? :\/\/
 (?:
      (?: [a-zA-Z\u00a1-\uffff0-9]+ -? )*
      [a-zA-Z\u00a1-\uffff0-9]+ 
 )
 (?:
      \. 
      (?: [a-zA-Z\u00a1-\uffff0-9]+ -? )*
      [a-zA-Z\u00a1-\uffff0-9]+ 
 )*
 (?:
      \. 
      (?: [a-zA-Z\u00a1-\uffff]{2,} )
 )
 (?: : \d{2,5} )?
 (?: \/ [^\s]* )?

Answered By - user12097764