Geek Answers Handbook

Input type = "url" for relative URLs

I had an input box for users to enter a custom link to the page from the create form (somewhat similar to Wordpress). (e.g. about/awards , which is used for http://site.com/pages/about/awards ). At some point, this stopped working in Chrome, as they now perform a more stringent check on the input type="url" field. Which would be nice, but:

  • This does not allow relative URLs. about / awards is a relative URL, but Chrome seems to reject everything except absolute URLs http: // domain / page / stuff
  • The error is not particularly obvious. He simply focuses on the form field (which is not particularly noticeable) and refuses to provide the form. The message I received was that the form “doesn’t work” because they did not notice what was happening and it took me a few minutes to figure out what was happening.

I fixed it by simply returning to the input type = "text", but it defeats some useful things added by type="url" (for example, a special keyboard on the iPhone).

Is this part of the HTML5 specification or a problem in the implementation of Chrome?

+7
input html5
source share
3 answers

It says: "Although the value of the element is not a valid absolute URL, this element suffers from type mismatch."

+2
source share

The spectrum still works, but from this quote it seems like it might be a problem with the implementation of Chrome (my bold accent):

User agents can allow the user to set a value for a string that is not a valid absolute URL , but can also, or instead, automatically enter characters by the user, so that the value is always a valid absolute URL (even if it is not a value that is visible and edited by the user in the interface ) User agents must allow the user to set a value for an empty string. User agents should not allow users to insert U + 000A LINE FEED (LF) or U + 000D CARRIAGE RETURN (CR) characters in a value.

A source

+2
source share

A valid still semantic workaround that I'm using is to resolve relative URLs using the pattern attribute:

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

More articles:


All Articles