<input>【汎用入力コントロール (Form control)】
概要 ( 初期値 入力制御 各種コントロールの特記事項 JavaScript 参照 )
構文 コントロールの種類 type毎の属性 DOMインタフェース
概要
メモ
- 汎用入力コントロールの定義
- コントロールの種類:type属性【コントロールの種類】
- 送信データ名:name【コントロール名】属性
- 複数行入力コントロール:<textarea>【複数行入力コントロール】
- 初期値
- value【初期値】属性 (通常入力・ボタンのキャプション)
- checked【チェック状態】属性 (チェックボックス・ラジオボタン)
- 入力制御
- 各種コントロールの特記事項
- コンボボックス: list【datalist要素のid】属性に <datalist>【コンボボックス用リスト】 指定
- チェックボックス (type属性:checkbox) ・ラジオボタン (type属性:radio) のラベル: <label【ラベル】>参照
- ラジオボタン (type属性:radio) のグループ化: 同じname【コントロール名】属性 (通常、 <fieldset>【コントロールのグループ化】と併用)
- Eメールアドレス (type属性:email) の 正規表現 (但し、 RFC 5322 (英語) を意図的に違反)
( 外部リンク 参照)仕様 正規表現 HTML 5.1
WHATWG/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
- JavaScript 参照 ( 例 参照)
- コントロール・同一名のコントロール リストの取得
document.getElementById(【コントロールid (id)】) (コントロールidで取得)
document.getElementsByName(【コントロール名 (name)】) (コントロール名で取得)
document.forms[0 ~].【コントロール名 (name)】 (フォーム配列・コントロール名で取得)
document.【フォーム名 (name)】.【コントロール名 (name)】 (フォーム名・コントロール名で取得) - 【コントロール】.value (文字列等の入力値)
【コントロール】.valueAsDate (日付関連の入力値)
【コントロール】.valueAsNumber (数値の入力値)
【コントロール】.checked (チェックボックスのチェック状態)
【同一名のコントロール リスト】から value プロパティが設定値と一致するコントロールの checked を true に設定 (ラジオボタンの値設定)
【同一名のコントロール リスト】から checked が true のコントロールの value プロパティ値を取得 (ラジオボタンの値取得)
【コントロール】.disabled (コントロールの無効化 / 有効化)
- コントロール・同一名のコントロール リストの取得
例
<script>
function funcCopy() {
// 通常入力
var text = document.getElementById("input-1").value;
document.getElementById("input-2").value = text;
// チェックボックス
var check = document.getElementById("checkbox-1").checked;
document.getElementById("checkbox-2").checked = check;
// ラジオボタン
var value = "";
var listA = document.getElementsByName("radio_1");
for (var i = 0; i < listA.length; i++) {
if (listA[i].checked) {
value = listA[i].value;
break;
}
}
var listB = document.getElementsByName("radio_2");
for (var i = 0; i < listB.length; i++) {
if (listB[i].value == value) {
listB[i].checked = true;
break;
}
}
// カラー選択
var color = document.getElementById("color-1").value;
document.getElementById("color-2").value = color;
// 日付
var date = document.getElementById("date-1").valueAsDate;
document.getElementById("date-2").valueAsDate = date;
// 数値
var num = document.getElementById("number-1").valueAsNumber;
if (0 < num) { // 未サポート対応
document.getElementById("number-2").valueAsNumber = num;
}
// スライダー
var range = document.getElementById("range-1").valueAsNumber;
document.getElementById("range-2").valueAsNumber = range;
}
function funcDisable() {
var disabled = (document.getElementById("input-2").disabled) ? false : true;
document.getElementById("input-2").disabled = disabled;
document.getElementById("checkbox-2").disabled = disabled;
document.getElementById("fieldset-2").disabled = disabled;
document.getElementById("color-2").disabled = disabled;
document.getElementById("date-2").disabled = disabled;
document.getElementById("number-2").disabled = disabled;
document.getElementById("range-2").disabled = disabled;
}
</script>
<p>
<input id="input-1" value="入力データ">
<label><input id="checkbox-1" type="checkbox" checked>チェックボックス1</label>
</p>
<fieldset style="width:150px;">
<legend>ラジオボタン</legend>
<label><input name="radio_1" type="radio" value="A" checked>A</label>
<label><input name="radio_1" type="radio" value="B">B</label>
<label><input name="radio_1" type="radio" value="C">C</label>
</fieldset>
<input id="color-1" type="color" value="#FF0000">
<input id="date-1" type="date" value="2001-02-03">
<input id="number-1" type="number" value="123456">
<input id="range-1" type="range" value="50">
<p><input type="button" onclick="funcCopy();" value="入力値を下にコピー (取得&設定)">
<input type="button" onclick="funcDisable();" value="無効 / 有効 切替"></p>
<p>
<input id="input-2" placeholder="ここにコピー">
<label><input id="checkbox-2" type="checkbox">チェックボックス2</label>
</p>
<fieldset id="fieldset-2" style="width:150px;">
<legend>ラジオボタン</legend>
<label><input name="radio_2" type="radio" value="A">A</label>
<label><input name="radio_2" type="radio" value="B">B</label>
<label><input name="radio_2" type="radio" value="C" checked>C</label>
</fieldset>
<input id="color-2" type="color" value="#00FF00">
<input id="date-2" type="date">
<input id="number-2" type="number" value="0">
<input id="range-2" type="range" value="0">
CSS (一部)
スタイル | スタイル定義 | 備考 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
マウスカーソル変更 | cursor【マウスカーソル】 | |||||||||||
コントロール幅・高さ | width【要素の幅】 ・height【要素の高さ】 | |||||||||||
ホバー時のスタイル変更 | :hover【ホバー要素】 | |||||||||||
アクティブ時のスタイル変更 | :active【アクティブ要素】 | |||||||||||
フォーカス時のスタイル変更 | :focus【フォーカス要素】 | |||||||||||
使用可能時のスタイル変更 | :enabled【使用可能要素】 | |||||||||||
使用不可時のスタイル変更 | :disabled【使用不可要素】 | |||||||||||
チェック状態時のスタイル変更 | :checked【チェック状態要素】 | |||||||||||
不確定状態時のスタイル変更 | :indeterminate【不確定状態要素】 | |||||||||||
IMEモード | ime-mode【IMEモード】
| MS独自仕様:一部ブラウザサポート |
DOM・Web API (一部)
処理 | プロパティ / メソッド | 備考 |
---|---|---|
フォーカス取得イベント | onfocus | |
フォーカス喪失イベント | onblur | |
変更イベント | onchange | 即時 あるいは フォーカス喪失時 |
入力不正イベント | oninvalid | required【入力必須】・pattern【入力パターン】 チェック |
クリックイベント | onclick | ボタン・イメージボタン |
送信イベント | formのonsubmit | 送信ボタン |
リセットイベント | formのonreset | リセットボタン |
要素取得 | document.getElementById(【id】) | |
テキスト・キャプション・値等 取得・設定 | value | |
チェック状態 取得・設定 | checked | チェックボックス・ラジオボタン |
無効化 取得・設定 | disabled (true / false) | 複数のコントロールを操作する場合は、 <fieldset>【コントロールのグループ化】利用 |
スタイル 取得・設定 | style.~ | color・backgroundColor 等 |
数値(double) 取得・設定 | valueAsNumber | |
日時(Date?) 取得・設定 | valueAsDate |
関連要素
外部リンク
- HTML Living Standard (英語)
- W3C HTML 5.2 (英語)
- W3C HTML 5.1 2nd Edition (英語)
- W3C HTML5 (英語)
構文
<input | 必須 | 開始タグ | ||||||||||||||||
accept=【MIMEタイプ (複数:カンマ区切り)】 | アップロードファイルのMIMEタイプ (例:application/pdf・text/html・audio/*・video/*・image/*・拡張子指定 .txt・.doc・.xls) | |||||||||||||||||
align=top | middle | bottom | left | right | image配置 代替:スタイルシート(vertical-align・float) | |||||||||||||||||
alt=【代替テキスト】 | 代替テキスト | |||||||||||||||||
autocomplete=off | on | オートコンプリート機能の有効・無効 (入力候補表示) | |||||||||||||||||
autofocus | ページロード時、自動フォーカス ※:グローバル属性の autofocus 参照 | |||||||||||||||||
checked | チェック状態 | |||||||||||||||||
dirname=【フィールド名】 | 要素方向(ltr・rtl)のフィールド名 (このフィールド名で要素方向を送信) | |||||||||||||||||
disabled | コントロール無効化 | |||||||||||||||||
form=【form要素id】 | 関連付けform要素id属性 (コントロールをform要素外に定義可能) | |||||||||||||||||
formaction=【URL】 | フォーム送信時のURL | |||||||||||||||||
formenctype=【エンコードタイプ】 | フォーム送信時のエンコードタイプ ("application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain") | |||||||||||||||||
formmethod=get | post | フォーム送信時のHTTPメソッド | |||||||||||||||||
formnovalidate | フォーム送信時の検証無効 | |||||||||||||||||
formtarget=【ターゲット】 | フォーム送信時のターゲット | |||||||||||||||||
height=【高さ】 | 画像の高さ | |||||||||||||||||
inputmode=【入力モード】 | 入力モード (実装依存) ※:グローバル属性の inputmode【入力モード】 参照 HTML 5.1:Input modalities: the inputmode attribute | |||||||||||||||||
list=【datalist要素のid】 | <datalist>【コンボボックス用リスト】のid | |||||||||||||||||
max=【最大値】 | 最大値 | |||||||||||||||||
maxlength=【最大入力文字数】 | 最大入力文字数 | |||||||||||||||||
min=【最小値】 | 最小値 | |||||||||||||||||
minlength=【最小入力文字数】 | 最小入力文字数 | |||||||||||||||||
multiple | 複数値可否 | |||||||||||||||||
name=【コントロール名】 | コントロール名 (送信データ名) id との重複は不可 | |||||||||||||||||
pattern=【正規表現】 | 入力パターンのJavaScript正規表現 (エラーメッセージにtitle属性を使用) | |||||||||||||||||
placeholder=【表示文字列】 | ウォーターマーク (未入力時の表示文字列) | |||||||||||||||||
readonly | 読み取り専用 | |||||||||||||||||
required | 入力必須 | |||||||||||||||||
size=【横幅】 | コントロールの横幅 (ブラウザ 及び type属性によっては無視) | |||||||||||||||||
src=【URL】 | 画像リソースのURL | |||||||||||||||||
step=【増減ステップ値】 | 増減ステップ値 | |||||||||||||||||
type=【コントロールの種類 (省略:text)】 | コントロールの種類 (関連属性:type毎の属性 参照) | |||||||||||||||||
value=【初期値】 | 初期値 (キャプション) | |||||||||||||||||
width=【幅】 | 画像の幅 | |||||||||||||||||
【グローバル属性】 | ||||||||||||||||||
accesskey=【アクセスキー (複数:半角スペース区切り )】 | アクセスキー | |||||||||||||||||
autocapitalize=【変換方法】 | 自動大文字化
| |||||||||||||||||
autofocus | ページロード時、自動フォーカス ※:<button>【ボタン】・<input>【汎用入力コントロール】・<textarea>【複数行入力コントロール】・<select>【選択リスト】はW3C定義の同名個別属性も参照 | |||||||||||||||||
class=【クラス名 (複数:半角スペース区切り)】 | 所属クラス (複数指定:<style>【スタイル情報】)・外部スタイルシートで後から定義したほうが優先 | |||||||||||||||||
contenteditable [ ="" (可能) | true (可能) | false (不可) | inherit (親要素継承) ] | 編集可否 | |||||||||||||||||
contextmenu=<menu>【メニュー】 のid | コンテキストメニューのid | |||||||||||||||||
data-*=【カスタムデータ】 | カスタムデータ属性 | |||||||||||||||||
dir=ltr (左から右) | rtl (右から左) | auto (自動) | 文字表記方向 (ltr:left to right text or table / rtl:right to left text or table) ※<bdo>【テキスト方向形式】の場合、ltr または rtlが必須 | |||||||||||||||||
draggable=true (ドラッグ可能) | false (ドラッグ不可) | auto (ブラウザ既定) | ドラッグ可否 | |||||||||||||||||
dropzone=copy (ドロップデータのコピー) | move (ドロップデータを移動) | link (ドロップデータのリンク) | ドロップデータの扱い | |||||||||||||||||
enterkeyhint=【ヒント】 | [Enter]キーのアクション ヒント (対応するラベル・アイコン等を表示)
| |||||||||||||||||
id=【id】 | id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む) スペース文字 (SP:U+0020・tab:U+0009・LF:U+000A・FF:U+000C・CR:U+000D) 以外の全ての文字が使用可能 (大文字小文字の区別あり) (<a>【ハイパーリンク】のリンク先・CSS対象(#~)・スクリプト参照) | |||||||||||||||||
inputmode=【入力モード】 | 入力モード (参照:CSS ime-mode【IMEモード】) ※:<input>【汎用入力コントロール】・<textarea>【複数行入力コントロール】はW3C定義の同名個別属性も参照
| |||||||||||||||||
is=【定義名】 | 定義名 | |||||||||||||||||
itemid=【URL】 | アイテムのグローバル識別子 | |||||||||||||||||
itemprop=【アイテムのプロパティ (複数:半角スペース区切り)】 | アイテムのプロパティ | |||||||||||||||||
itemref=【要素IDのリスト】 | アイテムの参照リスト | |||||||||||||||||
itemscope | アイテムのプロパティ宣言 | |||||||||||||||||
itemtype=【アイテムの型 (複数:半角スペース区切り)】 | アイテムの型 | |||||||||||||||||
lang=【言語コード】 | 言語コード (【主コード】-【副コード】 例:"ja":日本語 / "en":英語 / "en-US":アメリカ英語) | |||||||||||||||||
nonce=【ワンタイム トークン (文字列)】 | CSP(コンテンツ セキュリティ ポリシー)のチェックで使用されるワンタイム トークン(nonce:number used once) ※:<link>【メタデータリンク】・<script>【スクリプト】・<style>【スタイル情報】はW3C定義の同名個別属性も参照 | |||||||||||||||||
slot=【スロット名】 | スロット名 (<slot>【スロット】のname属性に対応) | |||||||||||||||||
spellcheck=true | false | スペルチェック有無 | |||||||||||||||||
style=【スタイルシート (複数:セミコロン区切り / 最後のセミコロンは省略可)】 | スタイル | |||||||||||||||||
tabindex=【タブインデックス番号】 | タブインデックス | |||||||||||||||||
title=【説明文】 | 説明 (多くはツールチップ表示) ※<link>【メタデータリンク】:メタデータリンクのタイトル ※<style>【スタイル情報】:スタイルシート名 | |||||||||||||||||
translate="" (翻訳対象) | yes (翻訳対象) | no (翻訳対象外) | 翻訳可否 | |||||||||||||||||
> |
コントロールの種類
右記の記述全て有効:type="button" ・ type='button' ・ type=button
type属性 | コントロール | 備考 | 実装 |
---|---|---|---|
button | ボタン | キャプション:value属性 | |
checkbox | チェックボックス | キャプション:<label【ラベル】>と組み合わせ | |
color | 色選択 | 一部はコード入力 | |
date | 日付 | ||
datetime-local | 日時 | ローカルの日時 (一時定義されていた datetime は廃止) | |
Eメール | 複数選択可能 | ||
file | アップロードファイル選択 | 複数選択可能 | |
hidden | 隠しフィールド | (非表示) | |
image | イメージボタン | ||
month | 年月 | ||
number | 数値 | ||
password | パスワード | 数値 | |
radio | ラジオボタン | キャプション:<label【ラベル】>と組み合わせ | |
range | スライダー | デフォルト:0 ~ 100 | |
reset | リセットボタン | ||
search | 検索 | textとの違いは外観 (クリアボタン等) | |
submit | 送信ボタン | ||
tel | 電話番号 | ||
text (省略時) | 1行テキスト | 複数行は<textarea>【複数行入力コントロール】 | |
コンボボックス | list属性に<datalist>【コンボボックス用リスト】指定 他のtype属性でも使用可 | ||
time | 時刻 | ||
url | URL | ||
week | 週番号 |
type毎の属性
(1/2) | accept | alt | autocomplete | checked | dirname | formaction | formenctype | formmethod | formnovalidate | formtarget | height | inputmode (W3C) | list |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
button | |||||||||||||
checkbox | ○ | ||||||||||||
color | ○ | ○ | |||||||||||
date | ○ | ○ | |||||||||||
datetime-local | ○ | ○ | |||||||||||
○ | ○ | ||||||||||||
file | ○ | ||||||||||||
hidden | |||||||||||||
image | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ||||||
month | ○ | ○ | |||||||||||
number | ○ | ○ | |||||||||||
password | ○ | ○ | |||||||||||
radio | ○ | ||||||||||||
range | ○ | ○ | |||||||||||
reset | |||||||||||||
search | ○ | ○ | ○ | ○ | |||||||||
submit | ○ | ○ | ○ | ○ | ○ | ||||||||
tel | ○ | ○ | |||||||||||
text | ○ | ○ | ○ | ○ | |||||||||
time | ○ | ○ | |||||||||||
url | ○ | ○ | |||||||||||
week | ○ | ○ |
(2/2) | max | maxlength | min | minlength | multiple | pattern | placeholder | readonly | required | size | src | step | value | width |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
button | キャプション | |||||||||||||
checkbox | ○ | 判別値 | ||||||||||||
color | 初期値 #rrggbb形式 (小文字) | |||||||||||||
date | yyyy-MM-dd 形式 | yyyy-MM-dd 形式 | ○ | ○ | ○ | 初期値 yyyy-MM-dd 形式 | ||||||||
datetime-local | ※datetime | ※datetime | ○ | ○ | ○ | 初期値 ※datetime | ||||||||
○ | ○ | value値 カンマ 区切り | ○ | ○ | ○ | ○ | ○ | 初期値 | ||||||
file | value値 カンマ 区切り | ○ | ||||||||||||
hidden | 初期値 | |||||||||||||
image | ○ | 初期値 | ○ | |||||||||||
month | ※month | ※month | ○ | ○ | ○ | 初期値 ※month | ||||||||
number | ○ | ○ | ○ | ○ | ○ | ○ | 初期値 | |||||||
password | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 初期値 | ||||||
radio | ○ | 判別値 | ||||||||||||
range | ○ | ○ | ○ | 初期値 | ||||||||||
reset | キャプション | |||||||||||||
search | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 初期値 | ||||||
submit | キャプション | |||||||||||||
tel | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 初期値 | ||||||
text | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 初期値 | ||||||
time | ※time | ※time | ○ | ○ | 秒単位 | 初期値 ※time | ||||||||
url | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 初期値 | ||||||
week | ※week | ※week | ○ | ○ | ○ | 初期値 ※week |
○:有効
※datetime:yyyy-MM-ddThh:mm 形式
※month:
※week:
※time:hh:mm[:ss[.nnn]] 形式 (nnn:1~3桁)
DOMインタフェース (HTMLInputElement・HTMLElement)
interface HTMLInputElement : HTMLElement { | W3C:interface HTMLInputElement (英語) HTML 5.1 ・HTML 5.2 ・WHATWG | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【プロパティ】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
【HTMLInputElement プロパティ】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
accept; | アップロードファイルのMIMEタイプ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
alt; | 代替テキスト | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
autocomplete; | オートコンプリート機能の有効・無効 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
autofocus; | ページロード時、自動フォーカス | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
checked; | チェック状態 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
defaultChecked; | 初期チェック状態 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
defaultValue; | 初期値 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
dirName; | 要素方向 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
disabled; | コントロール無効化 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute FileList? | files; | 選択ファイル リスト | |||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute HTMLFormElement? | form; | <form>【フォーム】 エレメント | |||||||||||||||||||||||||||||||||||||||||||||||||||||
formAction; | フォーム送信時のURL | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
formEnctype; | フォーム送信時のエンコードタイプ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
formMethod; | フォーム送信時のHTTPメソッド | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
formNoValidate; | フォーム送信時の検証無効 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
formTarget; | フォーム送信時のターゲット | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute unsigned long | height; | 画像の高さ | |||||||||||||||||||||||||||||||||||||||||||||||||||||
indeterminate; | 不定状態 (チェックボックス) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
labels; | 関連付け<label>【ラベル】エレメント リスト (NodeList (英語)) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute HTMLElement? | list; | <datalist>【コンボボックス用リスト】のエレメント | |||||||||||||||||||||||||||||||||||||||||||||||||||||
max; | 最大値 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute long | maxLength; | 最大入力文字数 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
min; | 最小値 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute long | minLength; | 最小入力文字数 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
multiple; | 複数値可否 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
name; | コントロール(送信)名 (重複:グループ化 / idとの重複不可) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
pattern; | 入力パターンのJavaScript正規表現 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
placeholder; | ウォーターマーク (未入力時の表示文字列) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
readonly; | 読み取り専用 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
required; | 入力必須 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
selectionDirection; | 選択方向 ("forward" / "backward" / "none") | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute unsigned long | selectionEnd; | 選択終了位置 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute unsigned long | selectionStart; | 選択開始位置 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute unsigned long | size; | コントロールの横幅 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
src; | 画像リソースのURL | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
step; | 増減ステップ値 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
type; | コントロールの種類 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
validationMessage; | 妥当性チェックNG時メッセージ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute ValidityState | validity; |
妥当性状態
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
[TreatNullAs=EmptyString] | value; | 値 (キャプション) | |||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute Date? | valueAsDate; | 値 (日時) | |||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute unrestricted double | valueAsNumber; | 値 (数値) | |||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute unsigned long | width; | 画像の幅 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
willValidate; | 妥当性チェック対象 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【HTMLElement プロパティ】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
accessKey; | アクセスキー | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
accessKeyLabel; | アクセスキー表現文字列 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
contentEditable; | 編集可能状態 ("true":編集可能 / "false":編集不可 / "inherit":親要素継承) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Map | dataset; | カスタムデータ属性 (data-*) マップ | |||||||||||||||||||||||||||||||||||||||||||||||||||||
dir; | 文字表記方向 ("ltr":左から右 / "rtl":右から左) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
draggable; | ドラッグ可否 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
[PutForwards=value] | attribute DOMTokenList | dropzone; | ドロップデータの扱い | ||||||||||||||||||||||||||||||||||||||||||||||||||||
hidden; | 非表示状態 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
[TreatNullAs=EmptyString] | innerText; | 内容 (テキスト形式) | |||||||||||||||||||||||||||||||||||||||||||||||||||||
isContentEditable; | 編集可否 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
lang; | 言語コード | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
spellcheck; | スペルチェック有無 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute long | tabIndex; | タブインデックス | |||||||||||||||||||||||||||||||||||||||||||||||||||||
title; | 説明 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
translate; | 翻訳可否 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【ElementCSSInlineStyle プロパティ】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute CSSStyleDeclaration | style; | スタイル | |||||||||||||||||||||||||||||||||||||||||||||||||||||
【CSSStyleDeclaration プロパティ】 (仕様上、次と同等: CSSStyleDeclaration implements CSS2Properties) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
style.~; | スタイル属性 (例:style.color・style.backgroundColor) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【Element プロパティ】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
[SameObject] | attribute NamedNodeMap | attributes; | 関連属性 マップ | ||||||||||||||||||||||||||||||||||||||||||||||||||||
[SameObject] | attribute DOMTokenList | classList; | クラス名 リスト | ||||||||||||||||||||||||||||||||||||||||||||||||||||
className; | クラス名 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
id; | id (ページ内で一意:name【コントロール(送信)名】を含む) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
( | innerHTML;) | 内容 (HTML形式) W3C:未定義 (参照:Element.outerHTML・Node.textContent (innerText)) | |||||||||||||||||||||||||||||||||||||||||||||||||||||
localName; | ローカル名 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
? | namespaceURI; | ネームスペースURI | |||||||||||||||||||||||||||||||||||||||||||||||||||||
( | outerHTML;) | タグを含む内容 (HTML形式) W3C:未定義 (参照:Element.innerHTML・Node.textContent (innerText)) | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | prefix; | プリフィックス | |||||||||||||||||||||||||||||||||||||||||||||||||||||
tagName; | タグ名 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【Node プロパティ】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
? | baseURI; | ベースURI | |||||||||||||||||||||||||||||||||||||||||||||||||||||
[SameObject] | childNodes; | 子ノード リスト | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | firstChild; | 先頭子ノード | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | lastChild; | 最終子ノード | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | nextSibling; | 次の兄弟ノード | |||||||||||||||||||||||||||||||||||||||||||||||||||||
nodeName; | ノード名 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute unsigned short | nodeType; | ノードタイプ (ELEMENT_NODE / ATTRIBUTE_NODE / TEXT_NODE / CDATA_SECTION_NODE / ENTITY_REFERENCE_NODE / ENTITY_NODE / PROCESSING_INSTRUCTION_NODE / COMMENT_NODE / DOCUMENT_NODE / DOCUMENT_TYPE_NODE / DOCUMENT_FRAGMENT_NODE / NOTATION_NODE) | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | nodeValue; | ノード値 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | ownerDocument; | オーナードキュメント | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | parentElement; | 親エレメント | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | parentNode; | 親ノード | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | previousSibling; | 前の兄弟ノード | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | textContent; (IE:innerText) | 内容 (Text形式) (参照:Element.innerHTML・Element.outerHTML) 取得:要素内のHTMLタグを除外しテキストのみ 設定:HTMLタグはテキスト変換 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
【GlobalEventHandlers プロパティ (一部) 】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute EventHandler onabort; | on~; | イベントハンドラ (例:onclick・onfocus) | |||||||||||||||||||||||||||||||||||||||||||||||||||||
【ParentNode プロパティ】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
attribute unsigned long | childElementCount; | 子エレメントの数 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
[SameObject] | attribute HTMLCollection | children; | 子エレメント コレクション | ||||||||||||||||||||||||||||||||||||||||||||||||||||
? | firstElementChild; | 最初の子エレメント | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | lastElementChild; | 最後の子エレメント | |||||||||||||||||||||||||||||||||||||||||||||||||||||
【NonDocumentTypeChildNode プロパティ】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
? | previousElementSibling; | 前の兄弟エレメント | |||||||||||||||||||||||||||||||||||||||||||||||||||||
? | nextElementSibling; | 次の兄弟エレメント | |||||||||||||||||||||||||||||||||||||||||||||||||||||
【メソッド】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
【HTMLInputElement メソッド】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
boolean checkValidity(); | 妥当性チェック | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void select(); | 全選択 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void setCustomValidity( error); | 妥当性エラーメッセージ設定 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void setRangeText( replacement); | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
void setRangeText ( replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve"); | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
void setSelectionRange(unsigned long start, unsigned long end, optional direction); | 選択 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void stepDown(optional long n = 1); | 値増加 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void stepUp(optional long n = 1); | 値削減 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【HTMLElement メソッド】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
void click(); | クリック 操作 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void focus(); | フォーカス設定 操作 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void forceSpellCheck(); | スペルチェック | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void blur(); | フォーカス喪失 操作 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【Element メソッド】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
? getAttribute( name); | 属性取得 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
? getAttributeNS(? namespace, localName); | 属性取得 (ネームスペース指定) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTMLCollection getElementsByClassName( classNames); | エレメント コレクション取得 (クラス名指定) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTMLCollection getElementsByTagName( localName); | エレメント コレクション取得 (タグ名指定) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTMLCollection getElementsByTagNameNS(? namespace, localName); | エレメント コレクション取得 (ネームスペース・タグ名指定) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
boolean hasAttribute( name); | 属性チェック | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
boolean hasAttributeNS(? namespace, localName); | 属性チェック (ネームスペース指定) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void removeAttribute( name); | 属性削除 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void removeAttributeNS(? namespace, localName); | 属性削除 (ネームスペース指定) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void setAttribute( name, value); | 属性設定 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void setAttributeNS(? namespace, name, value); | 属性設定 (ネームスペース指定) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【Node メソッド】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Node appendChild(Node node); | 子ノード追加 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
[NewObject] Node cloneNode(optional boolean deep = false); | クローンノード作成 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
unsigned short compareDocumentPosition(Node other); | 他ノードとの位置比較 (DOCUMENT_POSITION_DISCONNECTED / DOCUMENT_POSITION_PRECEDING / DOCUMENT_POSITION_FOLLOWING / DOCUMENT_POSITION_CONTAINS / DOCUMENT_POSITION_CONTAINED_BY / DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
boolean contains(Node? other); | 指定子孫ノードの存在有無 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
boolean hasChildNodes(); | 子ノードの存在有無 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Node insertBefore(Node node, Node? child); | 指定ノード前挿入 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
boolean isDefaultNamespace(? namespace); | デフォルトネームスペース チェック | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
boolean isEqualNode(Node? node); | 同一ノードチェック | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
? lookupNamespaceURI(? prefix); | ネームスペースURI調査 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
? lookupPrefix(? namespace); | ネームスペース プリフィックス調査 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
void normalize(); | 標準化 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Node removeChild(Node child); | 子ノード削除 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Node replaceChild(Node node, Node child); | 子ノード置換 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【ParentNode メソッド】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Element? querySelector( selectors); | 指定セレクタ先頭エレメント取得 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
[NewObject] NodeList querySelectorAll( selectors); | 指定セレクタ ノードリスト取得 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
【ChildNode メソッド】 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
void remove(); | 削除 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
}; |