Using <input type="url"> to handle both HTTP and HTTPS

Question

The URL input <input type="url"> takes pattern attribute which allows us to specify a JavaScript regex to validate the input value.

In this MDN example, the pattern provided is pattern="https://.*" which expects an https protocol. This means a http value will not be accepted.

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url"
       placeholder="https://example.com"
       pattern="https://.*" size="30"
       required>

Not all URLs are HTTPS, so is this option too strict?

In the documentation explaining the pattern attribute, it says:

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

I thought this meant that if the pattern attribute is not included, then the value of www.example.com would be accepted. However, it seems like this is not the case.

Question: How do we use the url input to flexible handle both http and https values? Moreover, it seems like it would be simpler if the user is able to simple enter www.example.com without specifying the protocol.

I thought this meant that if the pattern attribute is not included, then the value of www.example.com would be accepted. However, it seems like this is not the case. No, the value still must fit the URL pattern regardless of additional pattern criteria. Therefore it must start with a protocol. — Mm-Art-In
– Mm-Art-In, Commented Jun 13, 2019 at 12:44

krsna · Accepted Answer · 2020-03-15 00:52:02Z

7

Add ? to the pattern

pattern="https?://.*"

? makes s optional.

edited Mar 15, 2020 at 0:52

krsna

4,3437 gold badges61 silver badges107 bronze badges

answered Jun 13, 2019 at 12:29

TitanFighter

5,2044 gold badges55 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

flash Over a year ago

I have a similar question. i am wondering if you can have a look.

Collectives™ on Stack Overflow

Using <input type="url"> to handle both HTTP and HTTPS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related