HTML5 URL Input Type

The "url" field require very specific unique input pattern as you know "url" has an www, "." with site name and ending with ".com" or ".net" or something else. If you have already worked with earlier versions of HTML, you had to write javascript regex object to match the patter for "url" input. HTML5 URL Input Type makes your development life simple, only you need to set type as "url" for input textbox as given below.

Syntax

<input id="url" type="url"/>

Here is a simple demo.
Web Site :

As of writing, only few browsers provide support for this new feature.

Browser Supports

If you want to make your textbox self explanatory, you can use additional attribute "Placeholder" by assigning meaningful text. The "placeholder", in the url textbox example,will looks like this:

Syntax

<input id="url" type="url" placeholder="Enter Valid Web Site"/>

Here is a simple demo.
Web Site :

Example

<!DOCTYPE html>
<html>
<head>
  <!-- www.techstrikers.com -->
  <meta charset="utf-8">
  <title>HTML5 URL Example</title>
</head>
<body bgcolor="#bnde45">
<fieldset>
<legend>HTML5 URL Type</legend>
<table>
  <tr>
      <td><form action="#">Enter URL: <input type="url"     name="url" required/> <input type="submit"/></form></td></tr>
  </form></td></tr>
</table>
</fieldset>
<br/>
<fieldset>
<legend>HTML5 URL Type With List</legend>
<table>
  <tr>
      <td><form action="#">Choose URL: 
          <input type="url" list="URL-choices" name="val" required/> <input type="submit"/>
          <datalist id="URL-choices">
            <option label="https://www.techstrikers.com" value="www.techstrikers.com">
            <option label="https://www.google.com" value="www.google.com">
            <option label="https://www.yahoo.com" value="www.yahoo.com">
            <option label="https://www.bing.com" value="www.bing.com">
          </datalist>
          </form></td></tr>
  </form></td></tr>
</table>
</fieldset>

</body>
</html>

See Live Example

« Previous