input type ="url" for relative URLs

Question

I had a input box for users to enter in a custom link to a page from the creation form (somewhat similar to Wordpress). (e.g. about/awards which gets used for http://site.com/pages/about/awards ) At some point, this stopped working in Chrome, as they now do stricter validation of input type="url" field. Which would be good but:

• It doesn't allow relative urls. about/awards is a relative URL, but Chrome seems to reject everything except absolute URLs http://domain/page/stuff
• The failure isn't particularly obvious. It just focuses on the form field (which isn't particularly noticeable), and refuses to submit the form. The report I got was that the form "doesn't work", as they didn't notice what was going on, and it took me a few minutes to realise what is going on.

I've fixed it by just switching back to input type="text" but this defeats some of the useful stuff that type="url" added (such as the special keyboard on the iPhone).

Is this a part of the HTML5 spec, or a problem in Chrome's implementation?

Bochum

@GSto: My bad, forgot the most important sentence. – Bochum

You could prepend the relative URL with "http://" on submit to make it valid. See examples here...#17947460 – Tripartite

Answer 1

It says, "While the value of the element is not a valid absolute URL, the element is suffering from a type mismatch."

Saccharo

Answer 2

The spec is still being worked on, but from this quote, it sounds like it could be an issue with Chrome's implementation (bold emphasis is mine):

User agents may allow the user to set the value to a string that is not a valid absolute URL, but may also or instead automatically escape characters entered by the user so that the value is always a valid absolute URL (even if that isn't the actual value seen and edited by the user in the interface). User agents should allow the user to set the value to the empty string. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.

Source

Merrymaker

Answer 3

A plausable still semantic workaround that I am using is to allow relative URLs using the pattern attribute:

<input required="required" type="url" pattern="(https?|/).*?" name="sStyleBackgroundImageURL" value="{!sStyleBackgroundImageURL}"></input>

Lonnylonslesaunier

Answer 4

Some browsers do not allow validation to succeed when relative urls are entered. Instead set the input pattern attribute to a regular expression.

Electrostriction

Answer 5

My suggestion is to use a pattern for unallowed characters something like the following:

<input type="text" pattern="[^\<\>\^\`\{\|\}\r\n\t\f\v]*" placeholder="Your Relative or Absolute Path">

Enjoy...

Embarkment