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によるデータのキャッシュ †
メモ †
独自データ属性について †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
