JSFiddle - React, Tailwind, and code Playground

by suns2015

HTML

Try to submit, the domain without "http://" would error. The pattern check is a secondary validation. Here the pattern is checking the naked domain as in <a href="https://stackoverflow.com/questions/58070841/pattern-in-html5-input-type-url-validation">stackoverflow thread</a>
<form>
<label>
<input type="url" 
  name="url"
  id="url"
  value="https://test.io"
  placeholder="https://example.com"
  pattern="(?:(?:[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> URL
  </label>
  <input type="submit" />
</form>
<style>
label {
    display: block;
    overflow: hidden;
    border: 1px black solid;
}
input[type="url"] {
    position: relative;
    left: -4rem;
    font-family: monospace;
}
input[type="url"]:focus{ left:0;}
</style>