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" > |
formmethod | submit時の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 | 入力必須項目とする | |
input | pattern | 入力値を指定した正規表現に合致するものだけに制限する | <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 | 入力値の長さ制約 | |
form | novalidate | 入力チェックを行わない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によるデータのキャッシュ †
メモ †
独自データ属性について †