Carter Roeser Carter Roeser - 21 days ago 7
HTML Question

HTML Input: Require URL to end in specific filetype

How can I make a URL Input form require the input to be both a valid URL, and end in a specific filetype.

For example, this is my input:

<input name="bg" placeholder="https://website.com/image" type="url">


As you can see, It is using the URL type, which restricts it to a valid http:// domain, but I would like the input field to only accept .png, .jpg, and .gif files.

Can this be achieved through html or javascript, and if so, how?

Thanks!

Answer

You don't really need Javascript here, you can use pattern attribute for your input (i have added CSS just for example):

input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}
<input name="bg" placeholder="https://website.com/image" type="url" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)(.jpg|.png|.gif)">