- 追加された行はこの色です。
- 削除された行はこの色です。
- HTML5 へ行く。
* HTML5 [#sb51848f]
#setlinebreak(on)
#html(<div style="color:red;font-size:16px;">編集中の記事</div>)
#contents
** 省略または簡略化されたタグ記述 [#w05846b8]
** 新しく追加されたタグ [#b13dc639]
|タグ名||h
|canvas|線や図形を描画する|
|datalist|入力テキストなどの候補値を指定する|
|video|動画を埋め込む|
|audio|音楽を埋め込む|
|progress|プログレスバーを表示する|
** 新しく追加された属性 [#g9242e01]
|タグ|属性|説明|使用例|h
|form要素全般|form|どのformに属する入力部品なのかを指定する。&br;※要素をformタグの中に含めなくてもsubmit時に送信対象にする事ができる。|<form id="form01">&br;.&br;.&br;</form>&br;<input type="text" form="form01">|
|input要素全般|placeholder|入力要素に対しての説明などを表示する|<input type="date" placeholder="日付を入力してください。">&br;<style>&br;input:-moz-placeholder { color: blue; }&br;input::-webkit-input-placeholder { color: blue;}&br;</style>|
|input type="text"&br;など|autocomplete|過去に入力した値を候補リストとして表示する||
|~|list|入力値の候補リストを指定する。&br;※datalistタグと共に使用。|<input type="text" list="my_list">&br;<datalist id="my_list" style="display:none;">&br;<option value="hoge"></option>&br;<option value="fuga"></option>&br;</datalist>|
|input type="file"&br;input type="email"|multiple|複数入力(選択)を可能にする|<input type="file" multiple >|
|input type="file"|files(※1)|javaScriptから選択されたファイルの各種情報を得る事ができる|<script>&br;function showFileName(){&br;var f = document.forms[0].my_file;&br;var fileName = f.files[0].name;&br;alert(fileName);&br;}&br;</script>&br;<input type="file" name="my_file" onchange="showFileName()">|
|input type="submit"|formaction|送信先URLを指定する※form要素に指定していたactionをボタンに指定できる|<input type="submit" formaction="/hoge.php" >|
|~|formmethod|submit時のmethodを指定する|<input type="submit" value="GETで送信" formmethod="GET" >|
|~|formnovalidate|入力チェックを行わないボタンの場合に指定する|<input type="submit" value="戻る" formnovalidate >|
※1 ... javascriptで扱えるプロパティ
** input要素に追加されたtype属性 [#o87cdca2]
|type|説明|h
|date|入力値を日付に制限する&br;※形式:yyyy-mm-dd|
|datetime|入力値を日時に制限する(タイムゾーン:UTC)|
|datetime-local|入力値を日時に制限する(タイムソーン:ローカル)|
|month|入力値を月に制限する&br;※形式:yyyy-mm|
|week|入力値を週に制限する。&br;※形式:yyyy-W'''nn'''|
|time|入力値を時刻に制限する|
|number|入力値を数値に制限する|
|search|入力値を検索キーワードとして扱う。&br;※iPhoneなどで入力時に[開く]ボタンが[検索]になる。|
|tel|入力値を電話番号に制限する|
|url|入力値をURLに制限する|
|email|入力値をメールアドレスに制限する。&br;※multiple属性を付加すると複数のアドレスを入力できる。|
|color|入力値を色に制限する。|
|range|範囲を指定して値を選択させる。|
** 便利になった入力値チェック [#m8a6ae68]
|使用できるタグなど|属性|説明|指定できる値、使用例など|h
|input&br;select&br;textarea&br;など|required|入力必須項目とする||
|input|pattern|入力値を指定した正規表現に合致するものだけに制限する|<input type="text" id="zip" name="zip" pattern="^\d{3}-\d{4}$">|
|~|type|入力値を指定したタイプに制限する|<input type="email">&br;※url、email、number、tel、range、color等|
|input type="number"&br;など|step|入力値の増減幅を指定する||
|input type="number"&br;input type="date"など&br;progress|min、max|入力値の範囲制約||
|input type="text"&br;input type="search"&br;input type="url"&br;input type="email"&br;input type="password"&br;textarea|maxlength|入力値の長さ制約||
|form|novalidate|入力チェックを行わないformに指定する。||
|input type="submit"|formnovalidate|入力チェックを行わないボタンに指定する。||
*** 入力チェック結果に応じたスタイルを設定するCSSセレクタ [#eccc22f2]
|css記述|説明|記述例|h
|:valid|前者は入力値が正常の場合のスタイルを指定する||
|:invalid|入力値が異常の場合のスタイルを指定する||
|:in-range|入力値が指定した範囲内の場合のスタイルを指定する||
|:out-of-range|入力値が指定した範囲外の場合のスタイルを指定する||
|:required|入力が必須の場合のスタイルを指定する||
|:optional|入力が必須でない場合のスタイルを指定する||
*** 入力値チェックに使用できる JavaScriptAPIなど [#ge7bc83d]
|メソッド/プロパティ名|種類|説明|h
|'''element'''.willValidate|プロパティ|この要素が入力値チェックの対象となるかどうか|
|'''element'''.validationMessage|プロパティ|エラーメッセージの内容を取得する|
|'''element'''.setCustomValidity(message)|メソッド|カスタムのエラーメッセージを設定する。空文字列をセットすると、エラーメッセージをクリア|
|'''element'''.checkValidity()|メソッド|入力値チェックを明示的に実行|
|'''element'''.validity|プロパティ|入力値チェックの状態を表す。プロパティの値は「ValidityState」という型のオブジェクトで、以下のプロパティ(全てboolean型)を持つ|
|'''element'''.validity.valueMissing|プロパティ|必須制約違反の場合、true|
|'''element'''.validity.typeMismatch|プロパティ|タイプ制約違反の場合、true|
|'''element'''.validity.tooLong|プロパティ|文字列長が長過ぎた場合、true|
|'''element'''.validity.rangeUnderflow|プロパティ|入力値が妥当な範囲を下回っていたら、true|
|'''element'''.validity.rangeOverflow|プロパティ|入力値が妥当な範囲を上回っていたら、true|
|'''element'''.validity.stepMismatch|プロパティ|step属性で指定した値の段階にマッチしなかったら、true|
|'''element'''.validity.customError|プロパティ|カスタムエラー(setCustomValidity()を使用)の場合、true|
|'''element'''.validity.valid|プロパティ|入力値が妥当かどうか|
|'''element'''.invalid|イベント|入力値チェックに不合格だった際、対象の要素から発生するイベント|
※'''element'''は対象の要素を指す。
// ※forminputイベントとformchangeイベント
※valueAsDate
※valueAsNumber
** localStorageによるデータのキャッシュ [#c73adc1a]
** メモ [#d0b7006c]
*** 独自データ属性について [#j9210386]