Skip to main content

HTML input type="url"

The HTML input type URL is a type of form control that allows users to input a valid URL or web address. The URL input type was introduced in HTML5 and has since become widely adopted by modern web browsers. The syntax for using the URL input type is simple:

<input type="url" name="myUrl">

The name attribute is used to specify the name of the input field, while the type attribute is set to "url" to indicate that this is a URL input field. When the user inputs a valid URL, the URL value is stored in the input field.

Some examples:

<label for="website-url">Website URL:</label>
<input type="url" id="website-url" name="website-url">

<label for="social-url">Social media URL:</label>
<input type="url" id="social-url" name="social-url"
       value="https://www.facebook.com/">

<label for="resume-url">Resume URL:</label>
<input type="url" id="resume-url" name="resume-url"
       required>

<label for="video-url">Video URL:</label>
<input type="url" id="video-url" name="video-url"
       placeholder="https://www.youtube.com/watch?v=xxxxxx"
       pattern="https://www\.youtube\.com/watch\?v=.+">

In the final example, we have a URL input field for collecting the user's video URL. The placeholder attribute is used to display a placeholder text inside the input field, which specifies the expected URL format. The pattern attribute is used to enforce the URL format using a regular expression. In this case, the pattern attribute ensures that the URL is a YouTube video URL by matching the URL pattern using a regular expression.