The URL Input (type="url")

Technical Deep Dive & Specifications

The WHATWG URL Standard & Validation Rules

According to the WHATWG HTML Living Standard, a string is a valid absolute URL if it conforms to the WHATWG URL Standard.

To pass native browser validation on <input type="url">:

1. The string must contain a valid scheme (e.g., http:, https:, ftp:, mailto:, git:).
2. The scheme must be followed by a colon (:).
3. The scheme must be followed by a scheme-specific authority and path (for hierarchical web URLs, this is // followed by a domain or IP address).

  https://developer.mozilla.org:443/en-US/docs/Web/HTML?query=true#section-1
  \___/   \___________________/ \_/ \_________________/ \__________/ \_______/
    |               |            |           |                 |          |
  Scheme          Host          Port        Path             Query     Fragment

Validity State Table for type="url"

[!WARNING] By default, type="url" accepts any syntactically valid absolute URI scheme, including ftp://, ssh://, file://, and javascript:. If your web application specifically requires a secure website link (https://), you must restrict the input with a regex pattern.

Restricting to HTTPS & Custom Domains

To prevent users from entering insecure http:// links or hazardous javascript: URIs, pair type="url" with the pattern attribute:

<!-- Restrict strictly to HTTPS -->
<input 
  type="url" 
  id="website" 
  name="website"
  pattern="https://.*"
  title="URL must begin with https://"
  placeholder="https://example.com"
>

<!-- Restrict strictly to a specific domain (e.g., GitHub profile) -->
<input 
  type="url" 
  id="github" 
  name="github_profile"
  pattern="https://github\.com/[a-zA-Z0-9_\-]+/?"
  title="Please provide a valid GitHub profile URL (e.g., https://github.com/username)"
  placeholder="https://github.com/username"
>

Mobile Keyboard Adaptation

When an input has type="url", mobile keyboards dynamically replace the spacebar and bottom row keys with web navigation shortcuts:

+-------------------------------------------------------------+
| [ q ] [ w ] [ e ] [ r ] [ t ] [ y ] [ u ] [ i ] [ o ] [ p ] |
|   [ a ] [ s ] [ d ] [ f ] [ g ] [ h ] [ j ] [ k ] [ l ]     |
|     [ z ] [ x ] [ c ] [ v ] [ b ] [ n ] [ m ]               |
|  [ 123 ]    [ . ]       [   /   ]       [ .com ]   [  ↵  ]  |
+-------------------------------------------------------------+
               ^              ^               ^
           Period        Forward Slash   Domain Key

Best Practice Configuration for URL Inputs:

<input 
  type="url" 
  name="portfolio_url" 
  id="portfolio_url"
  autocomplete="url"
  autocapitalize="none"
  autocorrect="off"
  spellcheck="false"
  enterkeyhint="go"
>

• enterkeyhint="go" changes the virtual keyboard action key to "Go" instead of "Return".
• autocapitalize="none" prevents mobile keyboards from capitalizing the H in https://.

Comparing type="text", type="url", and type="email"

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 102–115: The Webhook Target input uses type="url" combined with pattern="https://.*". This prevents developers from accidentally submitting insecure plaintext http:// or non-web schemes.
• Lines 110–113: Disables autocomplete, autocapitalize, autocorrect, and spellcheck. URL strings contain arbitrary punctuation, slugs, and tokens that must never be mangled by predictive text software.
• Lines 120–131: The Repository Link field uses an advanced regular expression inside pattern: https://github\.com/[A-Za-z0-9_.\-]+/[A-Za-z0-9_.\-]+. This guarantees that the user provides a direct link to an organization and repository path rather than just https://github.com or an external domain.
• Lines 73–80: CSS uses :user-invalid to provide non-disruptive feedback. If the user omits https://, the field highlights in red upon losing focus.

Expected Browser Render Output

+-------------------------------------------------------------+
| Webhook Subscriptions                                       |
| Configure production event delivery endpoints               |
|                                                             |
| Production Webhook Target *                                 |
| [ https://api.yourdomain.com/v1/webhooks                  ] |
| Must be an absolute URL starting with https://              |
|                                                             |
| Open Source Repository Link                                 |
| [ https://github.com/facebook/react                       ] |
| Direct URL to your public GitHub repository                 |
|                                                             |
| [              Save Endpoint Configuration                ] |
+-------------------------------------------------------------+