How to create an input field that takes URL as its value?

The URL can be added to the input field in HTML. It will let the user to enter a URL to the page in a proper format. If the user enters the URL incorrectly it will be not submitted to the server.

HTML input type=url

Use type="url" within the <input> tag to add a URL to an input field. It will ensure that a properly formatted URL is added to the input field before submitting it to the server.

Example: Create an input field for URL

Here, we have created an input field where you can enter the URL. There is a submit button along with it. <label> are added for accessibility.

Attributes for input field of type="url"

Here is a list of attributes used for the input field of type="url"

• maxlength - The max number of characters the input field can accept.
• minlength - The minimum number of characters the input field can accept.
• pattern - A regular expression that should match the input value.
• placeholder - Some values to be displayed when the input field is empty.
• size - To specify the number of characters accepted by the input field.

Example: Create an input field for URL along with other attributes

Here, we have used placeholder, pattern, and size attributes within the input field.

Conclusion

The input field for URL lets the users enter a properly formatted URL. There are other attributes that can be added along with it like minlength, maxlength, pattern, etc.