HTML5

編集中の記事

省略または簡略化されたタグ記述

新しく追加されたタグ

タグ名
canvas線や図形を描画する
datalist入力テキストなどの候補値を指定する
video動画を埋め込む
audio音楽を埋め込む
progressプログレスバーを表示する

新しく追加された属性

タグ属性説明使用例
form要素全般formどのformに属する入力部品なのかを指定する。
※要素をformタグの中に含めなくてもsubmit時に送信対象にする事ができる。
<form id="form01">
.
.
</form>
<input type="text" form="form01">
input要素全般placeholder入力要素に対しての説明などを表示する<input type="date" placeholder="日付を入力してください。">
<style>
input:-moz-placeholder { color: blue; }
input::-webkit-input-placeholder { color: blue;}
</style>
input type="text"
など
autocomplete過去に入力した値を候補リストとして表示する
list入力値の候補リストを指定する。
※datalistタグと共に使用。
<input type="text" list="my_list">
<datalist id="my_list" style="display:none;">
<option value="hoge"></option>
<option value="fuga"></option>
</datalist>
input type="file"
input type="email"
multiple複数入力(選択)を可能にする<input type="file" multiple >
input type="file"files(※1)javaScriptから選択されたファイルの各種情報を得る事ができる<script>
function showFileName(){
var f = document.forms[0].my_file;
var fileName = f.files[0].name;
alert(fileName);
}
</script>
<input type="file" name="my_file" onchange="showFileName()">
input type="submit"formaction送信先URLを指定する※form要素に指定していたactionをボタンに指定できる<input type="submit" formaction="/hoge.php" >
formmethodsubmit時のmethodを指定する<input type="submit" value="GETで送信" formmethod="GET" >
formnovalidate入力チェックを行わないボタンの場合に指定する<input type="submit" value="戻る" formnovalidate >

※1 ... javascriptで扱えるプロパティ

input要素に追加されたtype属性

type説明
date入力値を日付に制限する
※形式:yyyy-mm-dd
datetime入力値を日時に制限する(タイムゾーン:UTC)
datetime-local入力値を日時に制限する(タイムソーン:ローカル)
month入力値を月に制限する
※形式:yyyy-mm
week入力値を週に制限する。
※形式:yyyy-Wnn
time入力値を時刻に制限する
number入力値を数値に制限する
search入力値を検索キーワードとして扱う。
※iPhoneなどで入力時に[開く]ボタンが[検索]になる。
tel入力値を電話番号に制限する
url入力値をURLに制限する
email入力値をメールアドレスに制限する。
※multiple属性を付加すると複数のアドレスを入力できる。
color入力値を色に制限する。
range範囲を指定して値を選択させる。

便利になった入力値チェック

使用できるタグなど属性説明指定できる値、使用例など
input
select
textarea
など
required入力必須項目とする
inputpattern入力値を指定した正規表現に合致するものだけに制限する<input type="text" id="zip" name="zip" pattern="^\d{3}-\d{4}$">
type入力値を指定したタイプに制限する<input type="email">
※url、email、number、tel、range、color等
input type="number"
など
step入力値の増減幅を指定する
input type="number"
input type="date"など
progress
min、max入力値の範囲制約
input type="text"
input type="search"
input type="url"
input type="email"
input type="password"
textarea
maxlength入力値の長さ制約
formnovalidate入力チェックを行わないformに指定する。
input type="submit"formnovalidate入力チェックを行わないボタンに指定する。

入力チェック結果に応じたスタイルを設定するCSSセレクタ

css記述説明記述例
:valid前者は入力値が正常の場合のスタイルを指定する
:invalid入力値が異常の場合のスタイルを指定する
:in-range入力値が指定した範囲内の場合のスタイルを指定する
:out-of-range入力値が指定した範囲外の場合のスタイルを指定する
:required入力が必須の場合のスタイルを指定する
:optional入力が必須でない場合のスタイルを指定する

入力値チェックに使用できる JavaScriptAPIなど

メソッド/プロパティ名種類説明
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は対象の要素を指す。

※valueAsDate
※valueAsNumber

localStorageによるデータのキャッシュ

メモ

独自データ属性について


トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-09-30 (月) 03:30:10 (2183d)