Form

URL input

Published on

Description

The URL input provides a text field for entering web addresses. It validates that the value is a properly formatted URL and shows a URL-optimized keyboard on mobile devices.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="url">
      <hgroup>
        <h1>What is your website URL?</h1>
      </hgroup>
    </label> <span id="url-hint">Use the format https://example.org</span> <input value="" id="url" name="url" autocapitalize="off" autocomplete="url" autocorrect="off" spellcheck="false" type="url" aria-describedby="url-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-url" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association.
  • Use autocomplete="url" to enable browser autofill.
  • Inherit typography for WCAG 1.4.12 compliance.
  • Provide hint text describing the expected format (e.g. "https://example.com") via aria-describedby.

References

Variables

None for input