CodesBeautify

HTML URL Input Generator

Build a website field that checks the address shape and can insist on https.

URL field HTMLHTTPS only
<label for="website">Website</label>
<input type="url" id="website" name="website" placeholder="https://example.com" pattern="https://.*" inputmode="url" autocomplete="url" aria-describedby="website-hint">
<p id="website-hint" class="hint">Include the scheme, for example https://example.com.</p>
Runs locally in your browser

About the HTML URL Input Generator

An input with type="url" asks the browser to check that what was typed is an absolute address with a scheme. That check is looser than most people expect: ftp://x and even whatever://y both pass happily, while example.com on its own fails and confuses visitors who type addresses the way they say them out loud.

The https only option adds pattern="https://.*" so anything else is refused before the form submits, which suits fields collecting a company website, a webhook endpoint or an OAuth callback. A note linked with aria-describedby spells out the expected form, and inputmode="url" gives phone keyboards the slash and full stop keys without a trip through the symbol layer.

Turn on the multiple option and the field accepts a comma separated list, which is handy for a set of allowed redirect targets. Validation still only inspects the syntax and never whether the address resolves, so a server side request remains the only way to know a link is alive. To escape characters before putting a URL into a query string, use the URL Encoder.

How to use

  1. Set the label and the name your form handler reads.
  2. Decide whether https only should be enforced by the pattern.
  3. Keep the hint on so the required shape is visible before typing.
  4. Copy the field, and verify the address on the server afterwards.

Common questions

Does type url require https?
No. It accepts any scheme, so add the https pattern when only secure addresses should be allowed.
Why is example.com rejected?
The url type needs an absolute address, so the scheme has to be present. Say so in the hint to avoid confusion.
Can one field take several addresses?
Yes, with the multiple attribute, and the browser then validates each comma separated entry on its own.
Does the browser check the site exists?
No. It only checks the shape of the address; fetching it from your server is the only way to know it works.