HTML 5フォームのInputタイプ-url

詳細
、URLアドレスを含む入力ドメイン(H 5新規オブジェクト)を定義します.意味上のurlアドレスを表す入力ドメインでは、urlドメインの値が自動的に検証され、type=「text」のinput入力タイプと外観に差はない.
簡単に言えば、URLアドレスを含めるべき入力フィールドであり、urlフィールドの値はフォームの発行時に自動的に検証されます.
(ヒント:iPhoneのSafariブラウザはurl入力タイプを認識し、タッチパネルのキーボードを変更して適応します(.comオプションを追加)
例:
 

  ：

【注意:inputのurlはブラウザ内定の検出であり、各ブラウザのサポートも異なるので、自分でjsを書いて判断したほうがよい】
互換性:IEはsafariと互換性がありませんが、携帯電話のiPhoneのSafariブラウザはurl入力タイプをサポートし、タッチスクリーンキーボードを変更することで対応します(.comオプションを追加).
 
Input URLオブジェクトを作成するにはdocumentを使用します.要素を作成するには、次の方法を使用します.
 

       URL   
        URL   。
   

function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "url");
    x.setAttribute("value", "http://www.google.com");
    document.body.appendChild(x);
}

 
【メリット】
 1.- cssスタイル、input[type=email]またはinput[type=url]を的確に記述できます.
 2.- より多くの意味定義が可能
3.-モバイルアプリケーションの適合性:モバイルブラウザはemailとurlの特殊なキーボードをポップアップし、ユーザーが手動で切り替える必要はありません.
最初は余計なinput typeを追加することが多いと思いますが、深く考えてみるとユーザー体験の向上に役立つと思いますが、あなたはどう思いますか?
 
【拡張】:HTML 5フォームチュートリアルのinput新しく追加されたURLタイプとemailタイプの応用と比較
過去にこのタイプの入力ボックスを作成すると、多くのJS検証が使われていましたが、今ではHTML 5を書くという効果はそれほど面倒ではありません.2つのHTML 5のinputの新たに追加されたタイプのアプリケーションを紹介します.
1、URLタイプ:

このタイプを設定すると、外観的には通常の要素とあまり差がありませんが、このタイプをフォームに配置した後、「提出」ボタンをクリックすると、この入力ボックスにURLアドレスが入力されていない場合は、提出できません.
 
 2.Emailタイプ:

上記のURLタイプのコードのtypeをemailに変更すると、フォームのコミット時にこの入力ボックスの内容がemail形式であるかどうかが自動的に検証され、そうでない場合はコミットできません.