HTML 5フォーム要素の新機能

1.従来のフォームタイプ:
従来のinputフォームのタイプ:
text、 password 、submit 、reset 、button 、radio 、checkbox 、file 、hidden

  document.getElementsByName('name')

PCエンドフォーム要素でよく使用されるイベント:
click onchange(変更時にのみトリガー)focus blur keydown keyup
移動先フォーム要素イベント:
keydown、keyup(携帯電話で認識するものもあるが)がないモバイル側は仮想キーボードを使用しているため、モバイル側にはinputイベント(oninput)がある
ファイルアップロード:ファイルをバイナリ符号化し、postを介してバックグラウンドに転送し、バイナリストレージ.
2.HTML 5で新しく追加されたフォームのタイプ:
Inputに新しく追加されたタイプ:
search、 url 、email 、tel 、number 、range 、color 、date 、time 、dataTime

    var range = document.getElementById("range");
    var number = document.getElementById("number");
    range.onchange = function(){    //            onchange -> oninput
    number.value = this.value;   
}

3.HTML 5の役割:

はより強力な機能を提供し、開発を便利にした.

は、モバイル側で対応するinputタイプを使用し、ユーザが入力したときに対応する仮想キーボードを呼び出すことができる.

は、従来のフォームタイプに対して新しい検証方法を提供します.JSで提供するinput.checkValidity()は、cssでinput:valid/input:invalid

を提供する

HTML 5にはplaceholderプロパティ

も追加されています.

HTML 5はdataList(2段ドロップダウン)、progress要素

を提供する.
例えば、従来の検証:

trim()        -> replace (/^ +| + $/g,'');
~function (pro){
    function myTrim(){
        return this.replace(/^  + | +$/g, '');
    }
    pro.myTrim = myTrim;
}(String.prototype)

メールボックスの正則判断:/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$ /;HTML 5:inputのtypeはemailで、JSでは持参のcheckValidity()メソッドを使用してcss 3を検証する.

#id:valid{
  border:1px solid green;
}
#id:invalid{
  border:1px solid red;
}